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

59h 43m
English
Paid
August 4, 2024

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

More

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 Complete Next.js with React & Node - Beautiful Portfolio App

Join premium to watch
Go to premium
# Title Duration
1 Project Overview 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

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

Next40. Master Next.js 14 in 40 days of epic projects

Next40. Master Next.js 14 in 40 days of epic projects

Duration 4 hours 52 minutes 49 seconds
MERN React Node Next.js Multi User SEO Blogging Platform

MERN React Node Next.js Multi User SEO Blogging Platform

Duration 20 hours 25 minutes 13 seconds
Ultimate Next.js 13 Course + eBook

Ultimate Next.js 13 Course + eBook

Duration 51 hours 35 minutes 4 seconds
Building a Full-stack Multilingual Blog with Next.js 13.4

Building a Full-stack Multilingual Blog with Next.js 13.4

Duration 9 hours 15 minutes 4 seconds
Next JS & Open AI / GPT: Next-generation Next JS & AI apps
NextJS E-Com Masterclass: Learn The All New Next JS

NextJS E-Com Masterclass: Learn The All New Next JS

Duration 19 hours 17 minutes 40 seconds
Build A Canva Clone

Build A Canva Clone

Duration 17 hours 48 minutes 39 seconds
Build A Finance Platform

Build A Finance Platform

Duration 13 hours 43 minutes 45 seconds
Nest.js Microservices: Build & Deploy a Scaleable Backend

Nest.js Microservices: Build & Deploy a Scaleable Backend

Duration 5 hours 39 minutes 49 seconds