Complete Nextjs with React Node Beautiful Portfolio App

Complete Nextjs with React Node Beautiful Portfolio App

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

Requirements

Fundamentals in HTML and CSS
Basic Javascript knowledge is required

Description

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 ProjectThis 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 ProjectFirst, 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.

Overview

Section 1: Introduction

Lecture 1 Project Overview

Lecture 2 How to resolve issues + Project structure

Section 2: [Project 1]: Init the Project

Lecture 3 Project Introduction

Lecture 4 Project initialisation

Lecture 5 Folder Structure

Lecture 6 _app Component

Lecture 7 Components

Lecture 8 Class components

Lecture 9 JSX

Lecture 10 Arrow Functions

Section 3: [Project 1]: State & Props

Lecture 11 State

Lecture 12 Increment state

Lecture 13 Change state

Lecture 14 Class state

Lecture 15 Props

Lecture 16 Use effect

Lecture 17 Class props

Lecture 18 How web apps work

Lecture 19 More about props

Section 4: [Project 1]: Layout

Lecture 20 Bulma css

Lecture 21 Separation into components

Lecture 22 Absolute path

Lecture 23 Layout

Lecture 24 Resource data

Lecture 25 Highlight list

Lecture 26 Resource list

Section 5: [Project 1]: Data fetching

Lecture 27 Api functions

Lecture 28 Get static props

Lecture 29 Get static vs get server side props

Lecture 30 [Server] Api app

Lecture 31 [Server] Api endpoints

Lecture 32 [Server] Get resources from API

Lecture 33 Get data from 3001

Lecture 34 Cors and Proxy

Section 6: [Project 1]: Forms & Create Resource

Lecture 35 Important! Next 13 Updates

Lecture 36 Resource new page

Lecture 37 Resource form

Lecture 38 More inputs

Lecture 39 Form values

Lecture 40 Form Submit

Lecture 41 Handle title change

Lecture 42 Handle all inputs change

Section 7: [Project 1]: Post Request

Lecture 43 Send a post request

Lecture 44 Attach data in the request

Lecture 45 Axios

Lecture 46 Validate data

Lecture 47 Catching error

Lecture 48 [Server] post endpoint

Lecture 49 [Server] finishing post endpoint

Lecture 50 Handling post request in API

Lecture 51 Redirect after create

Section 8: [Project 1]: Resource Details

Lecture 52 [Server] get resource by ID endpoint

Lecture 53 Resource detail page

Lecture 54 Resource page fetch data

Lecture 55 Link to detail page

Lecture 56 Get Initial Props

Lecture 57 Get static paths

Lecture 58 Fallback true

Lecture 59 Revalidate

Section 9: [Project 1]: Resource Edit

Lecture 60 Resource edit page

Lecture 61 Resource Form Component

Lecture 62 Resource Edit Form

Lecture 63 Resource Patch API endpoint

Lecture 64 [Server] Patch Endpoint

Section 10: [Project 1]: Active Resource

Lecture 65 Active resource component

Lecture 66 Active resource patch request

Lecture 67 [Server] Activate resource

Lecture 68 [Server] Active resource endpoint

Lecture 69 Fetch active resource in next

Lecture 70 Time to finish in seconds

Lecture 71 Seconds state

Section 11: [Project 1]: UX Improvements

Lecture 72 UX improvements

Lecture 73 Complete resource

Lecture 74 [Server] Forbid update of not complete resource

Lecture 75 Resource Status

Lecture 76 Resource status color

Lecture 77 Display buttons on inactive ones

Lecture 78 Env variables

Section 12: [Project 1]: Deployment

Lecture 79 Git & Heroku

Lecture 80 Pushing Code to Github

Lecture 81 Deploying to Heroku

Lecture 82 Production env file

Lecture 83 Deployment To Vercel

Section 13: [Project 2]: Starter(Serverless)

Lecture 84 Section Intro

Lecture 85 Init Next Portfolio

Lecture 86 Pages and Header

Lecture 87 Base layout

Lecture 88 Fetch posts

Lecture 89 Portfolio detail page

Lecture 90 Get post by id

Lecture 91 Debug

Lecture 92 Reactstrap

Lecture 93 Fonts

Lecture 94 Scss styling

Lecture 95 Layout Improvement

Lecture 96 Header

Lecture 97 Self Typed

Lecture 98 Base Page

Lecture 99 Note Before Watching

Lecture 100 Absolute path

Lecture 101 Login button

Lecture 102 Api functions – part 1

Lecture 103 Api functions – part 2

Lecture 104 Api functions – part 3

Lecture 105 Loading state

Lecture 106 Fetch post by ID

Lecture 107 useSWR

Lecture 108 useSWR by ID

Section 14: [Project 2]: Authentication

Lecture 109 Section Intro

Lecture 110 Auth0 Registration

Lecture 111 New Auth0 Updates!

Lecture 112 Login API Route

Lecture 113 Webpack Dotenv package

Lecture 114 Env Variables

Lecture 115 Login Screen

Lecture 116 Get login working

Lecture 117 Get User

Lecture 118 Pass user to layout

Lecture 119 Logout

Lecture 120 Secret page

Lecture 121 Redirect

Lecture 122 HOC Start

Lecture 123 withAuth HOC

Lecture 124 Server side props

Lecture 125 Rework server side

Lecture 126 withAuth Server side

Lecture 127 About Roles

Lecture 128 Admin Rights

Lecture 129 Admin SSR

Lecture 130 ENV Variables

Section 15: [Project 2]: Portfolio Feature

Lecture 131 Section Intro

Lecture 132 API Server

Lecture 133 Git Ignore

Lecture 134 Routes and Controllers

Lecture 135 Mongo DB

Lecture 136 Structural changes in DB

Lecture 137 Create portfolio data

Lecture 138 Populate DB

Lecture 139 Get portfolio by ID

Lecture 140 Get Portfolios

Lecture 141 Portfolio Card

Lecture 142 Base Page Stylings

Lecture 143 Get portfolio server side

Lecture 144 Get static paths

Lecture 145 SSR vs Static

Lecture 146 Portfolio “new” page

Lecture 147 Submit form

Lecture 148 Datepicker

Lecture 149 Handle Dates

Lecture 150 Disable end date

Lecture 151 Api route to create portfolio

Lecture 152 Create portfolio endpoint

Lecture 153 Testing create portfolio

Lecture 154 JWT Middleware

Lecture 155 Get access token

Lecture 156 Create portfolio from App

Lecture 157 Hook function to create portfolio

Lecture 158 Hook creator – Api handler

Lecture 159 Handle Errors

Lecture 160 Portfolio edit page

Lecture 161 Pre-fill form with data

Lecture 162 Update portfolio on Server

Lecture 163 Update on client

Lecture 164 Toast messages

Lecture 165 Handle errors

Lecture 166 Edit and Delete buttons

Lecture 167 Delete on server

Lecture 168 Delete on client

Lecture 169 Delete from state

Lecture 170 Check role on server

Lecture 171 Dropdown menu

Lecture 172 Dropdown menu done

Lecture 173 Next 9.4 Updates – part 1

Lecture 174 Note: Revalidate

Lecture 175 Next 9.4 Updates – part 2

Section 16: [Project 2]: Blog Feature

Lecture 176 Section Intro

Lecture 177 Blog Editor

Lecture 178 Blog Server implementation

Lecture 179 Blog endpoints

Lecture 180 Create blog on server

Lecture 181 Create blog from client

Lecture 182 Redirect to blog update

Lecture 183 Get initial content to blog update

Lecture 184 Update blog on server

Lecture 185 Update blog from client

Lecture 186 Base API

Lecture 187 Dashboard page

Lecture 188 Fetch blogs by user

Lecture 189 Filter blogs

Lecture 190 Dropdown in dashboard

Lecture 191 Generate options

Lecture 192 Slugify title

Lecture 193 Update blog

Lecture 194 Mutate function

Lecture 195 Unique slugs

Lecture 196 Delete blog

Lecture 197 Blog index page

Lecture 198 Display blogs

Lecture 199 Link to blog detail + Dates

Lecture 200 Blog detail page

Section 17: [Project 2]: UX Improvements

Lecture 201 Section Intro

Lecture 202 Flip the card

Lecture 203 About page

Lecture 204 Dropdown resizing

Lecture 205 Home screen improvements

Lecture 206 Active Links

Lecture 207 CV Page

Lecture 208 Try to get an access token

Lecture 209 Get an access token

Lecture 210 Get a user

Lecture 211 Fix blog by slug

Lecture 212 Get blogs with user

Lecture 213 Display user

Section 18: [Project 2]: SEO

Lecture 214 Section Intro

Lecture 215 Head title

Lecture 216 Index page type

Lecture 217 Meta description

Lecture 218 Open graph

Lecture 219 Canonical

Lecture 220 Fonts, images, favicon

Lecture 221 More about fonts

Lecture 222 Portfolio detail

Lecture 223 Portfolio detail data

Lecture 224 Change images

Section 19: [Project 2]: Deployment

Lecture 225 Section Intro

Lecture 226 Deploying start

Lecture 227 API to heroku

Lecture 228 Deployment to Heroku

Lecture 229 Respond with html page

Lecture 230 Testing with PROD api

Lecture 231 Small fixes

Lecture 232 Deployment to Vercel

Lecture 233 Testing Next.js app

Lecture 234 Course Ending

Section 20: [Project 3]: Movie App, Basics

Lecture 235 Application Initialization

Lecture 236 Create index page

Lecture 237 Functional Components

Lecture 238 Class Components

Lecture 239 Reusable Components

Lecture 240 Some basics styles

Lecture 241 What is the State

Lecture 242 Let’s mutate State

Lecture 243 Common mistakes with State

Lecture 244 State of functional component

Lecture 245 What are props

Lecture 246 How web app works

Lecture 247 Iterate over list of data

Lecture 248 Shorten Function

Lecture 249 Move movie data to Store

Lecture 250 Get movie data + Promises

Lecture 251 Use Effect

Lecture 252 Get movies in class component

Lecture 253 Catch error in Promise

Lecture 254 Get initial props

Lecture 255 More pages, more links

Lecture 256 App container

Lecture 257 App container props

Lecture 258 Detail page of movie

Lecture 259 Get movie by id

Lecture 260 Fix links in detail page

Lecture 261 Finishes detail page

Lecture 262 Get images from movies

Lecture 263 Display cover images

Lecture 264 Get categories

Lecture 265 Modal implementation + Close Modal

Lecture 266 Form to create movie & Containment

Lecture 267 Get values from the form

Lecture 268 Handle genre changes

Lecture 269 Handle form submit

Lecture 270 Close Modal & Uncontrolled data functionality

Lecture 271 Provide ID of movie

Lecture 272 Base server implementation

Lecture 273 More about Server

Lecture 274 Getting movies from server

Lecture 275 Get movie by ID

Lecture 276 Saving movies

Lecture 277 Delete movie

Lecture 278 Edit page for movie

Lecture 279 Provide data to Edit page

Lecture 280 Final touches on Update movies functionality

Lecture 281 Navigation fixes

Lecture 282 Starting with filtering

Lecture 283 Filtering finished

Lecture 284 Styling improvements

Lecture 285 API Endpoints

Lecture 286 Post endpoint

Section 21: [Project 4]: Starter(Legacy)

Lecture 287 Legacy Info

Lecture 288 Project Init

Lecture 289 More pages + Header

Lecture 290 Base Layout

Lecture 291 Styles

Lecture 292 Post Data

Lecture 293 Portfolio Detail

Lecture 294 Get portfolio by ID

Lecture 295 Custom server

Lecture 296 Next routes

Lecture 297 Reactstrap

Lecture 298 Fonts

Lecture 299 Cleanup + Debugging

Lecture 300 Proper layout

Lecture 301 Typed.js Library

Lecture 302 Header Integration part 1

Lecture 303 Header Integration part 2

Lecture 304 Base Page Component and Default Props

Section 22: [Project 4]: Authentication with Auth0

Lecture 305 Auth Start, Login and Logout Buttons

Lecture 306 Auth0 App Creation and Service

Lecture 307 Handle Authentication and Callback Page

Lecture 308 Callback Page and Redirect User

Lecture 309 Google Setup Auth0

Lecture 310 Save Tokens in Cookies

Lecture 311 Display/Hide Login Buttons

Lecture 312 Get Cookies from Server / Client

Lecture 313 Inform Header About Authentication

Lecture 314 Verify Token Expiration Time Improvement

Lecture 315 Auth Debugging & Display User

Lecture 316 JWKS verify token signature

Lecture 317 JWKS Debugging and Explanation

Lecture 318 Decoded Token Fix!

Lecture 319 Secret Protected Page

Lecture 320 (HOC) High Order Components – Start

Lecture 321 withAuth HOC – getInitialProps

Lecture 322 Secret Endpoint Server

Lecture 323 CheckJWT Intro to Middlewares

Lecture 324 CheckJWT Real Middleware part 1

Lecture 325 CheckJWT Real Middleware part 2

Lecture 326 Axios Auth Headers

Lecture 327 Authorise Request in Get Initial Props

Lecture 328 Roles in Auth0

Lecture 329 HOC to check a Role

Lecture 330 Server Side Role Authorization

Section 23: [Project 4]: Portfolio Feature

Lecture 331 Different Headers

Lecture 332 Portfolio Card Styling

Lecture 333 React Simple Form

Lecture 334 More Input Types

Lecture 335 Formik Intro

Lecture 336 Formik Specific Inputs

Lecture 337 Formik + Bootstrap

Lecture 338 Formik Separate Component

Lecture 339 Validate Form with Formik

Lecture 340 Date Picker Component

Lecture 341 Style Date Picker

Lecture 342 On Change Event Explanation

Lecture 343 Date Validation

Lecture 344 Disable End Date

Lecture 345 Portfolio Styling Changes + Small Refactor

Lecture 346 Database Changes

Lecture 347 MongoDB Intro

Lecture 348 Config Folder Dev.js

Lecture 349 Book Model + Post Route

Lecture 350 Books More Endpoints

Lecture 351 Books Routes & Controllers

Lecture 352 Portfolio Model

Lecture 353 Portfolios Controllers & Routes

Lecture 354 Portfolio Update & Delete Endpoint

Lecture 355 Get Portfolios on Client Side

Lecture 356 Create Portfolio from Client App

Lecture 357 Handle Error in Create Form

Lecture 358 Fix Validation + Redirect

Lecture 359 Portfolio Update Page, Get Portfolio By Id

Lecture 360 Initial Values in Portfolio Form

Lecture 361 Update Portfolio on Client

Lecture 362 Testing Update Functionality

Lecture 363 UI Buttons Navigation

Lecture 364 Hide Buttons for not Logged in Users

Lecture 365 Delete Portfolio Client

Lecture 366 Portfolio Modal Intro

Lecture 367 Fill Modal with Portfolio Data

Lecture 368 Stop Propagation on Click

Lecture 369 Sort Date & Hide Initial Date Fix

Section 24: [Project 4]: Blog Feature – Slate Editor

Lecture 370 Blog Listing

Lecture 371 Blog Listing Login Button Fix

Lecture 372 Slate Editor Intro

Lecture 373 Event Handler in Slate

Lecture 374 Custom Blocks Slate

Lecture 375 Custom Marks Slate

Lecture 376 Hover Menu Start

Lecture 377 Hover Menu Debugging

Lecture 378 Hover Menu Block Buttons

Lecture 379 Block Formatting Debugging

Lecture 380 Styling Improvement of Editor

Section 25: [Project 4]: Advance Blog Feature

Lecture 381 Blog Model

Lecture 382 Date Fix in Model

Lecture 383 POST Blog Endopoint

Lecture 384 Get Blog By Id Endpoint

Lecture 385 Controll Menu

Lecture 386 Save Blog part 1

Lecture 387 Save Blog part 2

Lecture 388 Save Blog part 3

Lecture 389 Serialise & Deserialise Introduction

Lecture 390 Serialise Rules Fix

Lecture 391 Serialise to HTML

Lecture 392 Save Blog Action

Lecture 393 Disable Save Button while Saving

Lecture 394 Blog Editor Update Page

Lecture 395 Initial Value for Blog Editor Page

Lecture 396 Redirect After Save

Lecture 397 Save Blog – Lock the request

Lecture 398 Update Blog Server

Lecture 399 Update Blog Client

Lecture 400 Save Blog Shortcut

Lecture 401 Blog Toaster Messages

Lecture 402 User Blogs Dashboard Page

Lecture 403 Get User Specific Blogs

Lecture 404 Display User Blogs

Lecture 405 Dropdown Menu for the Blog Init

Lecture 406 Dynamic Options for Dropdown Menu

Lecture 407 Dropdown Handlers

Lecture 408 Learn about Slug

Lecture 409 Publish Draft Blogs

Lecture 410 Delete and Get Published Blogs on the Server

Lecture 411 Delete Blog from the App

Lecture 412 Get & Display Published Blogs

Lecture 413 Detail Blog Page – Get Page by Slug

Lecture 414 Detail Blog Page Complete

Lecture 415 Recap of Section part 1

Lecture 416 Recap of Section part 2

Section 26: [Project 4]: Page UX Improvement

Lecture 417 About Page

Lecture 418 Flipping Card part 1

Lecture 419 Flipping Card part 2

Lecture 420 Flipping Card part 3

Lecture 421 Active Link part 1

Lecture 422 Active Link part 2

Lecture 423 Dropdown Blogs for Site Owner

Lecture 424 Dropdown Blogs Styling Fixes

Lecture 425 Set Interval Animation Fix

Lecture 426 Dropdown Menu on Smaller Screens Fix

Lecture 427 Height of the Image on Smaller Screens

Lecture 428 CV Page

Section 27: [Project 4]: SEO Improvements

Lecture 429 Title Explanation

Lecture 430 Don’t forget about Description

Lecture 431 Open Graph

Lecture 432 Robots

Lecture 433 Cannonical & H1 & alt

Lecture 434 Favicon

Section 28: [Project 4]: Get Ready for Deploy

Lecture 435 Small pre-deploy Changes

Lecture 436 Setup Environment Variables

Lecture 437 Setup Namespace

Lecture 438 Mongo DB & Auth0 Production Setup

Lecture 439 First Deployment

Lecture 440 Performance Improvements – Images & JS

Lecture 441 Optimise CSS

Lecture 442 Load fonts on Client

Lecture 443 Deploy & Test after Fonts

Lecture 444 Google Fonts & Deploy

Lecture 445 Final Deploy and Test

Lecture 446 Header Title Fix

Lecture 447 Final Words

Section 29: [Optional]: Setup For Busy Developers

Lecture 448 Setup Completed Project

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.

Course Information:

Udemy | English | 70h 1m | 42.06 GB
Created by: Filip Jerga

You Can See More Courses in the Developer >> Greetings from CourseDown.com