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

59h 43m
English
Paid

Master Next.js (Next 9), React (React 16+), and Node.js. Learn how to build an isomorphic website, covering SEO, blog integration, and deployment strategies.

Looking to kickstart your career as a developer or aiming to enhance your programming skills? This comprehensive course is tailored for you. Discover how to create an impressive portfolio website to showcase your skills to colleagues and prospective employers.

Course Overview

Get everything you need for web development in one course! Begin with fundamental web development technologies and progress to advanced topics. Your final project will be deployed on Heroku and accessible online.

This course is your go-to resource for starting web development with Next.js, React, and Node.js. By the end, you'll gain the confidence and skills needed to initiate your own projects and have the right mindset to pursue a developer career, mastering modern frameworks like Next.js, React.js, and Node.js.

Course Content

Introduction to Next.js

We'll start with a brief introduction to the Next.js framework. Following the official introductory guide, we will provide additional explanations and examples to help you understand the benefits of server-side rendered applications and become familiar with the Next framework.

Building the Portfolio Application

Our journey begins with designing the base layout of our portfolio application. We will create initial pages and apply base styling.

Authentication Implementation

Midway through the course, we'll examine authentication with Auth0 on both client and server sides, enabling users to authenticate via Google or other social providers.

Portfolio Functionality

We'll work on both the server and client sides to implement core portfolio functionalities, such as a CRUD API. You'll learn to use forms in React and become familiar with the popular Formik package.

Blog Feature with Slate Framework

Next, tackle functionalities using the Slate framework. We will initiate the Blog feature, creating a Medium-like blog editor. You'll see how to save and update blogs, and develop a dashboard page for users to manage their blogs. Published blogs can be viewed by everyone on our site.

Enhancing User Experience

UX improvements will follow. Learn to create simple animations and enhance user experience, becoming more adept with CSS along the way.

SEO Basics

We will cover the fundamentals of SEO (Search Engine Optimization). Add semantic information to your website and make improvements to ensure your portfolio site stands out on the web.

Final Deployment

The course concludes with preparing your application for deployment. We'll improve production performance and deploy your project to Heroku, making it accessible online.

Backend Integration

During the course, we'll oscillate between our frontend application and the backend Node.js application, which will handle and store business data using MongoDB.

Target Audience

  • Beginners and experienced developers interested in modern frameworks such as Next, React, and Node.
  • Individuals eager to comprehend the workings of JavaScript frameworks.
  • Participants who wish to explain complex concepts to colleagues in a straightforward manner.

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 368 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 368 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Project Overview
All Course Lessons (368)
#Lesson TitleDurationAccess
1
Project Overview Demo
03:34
2
How to get most of this course + resolve issues
08:00
3
Application Initialization
10:54
4
Create index page
10:00
5
Functional Components
11:02
6
Class Components
05:22
7
Reusable Components
19:05
8
Some basics styles
04:59
9
What is the State
11:22
10
Let's mutate State
07:42
11
Common mistakes with State
05:30
12
State of functional component
10:07
13
What are props
14:12
14
How web app works
23:15
15
Iterate over list of data
19:02
16
Shorten Function
06:27
17
Move movie data to Store
07:12
18
Get movie data + Promises
16:05
19
Use Effect
12:43
20
Get movies in class component
07:00
21
Catch error in Promise
06:31
22
Get initial props
11:50
23
More pages, more links
05:50
24
App container
11:49
25
App container props
08:58
26
Detail page of movie
08:44
27
Get movie by id
11:21
28
Fix links in detail page
02:42
29
Finishes detail page
06:23
30
Get images from movies
06:16
31
Display cover images
14:59
32
Get categories
08:11
33
Modal implementation + Close Modal
09:55
34
Form to create movie & Containment
06:43
35
Get values from the form
15:00
36
Handle genre changes
12:07
37
Handle form submit
14:20
38
Close Modal & Uncontrolled data functionality
15:17
39
Provide ID of movie
07:45
40
Base server implementation
12:25
41
More about Server
18:29
42
Getting movies from server
11:15
43
Get movie by ID
06:36
44
Saving movies
14:56
45
Delete movie
09:22
46
Edit page for movie
08:08
47
Provide data to Edit page
14:17
48
Final touches on Update movies functionality
10:30
49
Navigation fixes
04:17
50
Starting with filtering
09:28
51
Filtering finished
10:33
52
Styling improvements
17:06
53
API Endpoints
15:24
54
Post endpoint
13:51
55
Section Intro
02:12
56
Project Init
06:00
57
More pages + Header
09:01
58
Base Layout
06:33
59
Styles
13:22
60
Post Data
08:05
61
Portfolio Detail
10:04
62
Get portfolio by ID
04:58
63
Custom server
15:06
64
Next routes
08:01
65
Reactstrap
05:39
66
Fonts
06:32
67
Debugger Updated!
05:18
68
Cleanup + Debugging
17:08
69
Proper layout
07:47
70
Typed JS
07:23
71
Header - part 1 rework
12:23
72
Header - part 2
10:43
73
Base Page
10:36
74
Change to functionals components
05:51
75
Remove _app
06:58
76
Absolute path
06:09
77
Login button
04:14
78
Api functions - part 1
17:34
79
Api functions - part 2
10:13
80
Api functions - part 3
14:09
81
Loading state
03:37
82
Fetch post by ID
16:03
83
useSWR
17:13
84
useSWR by ID
08:00
85
Section Intro
02:08
86
Auth0 Registration
08:40
87
Login API Route
07:50
88
Env Variables
12:34
89
Login Screen
09:48
90
Get login working
08:59
91
Get User
08:57
92
Pass user to layout
09:35
93
Logout
03:02
94
Secret page
09:50
95
Redirect
04:24
96
HOC Start
10:59
97
withAuth HOC
10:09
98
Server side props
11:18
99
Rework server side
04:24
100
withAuth Server side
21:31
101
About Roles
11:09
102
Admin Rights
16:50
103
Admin SSR
07:54
104
ENV Variables
04:30
105
Section Intro
03:26
106
API Server
13:24
107
Git Ignore
00:53
108
Routes and Controllers
11:10
109
Mongo DB
17:44
110
Structural changes in DB
05:40
111
Create portfolio data
16:13
112
Populate DB
17:16
113
Get portfolio by ID
07:19
114
Get Portfolios
11:03
115
Portfolio Card
10:06
116
Base Page Stylings
11:03
117
Get portfolio server side
10:20
118
Get static paths
12:45
119
SSR vs Static
11:54
120
Portfolio "new" page
08:50
121
Submit form
08:23
122
Datepicker
06:05
123
Handle Dates
13:29
124
Disable end date
09:26
125
Api route to create portfolio
11:41
126
Create portfolio endpoint
09:30
127
Testing create portfolio
13:37
128
JWT Middleware
16:40
129
Get access token
09:19
130
Create portfolio from App
07:04
131
Hook function to create portfolio
12:11
132
Hook creator - Api handler
06:28
133
Handle Errors
10:20
134
Portfolio edit page
11:52
135
Pre-fill form with data
07:06
136
Update portfolio on Server
08:28
137
Update on client
14:32
138
Toast messages
06:52
139
Handle errors
08:14
140
Edit and Delete buttons
11:14
141
Delete on server
04:19
142
Delete on client
07:58
143
Delete from state
06:47
144
Check role on server
10:44
145
Dropdown menu
10:48
146
Dropdown menu done
12:54
147
Next 9.4 Updates - part 1
10:38
148
Next 9.4 Updates - part 2
06:42
149
Section Intro
03:08
150
Blog Editor
08:56
151
Blog Server implementation
11:15
152
Blog endpoints
10:34
153
Create blog on server
07:00
154
Create blog from client
10:45
155
Redirect to blog update
07:48
156
Get initial content to blog update
09:53
157
Update blog on server
09:53
158
Update blog from client
11:45
159
Base API
09:39
160
Dashboard page
14:24
161
Fetch blogs by user
08:18
162
Filter blogs
08:00
163
Dropdown in dashboard
12:11
164
Generate options
05:30
165
Slugify title
05:30
166
Update blog
08:23
167
Mutate function
11:37
168
Unique slugs
13:24
169
Delete blog
06:12
170
Blog index page
07:35
171
Display blogs
10:13
172
Link to blog detail + Dates
08:57
173
Blog detail page
13:29
174
Section Intro
02:34
175
Flip the card
18:04
176
About page
16:24
177
Dropdown resizing
12:49
178
Home screen improvements
08:04
179
Active Links
12:12
180
CV Page
03:29
181
Try to get an access token
17:40
182
Get an access token
10:08
183
Get a user
13:04
184
Fix blog by slug
03:42
185
Get blogs with user
06:57
186
Display user
15:08
187
Section Intro
02:16
188
Head title
06:15
189
Index page type
06:15
190
Meta description
11:52
191
Open graph
11:52
192
Canonical
08:36
193
Fonts, images, favicon
11:43
194
More about fonts
03:46
195
Portfolio detail
12:02
196
Portfolio detail data
09:35
197
Change images
12:43
198
Section Intro
03:09
199
Deploying start
16:40
200
API to heroku
15:19
201
Deployment to Heroku
14:20
202
Respond with html page
07:40
203
Testing with PROD api
16:22
204
Small fixes
07:28
205
Deployment to Vercel
16:47
206
Testing Next.js app
09:23
207
Course Ending
11:59
208
Project Init
06:00
209
More pages + Header
09:01
210
Base Layout
06:33
211
Styles
13:22
212
Post Data
08:05
213
Portfolio Detail
10:04
214
Get portfolio by ID
04:58
215
Custom server
15:06
216
Next routes
08:01
217
Reactstrap
05:39
218
Fonts
06:32
219
Cleanup + Debugging
17:08
220
Proper layout
07:47
221
Typed.js Library
08:41
222
Header Integration part 1
09:57
223
Header Integration part 2
07:18
224
Base Page Component and Default Props
13:44
225
Auth Start, Login and Logout Buttons
04:34
226
Auth0 App Creation and Service
09:03
227
Handle Authentication and Callback Page
06:45
228
Callback Page and Redirect User
09:02
229
Google Setup Auth0
08:44
230
Save Tokens in Cookies
12:44
231
Display/Hide Login Buttons
06:03
232
Get Cookies from Server / Client
15:03
233
Inform Header About Authentication
08:04
234
Verify Token Expiration Time Improvement
12:58
235
Auth Debugging & Display User
11:25
236
JWKS verify token signature
12:32
237
JWKS Debugging and Explanation
15:11
238
Decoded Token Fix!
02:12
239
Secret Protected Page
06:03
240
(HOC) High Order Components - Start
08:16
241
withAuth HOC - getInitialProps
17:43
242
Secret Endpoint Server
15:02
243
CheckJWT Intro to Middlewares
07:11
244
CheckJWT Real Middleware part 1
13:22
245
CheckJWT Real Middleware part 2
11:38
246
Axios Auth Headers
11:38
247
Authorise Request in Get Initial Props
19:52
248
Roles in Auth0
07:11
249
HOC to check a Role
16:38
250
Server Side Role Authorization
11:42
251
Different Headers
15:27
252
Portfolio Card Styling
04:56
253
React Simple Form
11:10
254
More Input Types
09:42
255
Formik Intro
15:01
256
Formik Specific Inputs
09:29
257
Formik + Bootstrap
06:04
258
Formik Separate Component
08:18
259
Validate Form with Formik
14:23
260
Date Picker Component
08:28
261
Style Date Picker
10:01
262
On Change Event Explanation
10:21
263
Date Validation
05:19
264
Disable End Date
13:08
265
Portfolio Styling Changes + Small Refactor
08:04
266
Database Changes
04:04
267
MongoDB Intro
07:59
268
Config Folder Dev.js
08:14
269
Book Model + Post Route
15:22
270
Books More Endpoints
13:26
271
Books Routes & Controllers
13:32
272
Portfolio Model
07:13
273
Portfolios Controllers & Routes
07:39
274
Portfolio Update & Delete Endpoint
07:39
275
Get Portfolios on Client Side
09:52
276
Create Portfolio from Client App
11:59
277
Handle Error in Create Form
12:56
278
Fix Validation + Redirect
10:42
279
Portfolio Update Page, Get Portfolio By Id
11:31
280
Initial Values in Portfolio Form
06:21
281
Update Portfolio on Client
12:48
282
Testing Update Functionality
06:34
283
UI Buttons Navigation
09:10
284
Hide Buttons for not Logged in Users
09:23
285
Delete Portfolio Client
09:37
286
Portfolio Modal Intro
09:34
287
Fill Modal with Portfolio Data
11:49
288
Stop Propagation on Click
05:22
289
Sort Date & Hide Initial Date Fix
11:19
290
Blog Listing
08:31
291
Blog Listing Login Button Fix
00:53
292
Slate Editor Intro
14:48
293
Event Handler in Slate
05:56
294
Custom Blocks Slate
12:20
295
Custom Marks Slate
09:44
296
Hover Menu Start
20:10
297
Hover Menu Debugging
20:10
298
Hover Menu Block Buttons
14:52
299
Block Formatting Debugging
11:55
300
Styling Improvement of Editor
07:31
301
Blog Model
04:51
302
Date Fix in Model
00:23
303
POST Blog Endopoint
12:57
304
Get Blog By Id Endpoint
03:21
305
Controll Menu
09:14
306
Save Blog part 1
09:55
307
Save Blog part 2
04:45
308
Save Blog part 3
08:24
309
Serialise & Deserialise Introduction
00:47
310
Serialise Rules Fix
00:47
311
Serialise to HTML
10:35
312
Save Blog Action
08:16
313
Disable Save Button while Saving
04:08
314
Blog Editor Update Page
08:18
315
Initial Value for Blog Editor Page
07:36
316
Redirect After Save
06:36
317
Save Blog - Lock the request
15:18
318
Update Blog Server
07:52
319
Update Blog Client
11:00
320
Save Blog Shortcut
07:04
321
Blog Toaster Messages
09:18
322
User Blogs Dashboard Page
11:00
323
Get User Specific Blogs
09:23
324
Display User Blogs
07:16
325
Dropdown Menu for the Blog Init
07:16
326
Dynamic Options for Dropdown Menu
09:35
327
Dropdown Handlers
05:00
328
Learn about Slug
08:23
329
Publish Draft Blogs
07:49
330
Delete and Get Published Blogs on the Server
07:03
331
Delete Blog from the App
07:30
332
Get & Display Published Blogs
10:58
333
Detail Blog Page - Get Page by Slug
05:35
334
Detail Blog Page Complete
15:15
335
Recap of Section part 1
12:54
336
Recap of Section part 2
09:21
337
About Page
12:40
338
Flipping Card part 1
08:35
339
Flipping Card part 2
06:05
340
Flipping Card part 3
04:26
341
Active Link part 1
10:01
342
Active Link part 2
07:54
343
Dropdown Blogs for Site Owner
13:35
344
Dropdown Blogs Styling Fixes
10:50
345
Set Interval Animation Fix
03:10
346
Dropdown Menu on Smaller Screens Fix
05:17
347
Height of the Image on Smaller Screens
02:25
348
CV Page
07:02
349
Title Explanation
08:12
350
Don't forget about Description
02:47
351
Open Graph
04:52
352
Robots
08:25
353
Cannonical & H1 & alt
10:08
354
Favicon
04:43
355
Small pre-deploy Changes
08:10
356
Setup Environment Variables
07:51
357
Setup Namespace
11:38
358
Mongo DB & Auth0 Production Setup
07:35
359
First Deployment
13:25
360
Performance Improvements - Images & JS
12:43
361
Optimise CSS
05:00
362
Load fonts on Client
17:32
363
Deploy & Test after Fonts
05:36
364
Google Fonts & Deploy
10:26
365
Final Deploy and Test
13:45
366
Header Title Fix
01:39
367
Final Words
01:06
368
Setup Completed Project
31:09
Unlock unlimited learning

Get instant access to all 367 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription