Complete Next.js with React & Node - Portfolio Apps [2023]

Create portfolio apps using NextJS, with the new "App Router" architecture! Master the latest Next.js, React.js & Node.

4.50 (1158 reviews)
Udemy
platform
English
language
Web Development
category
instructor
10,684
students
44 hours
content
Nov 2023
last update
$74.99
regular price

What you will learn

Develop 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

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 and move to more advanced topics until your application is deployed to Heroku or Vercel and accessible online on the internet. This course covers the latest topics and React JS and Next JS versions.


Course Structure is the following:

  • [Project 1]: Resource Application (Beginners)

  • [Project 2]: Content Application (Beginners)

  • [Project 3]: Portfolio Application (Beginners/Intermediate)


What is Next.js?

Next.js is a 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.


What are we going to work on?

Project 1 - Resource Project

  • This project is designed to provide a comprehensive understanding of fundamental concepts in web development.

  • You will grasp the concept of state, which represents the dynamic data within a React component, and learn how to manage it effectively.

  • Understanding props, which pass data from one component to another, is a key part of this project.

  • You will understand comprehensively what a component is in the context of React and how to create and use them in your applications.

  • The primary focus is on React and Next JS, two popular JavaScript libraries/frameworks for building modern web applications.


Project 2 - Content Application

  • Learn the latest Next.js 13's "App Architecture."

  • Explore recent changes in React and Next.js.

  • Build a content application for managing portfolios and blogs in markdown format.

  • Discover new API functions.

  • Understand project organization.

  • Gain insight into how these frameworks work.


Project 3 - Extensive Portfolio Project

  1. Building the Layout:

    • Creating reusable components like navbar and portfolio cards.

    • Explaining server-side rendering and data fetching techniques.

  2. Authentication:

    • Using Auth0 for authentication.

    • User registration, login, and access control.

    • Managing authentication state and making UI changes.

  3. Portfolio Features:

    • Implementing create, update, and delete functionality.

    • Real-time updates and fast static pages with Next.js.

  4. Blogging:

    • Creating blogs with a rich text editor.

    • Drafting and publishing blogs.

    • Managing user blogs and SEO.

  5. SEO (Search Engine Optimization):

    • Basics of SEO and integrating it with Next.js.

  6. Deployment:

    • Deploying Express API server to Heroku.

    • Deploying Next.js portfolio app to Vercel to be accessible on the internet.

Content

Introduction

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

Updates + Info

Review System

NEW Next JS 9 - Basics

Section Introduction
Application Initialization
Create index page
Functional Components
Class Components
Reusable Components
Some basics styles
What is the State
Let's mutate State
Common mistakes with State
State of functional component
What are props
How web app works
Iterate over list of data
Shorten Function
Move movie data to Store
Get movie data + Promises
Use Effect
Get movies in class component
Catch error in Promise
Get initial props
More pages, more links
App container
App container props
Detail page of movie
Get movie by id
Fix links in detail page
Finishes detail page
Get images from movies
Display cover images
Get categories
Modal implementation + Close Modal
Form to create movie & Containment
Get values from the form
Handle genre changes
Handle form submit
Close Modal & Uncontrolled data functionality
Provide ID of movie
Base server implementation
More about Server
Getting movies from server
Get movie by ID
Saving movies
Delete movie
Edit page for movie
Provide data to Edit page
Final touches on Update movies functionality
Navigation fixes
Starting with filtering
Filtering finished
Styling improvements
API Endpoints
Post endpoint

Next.js Starting Portfolio + Basics

Info
Basic Setup
Project From Github, Compatibility
What are components ?
JSX & New Page
Simple Navigation & More Pages
SPA vs MPA
Shared Components - Header
React Props
Base Layout
Types of Styling
Lifecycle Functions
Super Function
React State
Callbacks and Arrow Functions
How Does Our Application Works
SSR vs CSR
Get Initial Props part 1
Get Initial Props part 2
Fetch Posts from API
Dynamic Links + Queries
Dynamic Pages "as" Prop
Basic Sever Setup
[NEXT 9]: Dynamic Route Fix
Dynamic Route Fix
Extended Server Explanation
Small Note To Server Side Rendering
[NEXT 9]: Get Portfolio By Id
Get Portfolio By Id
[NEXT 9]: Dynamic Routes with Next/Routes
Dynamic Routes with Next/Routes
Warning Fix for Portfolios
Push Projet to Github

Base Shape Of Portfolio

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

Authentication with Auth0

Auth Start, Login and Logout Buttons
Auth0 App Creation and Service
Handle Authentication and Callback Page
Callback Page and Redirect User
Google Setup Auth0
Save Tokens in Cookies
Display/Hide Login Buttons
Get Cookies from Server / Client
Inform Header About Authentication
Verify Token Expiration Time Improvement
Auth Debugging & Display User
JWKS verify token signature
JWKS Debugging and Explanation
Decoded Token Fix!
Secret Protected Page
(HOC) High Order Components - Start
withAuth HOC - getInitialProps
Secret Endpoint Server
CheckJWT Intro to Middlewares
CheckJWT Real Middleware part 1
CheckJWT Real Middleware part 2
Axios Auth Headers
Authorise Request in Get Initial Props
Roles in Auth0
HOC to check a Role
Server Side Role Authorization

Portfolio Feature

Different Headers
Portfolio Card Styling
React Simple Form
More Input Types
Formik Intro
Formik Specific Inputs
Formik + Bootstrap
Formik Separate Component
Validate Form with Formik
Date Picker Component
Style Date Picker
On Change Event Explanation
Date Validation
Disable End Date
Portfolio Styling Changes + Small Refactor
Database Changes
MongoDB Intro
Config Folder Dev.js
Book Model + Post Route
Books More Endpoints
Books Routes & Controllers
Portfolio Model
Portfolios Controllers & Routes
Portfolio Update & Delete Endpoint
Get Portfolios on Client Side
Create Portfolio from Client App
Handle Error in Create Form
Fix Validation + Redirect
Portfolio Update Page, Get Portfolio By Id
Initial Values in Portfolio Form
Update Portfolio on Client
Testing Update Functionality
UI Buttons Navigation
Hide Buttons for not Logged in Users
Delete Portfolio Client
Portfolio Modal Intro
Fill Modal with Portfolio Data
Stop Propagation on Click
Sort Date & Hide Initial Date Fix

Blog Feature - Slate Editor

Blog Listing
Blog Listing Login Button Fix
Slate Editor Intro
Event Handler in Slate
Custom Blocks Slate
Custom Marks Slate
Hover Menu Start
Hover Menu Debugging
Hover Menu Block Buttons
Block Formatting Debugging
Styling Improvement of Editor

Advance Blog Feature

Blog Model
Date Fix in Model
POST Blog Endopoint
Get Blog By Id Endpoint
Controll Menu
Save Blog part 1
Save Blog part 2
Save Blog part 3
Serialise & Deserialise Introduction
Serialise Rules Fix
Serialise to HTML
Save Blog Action
Disable Save Button while Saving
Blog Editor Update Page
Initial Value for Blog Editor Page
Redirect After Save
Save Blog - Lock the request
Update Blog Server
Update Blog Client
Save Blog Shortcut
Blog Toaster Messages
User Blogs Dashboard Page
Get User Specific Blogs
Display User Blogs
Dropdown Menu for the Blog Init
Dynamic Options for Dropdown Menu
Dropdown Handlers
Learn about Slug
Publish Draft Blogs
Delete and Get Published Blogs on the Server
Delete Blog from the App
Get & Display Published Blogs
Detail Blog Page - Get Page by Slug
Detail Blog Page Complete
Recap of Section part 1
Recap of Section part 2

Page UX Improvement

About Page
Flipping Card part 1
Flipping Card part 2
Flipping Card part 3
Active Link part 1
Active Link part 2
Dropdown Blogs for Site Owner
Dropdown Blogs Styling Fixes
Set Interval Animation Fix
Dropdown Menu on Smaller Screens Fix
Height of the Image on Smaller Screens
CV Page

SEO Improvements

Title Explanation
Don't forget about Description
Open Graph
Robots
Cannonical & H1 & alt
Favicon

Get Ready for Deploy

Small pre-deploy Changes
Setup Environment Variables
Setup Namespace
Mongo DB & Auth0 Production Setup
First Deployment
Performance Improvements - Images & JS
Optimise CSS
Load fonts on Client
Deploy & Test after Fonts
Google Fonts & Deploy
Final Deploy and Test
Header Title Fix
Final Words

[Optional]: Setup For Busy Developers

Setup Completed Project

Screenshots

Complete Next.js with React & Node - Portfolio Apps [2023] - Screenshot_01Complete Next.js with React & Node - Portfolio Apps [2023] - Screenshot_02Complete Next.js with React & Node - Portfolio Apps [2023] - Screenshot_03Complete Next.js with React & Node - Portfolio Apps [2023] - Screenshot_04

Reviews

Rafal
February 2, 2023
Definitely the guy has Next.js knowledge - problem is he cannot transfer it easily. Repeating the same phrases multiple times only frustrates and makes video much longer without fetching the value itself, not saying about constant issues with code.
Fazar
October 25, 2022
awesome, explanation so clearly.. but little bit faster for me, because i'm not fluent in english, so i must repeat slowly each video..
Anna
February 8, 2022
For me, this course is not very useful. Too long and not focused enough on explaining the core concepts of NextJS. I don't recommend it to somebody, who already created a few projects in React.
Habert
February 6, 2022
at the moment all look clear and well explained I'm not native English speaker I'm not really good in English and I'm understand all very well
Thoushif
January 6, 2022
Thanks for details debugging between the demos. loved the way to explain things in developer tools! learned new things.
Attila
November 1, 2021
I really like this training. I learn a lot from it and I can follow it easily and do it as the instructor Filip does.
Abdul
September 17, 2021
If you want to drain your brain, watch his tutorials... No doubt he has good knowledge but not good at teaching and doing stuff...
Junpil
September 1, 2021
Very well explained lectures and the instructor explains well when we ask some questions. The reason why I gave 4 and a half stars is that some lectures are outdated. but still, when we ask for solutions, he responds very fast. I recommend this course for those who want to have their own portfolio but don't know how to make it.
Trato
August 7, 2021
I saw the Arrow Function explanation very confusing. It was seen very improvised and with no real explanation about the difference with a normal function. I only understood that it has one difference that is that I do not need to use curly brackets, but only with one line? mmmmh....
Xuerui
June 11, 2021
This might not be for pro's but as someone that is still getting familiar with next.js and react in general this is well explained and made me gain a greater understanding, thanks for the course
Patrik
June 1, 2021
Inhaltlich sehr gut, jedoch wenn man auf Untertitel angewiesen ist, fast unbrauchbar. Entweder man verbessert die speech to text Funktionalität oder der Kursgeber achtet mehr auf seine Aussprache und Betonung.
Mohamed
May 29, 2021
Amazing course. He doesn't just code to code, he shows you the best practices, he shows the whole workflow, its like how he would code in real life. The only thing I don't like is there are some outdated lectures, i would suggest at least having a github gist with the new updated code for some of the lectures.
Muhammad
March 1, 2021
What Filip did in this course is amazing, all materials are straight to the point for react beginner. I hope he's going to update all contents in the future. This course is underrated.
Arvind
February 13, 2021
One of the best courses out there. This guy is insane. Not only he gives you all the basics, he gives you tips and tricks here and there that you can just found anywhere else. Love his tempo and the way he explains. And he updates his courses. Gotta love the guy.
Gerardo
January 23, 2020
I thing this is one of the most underrated course in Udemy. The amount of knowledge presented and techniques are deep and incredible. Besides that, instructor has revamped & updated the projects at least 3 times. Thanks to the instructor.

Coupons

DateDiscountStatus
6/19/201995% OFF
expired
11/19/202093% OFF
expired
12/10/202093% OFF
expired
5/26/202192% OFF
expired

Charts

Price

Complete Next.js with React & Node - Portfolio Apps [2023] - Price chart

Rating

Complete Next.js with React & Node - Portfolio Apps [2023] - Ratings chart

Enrollment distribution

Complete Next.js with React & Node - Portfolio Apps [2023] - Distribution chart

Related Topics

2000856
udemy ID
10/31/2018
course created date
6/19/2019
course indexed date
Bot
course submited by