4.8 out of 5
4.8
5 reviews on Udemy

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

Master Next.js (Next 7), React (React 16+) & Node. Learn how to build Isomorphic Website, incl. SEO, Blog, Deployment
Instructor:
Filip Jerga
179 students enrolled
English [Auto-generated]
Develop powerful, server-side and real-world web applications with Next & React
Completely understand the processes and architecture of Next
Create SEO (Search Engine Optimisation) and Isomorphic Friendly Applications
Establish yourself in field of the exciting Next and React web development environment

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.

Introduction

1
[Promo]: Introduction Video
2
[Optional]: How to get Help

Next.js Basics

1
Basic Setup
2
Project From Github, Compatibility
3
What are components ?
4
JSX & New Page
5
Simple Navigation & More Pages
6
SPA vs MPA
7
Shared Components - Header
8
React Props
9
Base Layout
10
Types of Styling
11
Lifecycle Functions
12
Super Function
13
React State
14
Callbacks and Arrow Functions
15
How Does Our Application Works
16
SSR vs CSR
17
Get Initial Props part 1
18
Get Initial Props part 2
19
Fetch Posts from API
20
Dynamic Links + Queries
21
Dynamic Pages "as" Prop
22
Basic Sever Setup
23
Dynamic Route Fix
24
Extended Server Explanation
25
Small Note To Server Side Rendering
26
Get Portfolio By Id
27
Dynamic Routes with Next/Routes
28
Warning Fix for Portfolios
29
Push Projet to Github

Base Shape Of Portfolio

1
Bootstrap Integration
2
Custom Fonts
3
App Cleanup + Css
4
Index Page Styling
5
Typed.js Library
6
Header Integration part 1
7
Header Integration part 2
8
Base Page Component and Default Props

Authentication with Auth0

1
Auth Start, Login and Logout Buttons
2
Auth0 App Creation and Service
3
Handle Authentication and Callback Page
4
Callback Page and Redirect User
5
Google Setup Auth0
6
Save Tokens in Cookies
7
Display/Hide Login Buttons
8
Get Cookies from Server / Client
9
Inform Header About Authentication
10
Verify Token Expiration Time Improvement
11
Auth Debugging & Display User
12
JWKS verify token signature
13
JWKS Debugging and Explanation
14
Decoded Token Fix!
15
Secret Protected Page
16
(HOC) High Order Components - Start
17
withAuth HOC - getInitialProps
18
Secret Endpoint Server
19
CheckJWT Intro to Middlewares
20
CheckJWT Real Middleware part 1
21
CheckJWT Real Middleware part 2
22
Axios Auth Headers
23
Authorise Request in Get Initial Props
24
Roles in Auth0
25
HOC to check a Role
26
Server Side Role Authorization

Portfolio Feature

1
Different Headers
2
Portfolio Card Styling
3
React Simple Form
4
More Input Types
5
Formik Intro
6
Formik Specific Inputs
7
Formik + Bootstrap
8
Formik Separate Component
9
Validate Form with Formik
10
Date Picker Component
11
Style Date Picker
12
On Change Event Explanation
13
Date Validation
14
Disable End Date
15
Portfolio Styling Changes + Small Refactor
16
MongoDB Intro
17
Config Folder Dev.js
18
Book Model + Post Route
19
Books More Endpoints
20
Books Routes & Controllers
21
Portfolio Model
22
Portfolios Controllers & Routes
23
Portfolio Update & Delete Endpoint
24
Get Portfolios on Client Side
25
Create Portfolio from Client App
26
Handle Error in Create Form
27
Fix Validation + Redirect
28
Portfolio Update Page, Get Portfolio By Id
29
Initial Values in Portfolio Form
30
Update Portfolio on Client
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.8
4.8 out of 5
5 Ratings

Detailed Rating

Stars 5
4
Stars 4
1
Stars 3
0
Stars 2
0
Stars 1
0
bc3b58219ee13cb895e01ae685ac370d
30-Day Money-Back Guarantee

Includes

28 hours on-demand video
Full lifetime access
Access on mobile and TV
Certificate of Completion
Demos
Support Buy $0