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

Complete Next.js with React & Node – Beautiful Portfolio App
Complete Next.js with React & Node – Beautiful Portfolio App
English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 27.5 Hours | 15.4 GB

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

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.

What you’ll learn

  • 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
Table of Contents

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

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

Base Shape Of Portfolio
32 Bootstrap Integration
33 Custom Fonts
34 App Cleanup + Css
35 Index Page Styling
36 Typed.js Library
37 Header Integration part 1
38 Header Integration part 2
39 Base Page Component and Default Props

Authentication with Auth0
40 Auth Start, Login and Logout Buttons
41 Verify Token Expiration Time Improvement
42 Auth Debugging & Display User
43 JWKS verify token signature
44 JWKS Debugging and Explanation
45 Decoded Token Fix!
46 Secret Protected Page
47 (HOC) High Order Components – Start
48 withAuth HOC – getInitialProps
49 Secret Endpoint Server
50 CheckJWT Intro to Middlewares
51 Auth0 App Creation and Service
52 CheckJWT Real Middleware part 1
53 CheckJWT Real Middleware part 2
54 Axios Auth Headers
55 Authorise Request in Get Initial Props
56 Roles in Auth0
57 HOC to check a Role
58 Server Side Role Authorization
59 Handle Authentication and Callback Page
60 Callback Page and Redirect User
61 Google Setup Auth0
62 Save Tokens in Cookies
63 DisplayHide Login Buttons
64 Get Cookies from Server Client
65 Inform Header About Authentication

Portfolio Feature
66 Different Headers
67 Date Picker Component
68 Style Date Picker
69 On Change Event Explanation
70 Date Validation
71 Disable End Date
72 Portfolio Styling Changes + Small Refactor
73 MongoDB Intro
74 Config Folder Dev.js
75 Book Model + Post Route
76 Books More Endpoints
77 Portfolio Card Styling
78 Books Routes & Controllers
79 Portfolio Model
80 Portfolios Controllers & Routes
81 Portfolio Update & Delete Endpoint
82 Get Portfolios on Client Side
83 Create Portfolio from Client App
84 Handle Error in Create Form
85 Fix Validation + Redirect
86 Portfolio Update Page, Get Portfolio By Id
87 Initial Values in Portfolio Form
88 React Simple Form
89 Update Portfolio on Client
90 Testing Update Functionality
91 UI Buttons Navigation
92 Hide Buttons for not Logged in Users
93 Delete Portfolio Client
94 Portfolio Modal Intro
95 Fill Modal with Portfolio Data
96 Stop Propagation on Click
97 Sort Date & Hide Initial Date Fix
98 More Input Types
99 Formik Intro
100 Formik Specific Inputs
101 Formik + Bootstrap
102 Formik Separate Component
103 Validate Form with Formik

Blog Feature – Slate Editor
104 Blog Listing
105 Block Formatting Debugging
106 Styling Improvement of Editor
107 Blog Listing Login Button Fix
108 Slate Editor Intro
109 Event Handler in Slate
110 Custom Blocks Slate
111 Custom Marks Slate
112 Hover Menu Start
113 Hover Menu Debugging
114 Hover Menu Block Buttons

Advance Blog Feature
115 Blog Model
116 Serialise Rules Fix
117 Serialise to HTML
118 Save Blog Action
119 Disable Save Button while Saving
120 Blog Editor Update Page
121 Initial Value for Blog Editor Page
122 Redirect After Save
123 Save Blog – Lock the request
124 Update Blog Server
125 Update Blog Client
126 Date Fix in Model
127 Save Blog Shortcut
128 Blog Toaster Messages
129 User Blogs Dashboard Page
130 Get User Specific Blogs
131 Display User Blogs
132 Dropdown Menu for the Blog Init
133 Dynamic Options for Dropdown Menu
134 Dropdown Handlers
135 Learn about Slug
136 Publish Draft Blogs
137 POST Blog Endopoint
138 Delete and Get Published Blogs on the Server
139 Delete Blog from the App
140 Get & Display Published Blogs
141 Detail Blog Page – Get Page by Slug
142 Detail Blog Page Complete
143 Recap of Section part 1
144 Recap of Section part 2
145 Get Blog By Id Endpoint
146 Controll Menu
147 Save Blog part 1
148 Save Blog part 2
149 Save Blog part 3
150 Serialise & Deserialise Introduction

Page UX Improvement
151 About Page
152 Dropdown Menu on Smaller Screens Fix
153 Height of the Image on Smaller Screens
154 CV Page
155 Flipping Card part 1
156 Flipping Card part 2
157 Flipping Card part 3
158 Active Link part 1
159 Active Link part 2
160 Dropdown Blogs for Site Owner
161 Dropdown Blogs Styling Fixes
162 Set Interval Animation Fix

SEO Improvements
163 Title Explanation
164 Don’t forget about Description
165 Open Graph
166 Robots
167 Cannonical & H1 & alt
168 Favicon

Get Ready for Deploy
169 Small pre-deploy Changes
170 Google Fonts & Deploy
171 Final Deploy and Test
172 Header Title Fix
173 Final Words
174 Setup Environment Variables
175 Setup Namespace
176 Mongo DB & Auth0 Production Setup
177 First Deployment
178 Performance Improvements – Images & JS
179 Optimise CSS
180 Load fonts on Client
181 Deploy & Test after Fonts