Complete Next.js with React & Node - Beautiful Portfolio App
Build Serverless Web Apps with Next.js. Learn Hooks. Deploy to Vercel. Next.js (Next 9.4), 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.
No Next js previous knowledge is required!
Basic ES6 and Javascript knowledge is required
Fundamentals in React, HTML and CSS
Project Introduction
FREE PREVIEWProject Initialisation
Folder Structure
_app js
Components
Class Components
JSX
Arrow Functions
State
Increment State
Change state
Class state
Props
Use Effect
Class props
How Web apps work
More about props
Bulma CSS
Separation into component
Absolute path
Layout
Resources Data
Highlight List
Resource List
Api functions
Get static props
GetStaticProps vs Server side
[Server] Api app
[Server] Api endpoints
[Server] Get resources from API
Get data from 3001
Cors and Proxy
Resource new page
Resource form
More inputs
Form values
Form Submit
Handle title change
Handle all inputs change
Send a post request
Attach data in the request
Axios
Validate data
Catching error
[Server] post endpoint
[Server] finishing post endpoint
Handling post request in API
Redirect after create
[Server] get resource by ID endpoint
Resource detail page
Resource page fetch data
Link to detail page
Get Initial Props
Get static paths
Fallback true
Revalidate
Resource edit page
Resource Form Component
Resource Edit Form
Resource Patch API endpoint
[Server] Patch Endpoint
Active resource component
Active resource patch request
[Server] Activate resource
[Server] Active resource endpoint
Fetch active resource in next
Time to finish in seconds
Seconds state
UX improvements
Complete resource
[Server] Foirbid update of not complete resource
Resource Status
Resource status color
Display buttons on inactive ones
Env variables
Git & Heroku
Pushing Code to Github
Deploying to Heroku
Production env file
Deployment To Vercel
Section Introduction
FREE PREVIEWProject Init
More pages and header
Base layout
Styles
Post data
Portfolio detail
Get portfolio by Id
Custom server
Next routes
Reactstrap
Fonts
Next JS - Debugger Update
Cleaning and debugging
Proper layout
Typed JS
Header rework - part 1
Header rework - part 2
Base page
Change to functional components
Remove _app
Absolute path
Login button
Api functions - part 1
Api functions - part 2
Api function - part 3
Loading state
Fetch post by Id
useSWR
useSWR by Id
Section Introduction
FREE PREVIEWAuth0 Registration
Login Api route
Env variables
Login Screen
Get login working
Get user
Pass user to layout
Logout
Secret page
Redirect
HOC Start
withAuth HOC
Get server side props
Rework server side
withAuth server side
About roles
Admin rights
Admin SSR
Env Variables
Section Introduction
FREE PREVIEWApi Server
gitignore
Routes and controllers
Mongo Atlas
Structural changes in DB
Create portfolio data
Populate DB
Get portfolio by Id
Get portfolios
Portfolio Card
Base page styling
Get portfolio server side
Get static paths
SSR vs static
Portfolio new page
Submit form
Datepicker
Handle dates
Disable end date
Api route to create portfolio
Create portfolio endpoint
Testing create portfolio
JWT middleware
Get access token
Create portfolio from app
Hook function to create portfolio
Hook creator - api handler
Handle errors
Portfolio edit page
Pre-fill form with data
Update portfolio on server
Update on client
Toast messages
Handle errors
Edit and delete buttons
Delete on server
Delete on client
Delete from state
Check role on server
Dropdown menu
Dropdown menu done
Next JS 9.4 updates - part 1
Next JS 9.4 updates - part 2
Section Introduction
FREE PREVIEWBlog Editor
Blog server implementation
Blog endpoints
Create blog on server
Create blog from client
Redirect to blog update
Get initial content to blog update
Update blog on server
Update blog from client
Base Api
Dashboard page
Fetch blogs by user
Filter blogs
Dropdown in dashboard
Generate options
Slugify title
Update blog
Mutate function
Unique slugs
Delete blog
Blog index page
Display blogs
Link to blog detail and dates
Blog detail page
Section Introduction
FREE PREVIEWFlip the card
About page
Dropdown resizing
Home screen improvements
Active links
CV page
Try to get an access token
Get an access token
Get a user
Fix blog by slug
Get blogs with user
Display user
Section Introduction
FREE PREVIEWHead title
Index page type
Meta description
Open graph
Cannonical
Fonts, images and favicon
More about fonts
Portfolio detail
Portfolio detail data
Change images
Section Introduction
FREE PREVIEWDeploying start
Api to Heroku
Deployment to Heroku
Testing with prod api
Respond with html page
Small fixes
Deployment to Vercel
Testing Next JS app
Course Ending
Application initialization
FREE PREVIEWCreate index page
Functional components
Class components
Reusable components
Some basics styles
What is state
Lets 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 and 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 link in detail page
Finished detail page
Get images from movies
Display cover images
Get categories
Modal implementation and close modal
Form to create movie and containment
Get values from the form
Handle genre changes
Handle form submit
Close modal and uncontrolled data
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
Finishing update movie feature
Navigation fixes
Starting with filtering
Filtering finished
Styling improvements
Api endpoints
Post endpoint
Filip Jerga
Every video contains a discussion where you can create a post describing an issue. The instructor usually responds within 1 business day.
Within 30 days of the purchase, you can ask for a full refund. No questions asked. Your happiness is our priority.
Of course not! Every lecture is committed (explained in the introduction section). You can start watching at any lecture. Just download the correct version of the project attached to lecture resources.
Single Course Access
$29.00
Access to this course only.
Get started nowMonthly Membership
$19.00 / month
Cancel Anytime!
Get started nowAnnual Membership
$190.00 / year
Cancel Anytime!
Get started now