IIRF Online > Development > Web Development > Next.js > Complete Next.js with React & Node - Portfolio Apps [2023]
Complete Next.js with React & Node - Portfolio Apps [2023] by Udemy
Create portfolio apps using NextJS, with the new "App Router" architecture! Master the latest Next.js, React.js & Node.
Course Highlights
- 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
Skills you will learn!
Curriculum
4 Topics
Project Overview
How to resolve issues + Project structure
Update Announcement
Page vs App Init
8 Topics
Project Introduction
Project initialisation
Folder Structure
_app Component
Components
Class components
JSX
Arrow Functions
9 Topics
State
Increment state
Change state
Class state
Props
Use effect
Class props
How web apps work
More about props
7 Topics
Bulma css
Separation into components
Absolute path
Layout
Resource data
Highlight list
Resource list
8 Topics
Api functions
Get static props
Get static vs get server side props
[Server] Api app
[Server] Api endpoints
[Server] Get resources from API
Get data from 3001
Cors and Proxy
8 Topics
Important! Next 13 Updates
Resource new page
Resource form
More inputs
Form values
Form Submit
Handle title change
Handle all inputs change
9 Topics
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
8 Topics
[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
5 Topics
Resource edit page
Resource Form Component
Resource Edit Form
Resource Patch API endpoint
[Server] Patch Endpoint
7 Topics
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
7 Topics
UX improvements
Complete resource
[Server] Forbid update of not complete resource
Resource Status
Resource status color
Display buttons on inactive ones
Env variables
5 Topics
Git & Heroku
Pushing Code to Github
Deploying to Heroku
Production env file
Deployment To Vercel
5 Topics
Init the project
File Removal
More pages
Server Components
Blogs and portfolios json
7 Topics
Map function
More Maps
Display Blogs and Portfolios
Display Images
Item Stylings
Item Header Stylings
Passing data as props
5 Topics
Api routes
Delay Function
Fetching data with API route
Bonus Info about Request
Fetch Portfolios
8 Topics
Simple express server
Get data from Node JS server
Server side vs static
Build vs Dev
Paralel vs Sequence
Suspense
Read files on Server
Randomizer
7 Topics
Timed Revalidation
Starting Tag Revalidation
Tag Revalidation Finish
Path Revalidation
Client fetching + CORS
Fixing CORS
Remove api server
9 Topics
Markdown Content
Get content file names
Get raw content
Use Gray Matter
Detail pages
Provide slugs to content
Get content by slug
Generate Static Params
Markdown to Html
9 Topics
Catch all segments
Not Found Page
Loading UI
Navigation and Todos List
Active Link
Use router
Specific Layout
Route Group
Parallel Routes
10 Topics
Tailwind
Layout Improvement
New navigation bar
Hero Component
Blog list and portfolio list
Fix images and Titles
Content Header
Markdown styling
Get Content Count
Add Content
2 Topics
Github
Deployment to Vercel
25 Topics
Section Intro
Init Next Portfolio
Pages and Header
Base layout
Fetch posts
Portfolio detail page
Get post by id
Debug
Reactstrap
Fonts
Scss styling
Layout Improvement
Header
Self Typed
Base Page
Note Before Watching
Absolute path
Login button
Api functions - part 1
Api functions - part 2
Api functions - part 3
Loading state
Fetch post by ID
useSWR
useSWR by ID
24 Topics
Section Intro
Auth0 Registration
New Auth0 Updates!
Login API Route
Webpack Dotenv package
Env Variables
Login Screen
Get login working
Get User
Pass user to layout
Logout
Secret page
Redirect
HOC Start
withAuth HOC
Server side props
Rework server side
withAuth Server side
Create Roles New Way!
[DEPRECATED!] About Roles
Admin Rights
[Update]: Admin SSR
Admin SSR
ENV Variables
46 Topics
Section Intro
API Server
Git Ignore
Routes and Controllers
Mongo DB
Structural changes in DB
Create portfolio data
Populate DB
Get portfolio by ID
Get Portfolios
Portfolio Card
Base Page Stylings
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
[NOTE]: Check role on server
Check role on server
Dropdown menu
Dropdown menu done
Next 9.4 Updates - part 1
Note: Revalidate
Next 9.4 Updates - part 2
25 Topics
Section Intro
Blog 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 + Dates
Blog detail page
13 Topics
Section Intro
Flip 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
11 Topics
Section Intro
Head title
Index page type
Meta description
Open graph
Canonical
Fonts images favicon
More about fonts
Portfolio detail
Portfolio detail data
Change images
10 Topics
Section Intro
Deploying start
API to heroku
Deployment to Heroku
Respond with html page
Testing with PROD api
Small fixes
Deployment to Vercel
Testing Next.js app
Course Ending
Complete Next.js with React & Node - Portfolio Apps [2023]
Related Next.js Courses
Thank You!
Your review has been submitted successfully.