English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 448 lectures (70h 0m) | 26.96 GB
Build Serverless Web Apps with Next.js. Learn Hooks. Deploy to Vercel. Next.js (Next JS 10+), React (React 16+) & Node.
Is this course right for you?
If you plan to start your career as a developer or improve your programming skills, this course is right for you. Learn how to build a fantastic portfolio website you can share with your colleagues or future employers.
Get all you need to start web development in one course! Start with Web Development technologies to more advanced topics until your application is deployed to Heroku or Vercel and accessible online on the internet.
This resource is the only thing you need to start Web Development with Next.js, React, and Node. You will get the confidence and skills required to create your own projects during this course. You will get the right mindset to apply for a developer career and improve 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) applications.
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.
Course Structure is the following:
- [Project 1]: Resource Application (Beginners)
- [Project 2]: Portfolio Application (Beginners/Intermediate)
- [Project 3]: Movie Application (Legacy code, Beginners)
- [Project 4]: Portfolio Application (Legacy code, Beginners/Intermediate)
What are we going to work on?
Resource Project
This project covers basic concepts. You will learn how React and Next JS works.
You will understand the state and props.
This project’s main point is to understand basic concepts that will prepare you for the second application.
Portfolio Project
First, we are going to integrate the base layout of the application. We will break the layout into small pieces, and we will create lots of reusable components such as a navbar, portfolio card, and many others. I will explain how server-side rendering works, how to use different data fetching techniques, and the differences and benefits of fetching on the server versus the client.
The first big feature we will be working on will be authentication. The Auth0 provider will handle authentication. Nevertheless, there will be a lot’s work to handle.
Users will register and login and experience feature only for authenticated users. You will learn how to restrict access to pages and manage authentication state through your application, resulting in UI changes of the application layout.
Next, we will work on portfolio features. We will implement functionality to create a portfolio, and I will explain how to manage forms easily. Then we will look at update functionality, where I will show you how to populate inputs with existing data. At 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.
The blog feature will be the biggest one. Users will create blogs using a slate editor that offers different formatting options. Each blog will be saved initially as a draft blog, and it will be a user’s responsibility to publish it. For this purpose, we will create a dashboard page displaying all user blogs to publish or make a draft from the blog. All Published blogs will be highlighted on the 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 optimization) improvements. I will explain the basics of SEO and how to get it working with Next.js.
The last section will cover deployment. Express API server will be deployed to Heroku. Next.js portfolio application will be deployed to the serverless Vercel platform, making our application super fast on the internet.
What you’ll learn
- Develop serverless & classical web applications with the latest Next JS & React
- Understand web concepts clearly by creating real-world applications
- 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
Introduction
1 Project Overview
2 How to resolve issues + Project structure
[Project 1] Init the Project
3 Project Introduction
4 Project initialisation
5 Folder Structure
6 app Component
7 Components
8 Class components
9 JSX
10 Arrow Functions
[Project 1] State & Props
11 State
12 Increment state
13 Change state
14 Class state
15 Props
16 Use effect
17 Class props
18 How web apps work
19 More about props
[Project 1] Layout
20 Bulma css
21 Separation into components
22 Absolute path
23 Layout
24 Resource data
25 Highlight list
26 Resource list
[Project 1] Data fetching
27 Api functions
28 Get static props
29 Get static vs get server side props
30 [Server] Api app
31 [Server] Api endpoints
32 [Server] Get resources from API
33 Get data from 3001
34 Cors and Proxy
[Project 1] Forms & Create Resource
35 Important! Next 13 Updates
36 Resource new page
37 Resource form
38 More inputs
39 Form values
40 Form Submit
41 Handle title change
42 Handle all inputs change
[Project 1] Post Request
43 Send a post request
44 Attach data in the request
45 Axios
46 Validate data
47 Catching error
48 [Server] post endpoint
49 [Server] finishing post endpoint
50 Handling post request in API
51 Redirect after create
[Project 1] Resource Details
52 [Server] get resource by ID endpoint
53 Resource detail page
54 Resource page fetch data
55 Link to detail page
56 Get Initial Props
57 Get static paths
58 Fallback true
59 Revalidate
[Project 1] Resource Edit
60 Resource edit page
61 Resource Form Component
62 Resource Edit Form
63 Resource Patch API endpoint
64 [Server] Patch Endpoint
[Project 1] Active Resource
65 Active resource component
66 Active resource patch request
67 [Server] Activate resource
68 [Server] Active resource endpoint
69 Fetch active resource in next
70 Time to finish in seconds
71 Seconds state
[Project 1] UX Improvements
72 UX improvements
73 Complete resource
74 [Server] Forbid update of not complete resource
75 Resource Status
76 Resource status color
77 Display buttons on inactive ones
78 Env variables
[Project 1] Deployment
79 Git & Heroku
80 Pushing Code to Github
81 Deploying to Heroku
82 Production env file
83 Deployment To Vercel
[Project 2] Starter(Serverless)
84 Section Intro
85 Init Next Portfolio
86 Pages and Header
87 Base layout
88 Fetch posts
89 Portfolio detail page
90 Get post by id
91 Debug
92 Reactstrap
93 Fonts
94 Scss styling
95 Layout Improvement
96 Header
97 Self Typed
98 Base Page
99 Note Before Watching
100 Absolute path
101 Login button
102 Api functions – part 1
103 Api functions – part 2
104 Api functions – part 3
105 Loading state
106 Fetch post by ID
107 useSWR
108 useSWR by ID
[Project 2] Authentication
109 Section Intro
110 Auth0 Registration
111 New Auth0 Updates!
112 Login API Route
113 Webpack Dotenv package
114 Env Variables
115 Login Screen
116 Get login working
117 Get User
118 Pass user to layout
119 Logout
120 Secret page
121 Redirect
122 HOC Start
123 withAuth HOC
124 Server side props
125 Rework server side
126 withAuth Server side
127 About Roles
128 Admin Rights
129 Admin SSR
130 ENV Variables
[Project 2] Portfolio Feature
131 Section Intro
132 API Server
133 Git Ignore
134 Routes and Controllers
135 Mongo DB
136 Structural changes in DB
137 Create portfolio data
138 Populate DB
139 Get portfolio by ID
140 Get Portfolios
141 Portfolio Card
142 Base Page Stylings
143 Get portfolio server side
144 Get static paths
145 SSR vs Static
146 Portfolio new page
147 Submit form
148 Datepicker
149 Handle Dates
150 Disable end date
151 Api route to create portfolio
152 Create portfolio endpoint
153 Testing create portfolio
154 JWT Middleware
155 Get access token
156 Create portfolio from App
157 Hook function to create portfolio
158 Hook creator – Api handler
159 Handle Errors
160 Portfolio edit page
161 Pre-fill form with data
162 Update portfolio on Server
163 Update on client
164 Toast messages
165 Handle errors
166 Edit and Delete buttons
167 Delete on server
168 Delete on client
169 Delete from state
170 Check role on server
171 Dropdown menu
172 Dropdown menu done
173 Next 9.4 Updates – part 1
174 Note Revalidate
175 Next 9.4 Updates – part 2
[Project 2] Blog Feature
176 Section Intro
177 Blog Editor
178 Blog Server implementation
179 Blog endpoints
180 Create blog on server
181 Create blog from client
182 Redirect to blog update
183 Get initial content to blog update
184 Update blog on server
185 Update blog from client
186 Base API
187 Dashboard page
188 Fetch blogs by user
189 Filter blogs
190 Dropdown in dashboard
191 Generate options
192 Slugify title
193 Update blog
194 Mutate function
195 Unique slugs
196 Delete blog
197 Blog index page
198 Display blogs
199 Link to blog detail + Dates
200 Blog detail page
[Project 2] UX Improvements
201 Section Intro
202 Flip the card
203 About page
204 Dropdown resizing
205 Home screen improvements
206 Active Links
207 CV Page
208 Try to get an access token
209 Get an access token
210 Get a user
211 Fix blog by slug
212 Get blogs with user
213 Display user
[Project 2] SEO
214 Section Intro
215 Head title
216 Index page type
217 Meta description
218 Open graph
219 Canonical
220 Fonts, images, favicon
221 More about fonts
222 Portfolio detail
223 Portfolio detail data
224 Change images
[Project 2] Deployment
225 Section Intro
226 Deploying start
227 API to heroku
228 Deployment to Heroku
229 Respond with html page
230 Testing with PROD api
231 Small fixes
232 Deployment to Vercel
233 Testing Next.js app
234 Course Ending
[Project 3] Movie App, Basics
235 Application Initialization
236 Create index page
237 Functional Components
238 Class Components
239 Reusable Components
240 Some basics styles
241 What is the State
242 Let’s mutate State
243 Common mistakes with State
244 State of functional component
245 What are props
246 How web app works
247 Iterate over list of data
248 Shorten Function
249 Move movie data to Store
250 Get movie data + Promises
251 Use Effect
252 Get movies in class component
253 Catch error in Promise
254 Get initial props
255 More pages, more links
256 App container
257 App container props
258 Detail page of movie
259 Get movie by id
260 Fix links in detail page
261 Finishes detail page
262 Get images from movies
263 Display cover images
264 Get categories
265 Modal implementation + Close Modal
266 Form to create movie & Containment
267 Get values from the form
268 Handle genre changes
269 Handle form submit
270 Close Modal & Uncontrolled data functionality
271 Provide ID of movie
272 Base server implementation
273 More about Server
274 Getting movies from server
275 Get movie by ID
276 Saving movies
277 Delete movie
278 Edit page for movie
279 Provide data to Edit page
280 Final touches on Update movies functionality
281 Navigation fixes
282 Starting with filtering
283 Filtering finished
284 Styling improvements
285 API Endpoints
286 Post endpoint
[Project 4] Starter(Legacy)
287 Legacy Info
288 Project Init
289 More pages + Header
290 Base Layout
291 Styles
292 Post Data
293 Portfolio Detail
294 Get portfolio by ID
295 Custom server
296 Next routes
297 Reactstrap
298 Fonts
299 Cleanup + Debugging
300 Proper layout
301 Typed.js Library
302 Header Integration part 1
303 Header Integration part 2
304 Base Page Component and Default Props
[Project 4] Authentication with Auth0
305 Auth Start, Login and Logout Buttons
306 Auth0 App Creation and Service
307 Handle Authentication and Callback Page
308 Callback Page and Redirect User
309 Google Setup Auth0
310 Save Tokens in Cookies
311 DisplayHide Login Buttons
312 Get Cookies from Server Client
313 Inform Header About Authentication
314 Verify Token Expiration Time Improvement
315 Auth Debugging & Display User
316 JWKS verify token signature
317 JWKS Debugging and Explanation
318 Decoded Token Fix!
319 Secret Protected Page
320 (HOC) High Order Components – Start
321 withAuth HOC – getInitialProps
322 Secret Endpoint Server
323 CheckJWT Intro to Middlewares
324 CheckJWT Real Middleware part 1
325 CheckJWT Real Middleware part 2
326 Axios Auth Headers
327 Authorise Request in Get Initial Props
328 Roles in Auth0
329 HOC to check a Role
330 Server Side Role Authorization
[Project 4] Portfolio Feature
331 Different Headers
332 Portfolio Card Styling
333 React Simple Form
334 More Input Types
335 Formik Intro
336 Formik Specific Inputs
337 Formik + Bootstrap
338 Formik Separate Component
339 Validate Form with Formik
340 Date Picker Component
341 Style Date Picker
342 On Change Event Explanation
343 Date Validation
344 Disable End Date
345 Portfolio Styling Changes + Small Refactor
346 Database Changes
347 MongoDB Intro
348 Config Folder Dev.js
349 Book Model + Post Route
350 Books More Endpoints
351 Books Routes & Controllers
352 Portfolio Model
353 Portfolios Controllers & Routes
354 Portfolio Update & Delete Endpoint
355 Get Portfolios on Client Side
356 Create Portfolio from Client App
357 Handle Error in Create Form
358 Fix Validation + Redirect
359 Portfolio Update Page, Get Portfolio By Id
360 Initial Values in Portfolio Form
361 Update Portfolio on Client
362 Testing Update Functionality
363 UI Buttons Navigation
364 Hide Buttons for not Logged in Users
365 Delete Portfolio Client
366 Portfolio Modal Intro
367 Fill Modal with Portfolio Data
368 Stop Propagation on Click
369 Sort Date & Hide Initial Date Fix
[Project 4] Blog Feature – Slate Editor
370 Blog Listing
371 Blog Listing Login Button Fix
372 Slate Editor Intro
373 Event Handler in Slate
374 Custom Blocks Slate
375 Custom Marks Slate
376 Hover Menu Start
377 Hover Menu Debugging
378 Hover Menu Block Buttons
379 Block Formatting Debugging
380 Styling Improvement of Editor
[Project 4] Advance Blog Feature
381 Blog Model
382 Date Fix in Model
383 POST Blog Endopoint
384 Get Blog By Id Endpoint
385 Controll Menu
386 Save Blog part 1
387 Save Blog part 2
388 Save Blog part 3
389 Serialise & Deserialise Introduction
390 Serialise Rules Fix
391 Serialise to HTML
392 Save Blog Action
393 Disable Save Button while Saving
394 Blog Editor Update Page
395 Initial Value for Blog Editor Page
396 Redirect After Save
397 Save Blog – Lock the request
398 Update Blog Server
399 Update Blog Client
400 Save Blog Shortcut
401 Blog Toaster Messages
402 User Blogs Dashboard Page
403 Get User Specific Blogs
404 Display User Blogs
405 Dropdown Menu for the Blog Init
406 Dynamic Options for Dropdown Menu
407 Dropdown Handlers
408 Learn about Slug
409 Publish Draft Blogs
410 Delete and Get Published Blogs on the Server
411 Delete Blog from the App
412 Get & Display Published Blogs
413 Detail Blog Page – Get Page by Slug
414 Detail Blog Page Complete
415 Recap of Section part 1
416 Recap of Section part 2
[Project 4] Page UX Improvement
417 About Page
418 Flipping Card part 1
419 Flipping Card part 2
420 Flipping Card part 3
421 Active Link part 1
422 Active Link part 2
423 Dropdown Blogs for Site Owner
424 Dropdown Blogs Styling Fixes
425 Set Interval Animation Fix
426 Dropdown Menu on Smaller Screens Fix
427 Height of the Image on Smaller Screens
428 CV Page
[Project 4] SEO Improvements
429 Title Explanation
430 Don’t forget about Description
431 Open Graph
432 Robots
433 Cannonical & H1 & alt
434 Favicon
[Project 4] Get Ready for Deploy
435 Small pre-deploy Changes
436 Setup Environment Variables
437 Setup Namespace
438 Mongo DB & Auth0 Production Setup
439 First Deployment
440 Performance Improvements – Images & JS
441 Optimise CSS
442 Load fonts on Client
443 Deploy & Test after Fonts
444 Google Fonts & Deploy
445 Final Deploy and Test
446 Header Title Fix
447 Final Words
[Optional] Setup For Busy Developers
448 Setup Completed Project
Resolve the captcha to access the links!