Complete Next.js with React & Node – Beautiful Portfolio App

Complete Next.js with React & Node – Beautiful Portfolio App

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 60 Hours | 31.9 GB

Build Serverless Web Apps with Next.js. Learn Hooks. Deploy to Vercel. Next.js (Next 9.4), React (React 16+) & Node.

Is this course right for you ?

If you are planning to start your career as a developer or you just want to improve your programming skills, then this course is right for you. Learn how to build amazing portfolio website you can share with your colleagues or future employers.

Get all you need to start web development in one course! Start with technologies of Web Development to more advanced topics until your application will be deployed to Heroku or Vercel and accessible online on the internet.

This resource is the only thing you need in order to start Web Development with Next.js , React and Node. During this course you will get confidence and skills required to start your own projects, you will get the right mindset to apply for a developer career and to improve in modern frameworks like Next.js , React.js and Node.

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 work on?

First we are going to integrate base layout of the application. We will brake layout into small pieces and we will create lots of reusable components such as a navbar, portfolio card and many others. I will explain you how server side rendering works, how to use different data fetching techniques and what are the differences and benefits of fetching on server versus client.

First big feature we will be working on, will be authentication. Authentication will be handled by Auth0 provider, nevertheless there will be lot’s work to handle.

Users will be able to register and login and experience features only for authenticated users. You will learn how to restrict access to pages and how to manage authentication state through you application which will results in UI changes of the application layout.

Next we will work on portfolios features. We will implement functionality to create portfolio and I will explain you how to easily manage forms. Then we will take a look on update functionality where I will show you how to populate inputs with existing data. In the end of the section we will work on delete functionality. All of the features will be reactive and updating view in real time and You will learn how to create fast static pages with new Next.js functions.

Blog feature will be the biggest one. Users will be able to create blogs using slate editor that offers different formatting options. Each blog will be saved initially as a draft blog and it will be an user responsibility to publish it. For this purpose we will create dashboard page displaying all user blogs with option to publish or make a draft from the blog. All Published blogs will be highlighted on blogs page and created as static pages assuring better performance. We will create delete and update functionality as well.

Next we will work on SEO(search engine optimisation) improvements. I will explain you basics of SEO and how to get it working with Next.js.

Last section will be covering deployment. Express API server will be deployed to Heroku. Next.js portfolio application will be deployed to serverless Vercel platform which will make our application super fast on internet.

What you’ll learn

  • Develop serverless and classical web applications with latest Next JS & React
  • Completely understand the processes and server side part of Next JS
  • Create SEO (Search Engine Optimisation) and Isomorphic Friendly Applications
  • Establish yourself in field of the exciting Next and React web development environment

+ Table of Contents

1 Project Overview
2 How to get most of this course resolve issues

PROJECT 1 – Basics
3 Application Initialization
4 Create index page
5 Functional Components
6 Class Components
7 Reusable Components
8 Some basics styles
9 What is the State
10 Lets mutate State
11 Common mistakes with State
12 State of functional component
13 What are props
14 How web app works
15 Iterate over list of data
16 Shorten Function
17 Move movie data to Store
18 Get movie data Promises
19 Use Effect
20 Get movies in class component
21 Catch error in Promise
22 Get initial props
23 More pages more links
24 App container
25 App container props
26 Detail page of movie
27 Get movie by id
28 Fix links in detail page
29 Finishes detail page
30 Get images from movies
31 Display cover images
32 Get categories
33 Modal implementation Close Modal
34 Form to create movie Containment
35 Get values from the form
36 Handle genre changes
37 Handle form submit
38 Close Modal Uncontrolled data functionality
39 Provide ID of movie
40 Base server implementation
41 More about Server
42 Getting movies from server
43 Get movie by ID
44 Saving movies
45 Delete movie
46 Edit page for movie
47 Provide data to Edit page
48 Final touches on Update movies functionality
49 Navigation fixes
50 Starting with filtering
51 Filtering finished
52 Styling improvements
53 API Endpoints
54 Post endpoint

PROJECT 2 – Starter(Serverless)
55 Section Intro
56 Project Init
57 More pages Header
58 Base Layout
59 Styles
60 Post Data
61 Portfolio Detail
62 Get portfolio by ID
63 Custom server
64 Next routes
65 Reactstrap
66 Fonts
67 Debugger Updated
68 Cleanup Debugging
69 Proper layout
70 Typed JS
71 Header – part 1 rework
72 Header – part 2
73 Base Page
74 Change to functionals components
75 Remove app
76 Absolute path
77 Login button
78 Api functions – part 1
79 Api functions – part 2
80 Api functions – part 3
81 Loading state
82 Fetch post by ID
83 useSWR
84 useSWR by ID

85 Section Intro
86 Auth0 Registration
87 Login API Route
88 Webpack Dotenv package
89 Env Variables
90 Login Screen
91 Get login working
92 Get User
93 Pass user to layout
94 Logout
95 Secret page
96 Redirect
97 HOC Start
98 withAuth HOC
99 Server side props
100 Rework server side
101 withAuth Server side
102 About Roles
103 Admin Rights
104 Admin SSR
105 ENV Variables

Portfolio Feature
106 Section Intro
107 API Server
108 Git Ignore
109 Routes and Controllers
110 Mongo DB
111 Structural changes in DB
112 Create portfolio data
113 Populate DB
114 Get portfolio by ID
115 Get Portfolios
116 Portfolio Card
117 Base Page Stylings
118 Get portfolio server side
119 Get static paths
120 SSR vs Static
121 Portfolio new page
122 Submit form
123 Datepicker
124 Handle Dates
125 Disable end date
126 Api route to create portfolio
127 Create portfolio endpoint
128 Testing create portfolio
129 JWT Middleware
130 Get access token
131 Create portfolio from App
132 Hook function to create portfolio
133 Hook creator – Api handler
134 Handle Errors
135 Portfolio edit page
136 Pre-fill form with data
137 Update portfolio on Server
138 Update on client
139 Toast messages
140 Handle errors
141 Edit and Delete buttons
142 Delete on server
143 Delete on client
144 Delete from state
145 Check role on server
146 Dropdown menu
147 Dropdown menu done
148 Next 9.4 Updates – part 1
149 Note Revalidate
150 Next 9.4 Updates – part 2

Blog Feature
151 Section Intro
152 Blog Editor
153 Blog Server implementation
154 Blog endpoints
155 Create blog on server
156 Create blog from client
157 Redirect to blog update
158 Get initial content to blog update
159 Update blog on server
160 Update blog from client
161 Base API
162 Dashboard page
163 Fetch blogs by user
164 Filter blogs
165 Dropdown in dashboard
166 Generate options
167 Slugify title
168 Update blog
169 Mutate function
170 Unique slugs
171 Delete blog
172 Blog index page
173 Display blogs
174 Link to blog detail Dates
175 Blog detail page

UX Improvements
176 Section Intro
177 Flip the card
178 About page
179 Dropdown resizing
180 Home screen improvements
181 Active Links
182 CV Page
183 Try to get an access token
184 Get an access token
185 Get a user
186 Fix blog by slug
187 Get blogs with user
188 Display user

189 Section Intro
190 Head title
191 Index page type
192 Meta description
193 Open graph
194 Canonical
195 Fonts images favicon
196 More about fonts
197 Portfolio detail
198 Portfolio detail data
199 Change images

200 Section Intro
201 Deploying start
202 API to heroku
203 Deployment to Heroku
204 Respond with html page
205 Testing with PROD api
206 Small fixes
207 Deployment to Vercel
208 Testing Next.js app
209 Course Ending

PROJECT 3 – Starter(Legacy)
210 Legacy Info
211 Project Init
212 More pages Header
213 Base Layout
214 Styles
215 Post Data
216 Portfolio Detail
217 Get portfolio by ID
218 Custom server
219 Next routes
220 Reactstrap
221 Fonts
222 Cleanup Debugging
223 Proper layout
224 Typed.js Library
225 Header Integration part 1
226 Header Integration part 2
227 Base Page Component and Default Props

Authentication with Auth0
228 Auth Start Login and Logout Buttons
229 Auth0 App Creation and Service
230 Handle Authentication and Callback Page
231 Callback Page and Redirect User
232 Google Setup Auth0
233 Save Tokens in Cookies
234 DisplayHide Login Buttons
235 Get Cookies from Server Client
236 Inform Header About Authentication
237 Verify Token Expiration Time Improvement
238 Auth Debugging Display User
239 JWKS verify token signature
240 JWKS Debugging and Explanation
241 Decoded Token Fix
242 Secret Protected Page
243 (HOC) High Order Components – Start
244 withAuth HOC – getInitialProps
245 Secret Endpoint Server
246 CheckJWT Intro to Middlewares
247 CheckJWT Real Middleware part 1
248 CheckJWT Real Middleware part 2
249 Axios Auth Headers
250 Authorise Request in Get Initial Props
251 Roles in Auth0
252 HOC to check a Role
253 Server Side Role Authorization

Portfolio Feature
254 Different Headers
255 Portfolio Card Styling
256 React Simple Form
257 More Input Types
258 Formik Intro
259 Formik Specific Inputs
260 Formik Bootstrap
261 Formik Separate Component
262 Validate Form with Formik
263 Date Picker Component
264 Style Date Picker
265 On Change Event Explanation
266 Date Validation
267 Disable End Date
268 Portfolio Styling Changes Small Refactor
269 Database Changes
270 MongoDB Intro
271 Config Folder Dev.js
272 Book Model Post Route
273 Books More Endpoints
274 Books Routes Controllers
275 Portfolio Model
276 Portfolios Controllers Routes
277 Portfolio Update Delete Endpoint
278 Get Portfolios on Client Side
279 Create Portfolio from Client App
280 Handle Error in Create Form
281 Fix Validation Redirect
282 Portfolio Update Page Get Portfolio By Id
283 Initial Values in Portfolio Form
284 Update Portfolio on Client
285 Testing Update Functionality
286 UI Buttons Navigation
287 Hide Buttons for not Logged in Users
288 Delete Portfolio Client
289 Portfolio Modal Intro
290 Fill Modal with Portfolio Data
291 Stop Propagation on Click
292 Sort Date Hide Initial Date Fix

Blog Feature – Slate Editor
293 Blog Listing
294 Blog Listing Login Button Fix
295 Slate Editor Intro
296 Event Handler in Slate
297 Custom Blocks Slate
298 Custom Marks Slate
299 Hover Menu Start
300 Hover Menu Debugging
301 Hover Menu Block Buttons
302 Block Formatting Debugging
303 Styling Improvement of Editor

Advance Blog Feature
304 Blog Model
305 Date Fix in Model
306 POST Blog Endopoint
307 Get Blog By Id Endpoint
308 Controll Menu
309 Save Blog part 1
310 Save Blog part 2
311 Save Blog part 3
312 Serialise Deserialise Introduction
313 Serialise Rules Fix
314 Serialise to HTML
315 Save Blog Action
316 Disable Save Button while Saving
317 Blog Editor Update Page
318 Initial Value for Blog Editor Page
319 Redirect After Save
320 Save Blog – Lock the request
321 Update Blog Server
322 Update Blog Client
323 Save Blog Shortcut
324 Blog Toaster Messages
325 User Blogs Dashboard Page
326 Get User Specific Blogs
327 Display User Blogs
328 Dropdown Menu for the Blog Init
329 Dynamic Options for Dropdown Menu
330 Dropdown Handlers
331 Learn about Slug
332 Publish Draft Blogs
333 Delete and Get Published Blogs on the Server
334 Delete Blog from the App
335 Get Display Published Blogs
336 Detail Blog Page – Get Page by Slug
337 Detail Blog Page Complete
338 Recap of Section part 1
339 Recap of Section part 2

Page UX Improvement
340 About Page
341 Flipping Card part 1
342 Flipping Card part 2
343 Flipping Card part 3
344 Active Link part 1
345 Active Link part 2
346 Dropdown Blogs for Site Owner
347 Dropdown Blogs Styling Fixes
348 Set Interval Animation Fix
349 Dropdown Menu on Smaller Screens Fix
350 Height of the Image on Smaller Screens
351 CV Page

SEO Improvements
352 Title Explanation
353 Dont forget about Description
354 Open Graph
355 Robots
356 Cannonical H1 alt
357 Favicon

Get Ready for Deploy
358 Small pre-deploy Changes
359 Setup Environment Variables
360 Setup Namespace
361 Mongo DB Auth0 Production Setup
362 First Deployment
363 Performance Improvements – Images JS
364 Optimise CSS
365 Load fonts on Client
366 Deploy Test after Fonts
367 Google Fonts Deploy
368 Final Deploy and Test
369 Header Title Fix
370 Final Words

[Optional] Setup For Busy Developers
371 Setup Completed Project