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

59h 43m
English
Paid

Course description

Master Next.js (Next 9), React (React 16+) & Node. Learn how to build Isomorphic Website, incl. SEO, Blog, Deployment

Read more about the course

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 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.

We will start with short introduction of Next.js  framework. We will follow starter introduction guide on Next.js website with my additional explanation and examples. I will explain to you benefits of server side rendered applications and I will get you familiar with Next Framework.

Furthermore, we will work on a base layout of our portfolio application, we will create first pages and base styling.

Later in this course, we will take a look on authentication with Auth0 on the client/server side. Users will be able to authenticate with google or other social provider.

Next, we will work both on the  server and the client and will implement base portfolio functionality. We will create CRUD (create, read, update, delete) API. You will learn how to use forms in react and you will get familiar with popular Formik package. 

After portfolio section you will be challenged with Slate framework. We will start working on Blog feature. I will show you how to create blog editor similar to Medium. We will create functionality to save and update portfolios. Then we will create blogs dashboard page for users to manage their created blogs. Clients will be able to publish and delete blogs. All of the published blogs will be able to read by everyone on our website.

Next, we will work on UX improvements of our website. You will learn how to create simple animations and how to make better user experience. You will get more familiar with CSS.

Then we will get into SEO ( Search Engine Optimisation ). You will learn basics of SEO. We will provide to our website more semantic informations and we will make page improvements, so our portfolio website will be even more amazing and more competitive on the web.

In the last section we will start preparing our application for deployment. We will do production and performance improvements. Later in this section will deploy our applications to Heroku. Our portfolio will be fully accessible on the internet by anyone.

During this course we will be switching from our frontend application to our backend Node application. This Node application will be responsible for handling and storing our business data in MongoDB.

Who this course is for:
  • Starting as well as experienced developers interested in modern frameworks as Next, React and Node.
  • This course is for everyone eager to understand how a javascript frameworks work.
  • Taking this course will enable you explain before difficult concepts to your fellow colleagues in simple way.

Watch Online

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

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

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Build a Microservices app with .Net and NextJS from scratch

Build a Microservices app with .Net and NextJS from scratch

Sources: udemy
Microservices is the latest 'buzzword' and hot topic in the web development industry at the moment and nowadays having microservices as part of your skillset is becoming more an...
31 hours 42 minutes 57 seconds
supastarter - SaaS starter kit for Next.js & Nuxt

supastarter - SaaS starter kit for Next.js & Nuxt

Sources: supastarter
Supastarter is a powerful starter kit for building scalable and production-ready SaaS applications based on Next.js. Save hundreds of hours...
Server side rendering with Next + React

Server side rendering with Next + React

Sources: udemy
Do you want to learn the whole process of building a server side React App ?. This is the course for you. We will start from the very beginning, from "I don't even know how to u...
29 hours 43 minutes 19 seconds
The Joy of React

The Joy of React

Sources: Josh Comeau
The all-new interactive learning experience that teaches you how to build rich, dynamic web apps with React. So, let’s be real. Learning React is hard. Over the past few years...
25 hours 35 minutes 33 seconds
The Road to Next

The Road to Next

Sources: Robin Wieruch
As a full-stack developer, you have numerous opportunities. Whether it's launching a successful startup, building a career in a corporate company, or working...
30 hours 40 minutes 42 seconds