Next.js and Apollo – Portfolio App (w/ React, GraphQL, Node)

Next.js and Apollo – Portfolio App (w/ React, GraphQL, Node)

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 28.5 Hours | 13.3 GB

Learn GraphQL and Apollo! Create a fast portfolio application in Next.js(Next 9+) / React backed with Apollo + Node.js

What is GraphQL ?

GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn’t tied to any specific database or storage engine and is instead backed by your existing code and data.

What is Apollo ?

Apollo is the industry-standard GraphQL implementation, providing the data graph layer that connects modern apps to the cloud. Apollo will handle data fetching, caching and state management of out the box!

What is Next.js ?

Next.js is React framework that provides infrastructure and simple development experience for server side rendered(SSR) application.

An intuitive page-based routing system (with support for dynamic routes)
Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis

What are we going to build ?

We will work mainly on portfolios features. You will learn how to manage data on the client and the server with Apollo and Graphql. Data will be stored in Mongo Atlas Database to which we will be communicating through the Node JS Server. We will create a functionality to create a portfolio and I will explain you how to easily manage forms. Then we will take a look on an update functionality where I will show you how to populate inputs with existing data. After that will work on a delete functionality. All of the features will be reactive and updating view in real time. You will learn the basics of data fetching and data mutations with Apollo.

Another big feature we will be working on will be session based authentication. We will prepare login and register forms. Users will be able to register, login and experience features only for authenticated users. You will learn how to manage sessions, how to protect the pages, and manage an authentication state through your application.

Forum feature will be the biggest one. You are going to learn how to create fully working forum consisting of topics and posts. We will integrate a component that will be used for topic and posts creation. Users will be able to create various topics, posts and also replies to other posts, all updated in real time and also across the browsers. After that you will learn how to create a fully working pagination!

Later in the course we will create features to get randomised data for home page and I will talk about re-usability. We will finish CV page and we will get into deploying. After all production improvements will be applied we will deploy our application to heroku so anyone on internet can access our portfolio.

What you’ll learn

  • Develop Real-world web application with Next JS, Apollo and Node
  • Create your own portfolio application in most demanded frameworks on the market
  • Grasp full power of GraphQL
Table of Contents

Introduction
1 Project Preview
2 How to resolve issues

Base Project Setup
3 Section Introduction
4 Creating the project
5 Create pages
6 Creating components!
7 Get initial props
8 More pages
9 Alias for absolute path
10 Root app component
11 Get initial props of _app
12 SSR Explanation
13 SSR Debugging
14 Navbar component
15 Navigation to pages

GraphQL Beginnings
16 Section Introduction
17 GraphQL explanation
18 GraphQL integration
19 Portfolio resolvers
20 Data rework
21 Fetch portfolios on client
22 Portfolio card component
23 Provide parameters in query
24 Portfolio detail page
25 Links to portfolios
26 Server refactoring
27 Portfolio mutations
28 Apollo server
29 Update portfolio – server
30 Create portfolio
31 Update portfolio
32 Delete portfolio

Apollo for React
33 Section Introduction
34 Apollo client
35 Get portfolio with Apollo
36 Get portfolios improvements
37 Create portfolio improvements
38 Create portfolio cache
39 Apollo high order component(HOC)
40 Apollo HOC with SSR
41 Update portfolio improvements
42 Delete portfolio improvements
43 Refactoring queries and mutations
44 Apollo dev tools
45 Mongo Atlas
46 Gitignore
47 Mongo DB + Mongoose
48 Portfolio Model + Fake DB
49 Populate DB
50 Get portfolio from DB
51 Portfolio create, update, delete in DB
52 GraphQL portfolio model
53 Separating apollo functions on server

Authentication on Server
54 Section introduction
55 User infrastructure
56 User mongoose model
57 Sign Up user
58 Password hashing
59 FakeDB populate users
60 Auth context
61 Sessions
62 GraphQL Strategy
63 Register strategy and debug
64 Promise in Auth
65 Find user in DB
66 Return user from sign in
67 Password validation
68 Middlewares
69 Store sessions with passport
70 Add sign out
71 Check if user is authenticated

Authentication on Client
72 Section introduction
73 Sign Up form
74 React hook form
75 Sign up user success
76 Redirect
77 Handle errors
78 Handle errors on server
79 Sign in form
80 Sign in done
81 Fetch user from server
82 Display username in navbar
83 Fix user after sign in
84 Sign out
85 HOC to check if user is authenticated
86 Check user role

Portfolio Create
87 Section introduction
88 Portfolio new page
89 Dropdown links + withAuth improvements
90 Datepicker component
91 Set dates in datepicker
92 Disable end date
93 Finishing create portfolio
94 Base layout
95 Handle errors
96 Check for user role

Update & Delete Features
97 Section introduction
98 Instructor dashboard
99 User portfolio resolver
100 Fetch user portfolios
101 Add controls to dashboard
102 Remove portfolio mutation
103 Portfolio update form
104 Update portfolio mutation

UX Improvements
105 Section Introduction
106 Toast messages
107 Format dates
108 Client side fields
109 Server redirect
110 Display message on redirect
111 Dispose message on login
112 Spinner component

Forum Feature
113 Section Introduction
114 Add categories to FakeDB
115 Populate Topics data
116 Forum categories resolver
117 Fetch topics by category resolver
118 Fetch topics by slug changes
119 Display forum categories
120 Fetch and display topics
121 Create topic resolver
122 Slugify topic
123 Unique slug
124 Replier component
125 Replier improvements
126 Create topic functionality
127 Add topic to cache
128 Fetch topic by slug
129 Prepare posts data
130 Fetch posts resolver
131 Fetch posts
132 Display posts
133 Posts improvements
134 Create post resolver
135 Create post client side

Pagination
136 Section introduction
137 Pagination component
138 Fetch more function
139 Get posts count
140 Get paginated data from server
141 Display data for specific page
142 Persistent pagination
143 Create post with pagination
144 Re-pooling data

Highlight Feature
145 Section Introduction
146 Highlight data
147 Reusable “random” function
148 Display highlight portfolios
149 Display topics
150 CV Page

Deployment
151 Section Introduction
152 Prod base URL
153 Prod database changes
154 Prod session setup
155 Heroku and Git CLI
156 Deployment to Heroku
157 Course End + Testing