IIRF Online > Development > Web Development > React JS > Complete React, Next.js & TypeScript Projects Course 2024
Complete React, Next.js & TypeScript Projects Course 2024 by Udemy
Hands-on React: 25+ Projects Featuring Next.js, TypeScript, Prisma, Zod, Shadcn, Axios, Router 6, Query 5, Redux Toolkit
Course Highlights
- Make Great Projects Using React
Skills you will learn!
Curriculum
7 Topics
Main Course Repository
What is React?
Goals
Structure
Requirements
Video Blur Fix
Course Review
6 Topics
Workflow Info
Browser
VS Code
Terminal
Node.js
Create-React-App
38 Topics
Intro
Github Repository
Folder Structure
Remove Boilerplate
First Component
Extensions and Settings
Create Element Function
JSX Rules
Nest Components
React Developer Tools
BookList
CSS
Local Images (public folder)
JSX - CSS
JSX - Javascript
Props - Basic Setup
Props - Somewhat Dynamic Setup
Props - Multiple Approaches
Children Prop
Simple List
Proper List
Key Prop
Object as a Prop
Event Basics
Form Submission
Form Submission - Button Example
Anonymous Function (arrow)
Components Feature
Prop Drilling
Complex Example - Intro
Complex Example - Bug
Complex Example - Fix
ES6 Modules
Local Images (src folder)
Numbers Challenge
Title Challenge
Build Folder
Deployment
21 Topics
Intro
Github Repository
Setup
Install
SRC Boilerplate
Structure
Components
Nav Logo
Smooth Scroll
Page Links
Social Links
Hero and About Components
Title Component
Services Component
Tours Component
Footer Component
Alternative Approach - Page Links Component
Alternative Approach - More Components
Continuous Deployment - Setup
Continuous Deployment - Benefits
Continuous Deployment "Gotcha"
2 Topics
VITE - Intro
VITE - Install / Setup
91 Topics
Intro
Github Repository
Setup
Overview
Error Example
UseState Fundamentals
Initial Render and Re-renders
General Rules of React Hooks
UseState Array Example - Setup
UseState Array Example - Complete
UseState - Extra Info
UseState Object Example - Setup
Auto Batching Info
UseState Object Example - Complete
UseState Set Function "Gotcha"
UseState Functional Update Form
UseState - SetTimeout Example
Matching Project
Code Example
UseEffect - Fundamentals
UseEffect - Multiple Effects
UseEffect Fetch Challenge - Intro
UseEffect Fetch Challenge - Complete
UseEffect Clean Up Info
Multiple Returns
Multiple Returns - Fetch Data Setup
Multiple Returns - Fetch Data
Fetch Error "Gotcha"
Order Matters
Fetch Function Location
React Hooks Rules
Vanilla.js (Optional)
Short Circuit - Overview
Short Circuit - Examples
Ternary Operator
Toggle Challenge
User Challenge
UseEffect Cleanup Function - Setup/Challenge
UseEffect - Timer Example
UseEffect - Event Listeners Example
You Might Not Need an Effect
Matching Projects
Project Structure - Folder Example
Project Structure - Named Exports
Project Structure - Export Group
Leverage Javascript - Intro
Leverage Javascript - Challenge
Leverage Javascript - Complete
Forms - Setup
Controlled Inputs
User Challenge - Setup
User Challenge - Add New User
User Challenge - Remove User
Multiple Inputs
Checkbox Input
Select Input
FormData API
Matching Projects
useRef - DOM Node
useRef - Initial Render
Matching Projects
Custom Hooks - Toggle
Custom Hooks - Fetch Person
Custom Hooks - Generic Fetch
Context API - Challenge
Context API - Prop Drilling
Context API - Solution
Context API - Custom Hook
Context API - Global Setup
Matching Projects
UseReducer - Intro
UseReducer - Challenge
UseReducer - Setup
Reducer Basics
Actions and Default State
Reset List
Remove Person
Import/Export
Matching Projects
Performance - Intro
Component Re-renders
React Dev Tools
Lower State
Lower State - Challenge
React.memo()
Mind Grenade
UseCallback Hook
UseCallback Hook - Common Use Case
UseMemo Hook
UseTransition Hook
React Suspense
123 Topics
Important Info !!!
Intro
Setup
Setup - Figma File
Birthday Buddy- Setup
Birthday Buddy - Import List
Birthday Buddy - Render List
Birthday Buddy - Clear List
Birthday Buddy - CSS (Optional)
Tours - Setup
Tours - Fetch Tours
Tours - Render Tours
Tours - Remove Tour
Tours - Read More
Tours - Refetch
Tours - CSS (Optional)
Reviews - Setup
Reviews - Data
Reviews - React Icons
Reviews - First Person
Reviews - Prev and Next
Reviews - Check Number
Reviews - Random Person
Reviews - Modulus Operator
Reviews - CSS (Optional)
Questions - Setup
Questions - Render List
Questions - Toggle Info
Questions - Alternative Setup
Questions - CSS (Optional)
Menu - Setup
Menu - Title Component
Menu - Render Items
Menu - Unique Categories
Menu - Display Categories
Menu - Filter Items
Menu - CSS (Optional)
Tabs - Setup
Tabs - Fetch Jobs
Tabs - Display Job
Tabs - Duties and UUID Library
Tabs - Button Container
Tabs - Current Item
Tabs - CSS (Optional)
Slider - Setup
Slider - Structure
Slider - CSS
Slider - Initial Logic
Slider - Current Item and Prev/Next
Slider - Autoslide (autoplay)
Slider - Library Info
Slider - React Slick Setup
Slider - React Slick Complete
Lorem Ipsum - Setup
Lorem Ipsum - Structure
Lorem Ipsum - Submit Form
Lorem Ipsum - Nanoid Library
Lorem Ipsum - CSS (Optional)
Color Generator - Setup
Color Generator - Form Structure
Color Generator - HTML Color Input
Color Generator - Values.js Library
Color Generator - Render List
Color Generator - React Toastify
Color Generator - Change/Add Color
Color Generator - Clipboard API
Color Generator - CSS (Optional)
Grocery Bud - Setup
Grocery Bud - Form Component
Grocery Bud - Add Item
Grocery Bud - Render Items
Grocery Bud - Single Item
Grocery Bud - Remove Item
Grocery Bud - Local Storage
Grocery Bud - Edit Item (Global Setup)
Grocery Bud - React Toastify
Grocery Bud - CSS (Optional)
Navbar - Setup
Navbar - Data
Navbar - Initial Setup
Navbar - Initial Setup CSS
Navbar - Fixed Setup
Navbar - Dynamic Setup
Navbar - Question
Navbar - Complete App
Sidebar/Modal - Setup
Sidebar/Modal - Components
Sidebar/Modal - Global Context
Sidebar/Modal - Home Component
Sidebar/Modal - Modal Component
Sidebar/Modal - Sidebar Component JSX
Sidebar/Modal - Sidebar CSS
Sidebar/Modal - Sidebar Toggle
Strapi - Setup
Strapi - Data
Strapi - Global Context
Strapi - Components
Strapi - Navbar CSS
Strapi - Hero
Strapi - Sidebar JSX
Strapi - Sidebar CSS
Strapi - NavLinks
Strapi - PageId Logic
Strapi - Submenu JSX
Strapi - Submenu CSS
Strapi - Hide Submenu (Part 1)
Strapi - Hide Submenu (Part 2)
Cart - Intro
Cart - Setup
Cart - Global Context
Cart - UseReducer Setup
Cart - Setup Actions
Cart - Data Structures
Cart - Map Object
Cart - Switch to Map()
Cart - Clear Cart
Cart - Remove Item
Cart - Increase Amount
Cart - Decrease Amount
Cart - Calculate Totals
Cart - Fetch Structure
Cart - Fetch Complete
Cart - CSS (Optional)
9 Topics
Intro
Starter
Setup
GET Request
Setup Headers
POST Request
Global Default
Custom Instance
Interceptors
23 Topics
Intro
Starter
Useful Info
Server (Back-End) - Setup
Tasks App (Front-End) - Setup
Axios Custom Instance
HTTP Methods
API Docs
React Query - Intro
React Query - Install and Setup
Important Update !!!
First Query
Render Data
Error Handling
Thunder Client
Create Task - Challenge
Create Task - Initial Setup
UseMutation Helpers
Edit Task - Challenge
Edit Task - Complete
Delete Task
Refactor
Alternative Server Setup
24 Topics
Intro
Download
Starter
Structure
Dark Theme - Initial Setup
Dark Theme - Add/Remove Class
Dark Theme - CSS
Dark Theme - Users Prefers Dark Mode (CSS)
SearchForm
Unsplash API - Info
Unsplash API - Register
Obtain Correct URL
Setup React Query
Setup Query
Render Images
React Query Dev Tools
Setup Global SearchValue
UseQuery Fix
Dark Mode - Javascript Check
Important Update !!!
Local Storage
ENV Variables
Deploy
CSS (Optional)
17 Topics
Intro
Starter
Setup
Hero Component
Undraw
Projects Data
Headless CMS
Create Contentful Account
Content Type
Content
Contenful API Docs
Contentful SDK - Install and Setup
Fetch Projects
Render Projects
Deploy
Webhooks
CSS (Optional)
46 Topics
Intro
Setup
Starter
SPA and React Router Info
Basic Router
Setup Pages
Link Component
Nested Pages
Nested Pages - More Complex Example
Navbar
Styled Components - Setup
Styled Components - Wrapper
Navbar CSS (optional)
About Page
Page Layout
Error Page
Error Page - CSS
Loader Info
Loader - Landing Page
CocktailDB Overview
Fetch Drinks
Single Page Error
CocktailList
CocktailCard
CocktailList and CocktailCard CSS (optional)
Global Loading and Context
Single Cocktail - Setup
Single Cocktail - Render
Ingredients Challenge
Additional Check
Single Cocktail CSS (optional)
React Toastify - Setup
Newsletter Structure
HTML Form Submission
Action - Setup
Submit Form
Handle Errors
Navigation State
SearchForm - Structure
SearchForm - Complete
SearchForm CSS (optional)
React Query - Setup
React Query - Landing Page Setup
React Query - Landing Page Complete
React Query - Single Cocktail Page
Redirects
10 Topics
Project Intro
Tailwind Intro
Project Setup
Additional Assets
Navbar
Hero
Custom Class
Skills Section
About Section
Projects Section
23 Topics
Intro
Github
Setup
Install
Store
First Slice
Redux Dev Tools
useSelector
Hero Icons
Cart Items - Local Data
Cart Container
Cart Item
Reducers - Clear Cart
Reducers - Return State
Reducers - Remove Item
Reducers - Increase and Decrease
Reducers - Calculate Totals
Modal Setup
Modal Complete
Important Update !!!
createAsyncThunk
createAsyncThunk - More Options
Builder Callback Notation
77 Topics
Intro
DaisyUI
Assets
VITE + TailwindCSS
DaisyUI Setup
Install Dependencies
Create Pages
Route Structure
Error Page
Form Input
Login Page
Submit Button
Register Page
Custom Class
Header Component
Navbar Structure
NavLinks Component
Toggle Component
Add Theme
Set Theme
About Page
Hero Component
Base URL
Landing Loader
Featured Products
Format Price
Fetch Single Product
Render Single Product
Single Product - Colors
Single Product - Amount
Generate Amount Inputs
Products Page - Setup
Products List
Products Container
Filters - Search Input
Filters - Select Input
Filters - Range Input
Filters - Checkbox Input
Global Loading
Filters - Params
Pagination - Setup
Pagination - Complete
Redux Toolkit - Setup
Add To Cart Functionality
AddItem Reducer
Refactor and Local Storage
Clear Remove and Edit Reducers
Cart Page
Cart Totals
Cart Items - Setup
Cart Items - Functionality
User Slice - Setup
Refactor Theme Toggle
Logout and Access User
Register User - Docs
Register User - Complete
Login User - Setup
Access RTK Store in Action
Login Page - Action Complete
Login User - Reducer
Demo User
Checkout Page - Setup
Checkout Page - Restrict Access
Create Order Request
Checkout Form - Setup
Checkout Form - Complete
Auth Errors
Orders Request
Orders Page - Setup
Orders List
Complex Pagination
React Query - Setup
React Query - Landing Page
React Query - Single Product Page
React Query - All Products Page
React Query - Orders Page
React Query - Remove Queries
1 Topic
Course Update !!! New Content !!!
20 Topics
Intro Setup Files and Folders
Type Annotations and Type Inference
Union and Any Type
Arrays and Objects
Functions Params and Function Returns
Optional Default and Rest Parameters
Objects as Parameters and Excess Property Checks
Type Alias and Intersection Type
Interface Fundamentals
Interface - Advanced
Tuples and Enums
Type Assertion Type Unknown and Type Never
ES6 Modules
Type Guarding - First Part
Type Guarding - Second Part
Generics
Fetch Data and Declaration Files
Classes
Tasks Project - First Part
Tasks Project - Second Part
7 Topics
Setup And Fundamentals
UseState and Events
Challenge and Solution
Context API and useReducer
Fetch Data
Redux Toolkit
Tasks Project
16 Topics
Next.js Info Setup Home Page and Link Component
Nested Routes
Layout File Navbar Fonts and Metadata
Server Components vs Client Components
Fetching Data
Nested Layouts and Dynamic Pages
Images
More Routing Options
Server Actions
Actions File
Fetch Users and Revalidate Cache
useFormStatus and useFormState
Delete Button Hidden Input and Bind Method
Route Handlers - First Part
Route Handlers - Second Part
Middleware Local Build and Cache
98 Topics
Project Overview
Setup
Create Pages
Important Update !!!
Shadcn-ui Install and Setup
Button Component
Setup Components
Container Component
Navbar Component - Blueprint
Logo Component
NavSearch and CartButton Components
Shadcn - Change Theme
Shadcn - Toggle Dark Mode
LinksDropdown Component - Initial Setup
Important Info !!!
Create Supabase Project
Setup Prisma
Connect Prisma to Supabase
Prisma CRUD
Practice Writing Prisma Queries
Product Model
Seed Database
Create More Components
SectionTitle and EmptyList Components
Fetch Products Functions
Featured Products
Products Grid Component
Hero Component
Hero Carousel Component
Loading Container
ProductsContainer Component
ProductsList Component
NavSearch Component
Fetch Product Details
Products Details Page - Setup
Supabase Bug !!!
Deploy on Vercel
Setup Toast Component
Clerk Authentication
SignOut Link Component
UserIcon Component
LinksDropdown Component - Complete
Test Auth Provider in Production
Admin Pages - Structure
Restrict Access to Admin Pages
Create Product Page Setup and Faker Library
FormInput Component
Rest of Form Components
SubmitButton Component
FormContainer Component
CreateProductAction - First Approach + Helper Functions
Zod Library and Product Schema
Custom Error Messages
Image Validation
Upload Image to Supabase Bucket
Fetch Admin Products
Icon Button and Delete Product Action
Complete Admin Products Page
Remove Old Image from Supabase Bucket
Fetch Admin Product Details
Edit Product Page
Update Image Container Component
Loading Table Component
Favorite Model
Favorite Buttons and Actions
FavoriteToggleButton and FavoriteToggleForm Components
Toggle Favorite Action
Favorites Page
React Share Library
Review Model
Rating Input and Submit Review Components
Create Review Action
Rating and Comment Components
Product Reviews Component
Product Rating Component - Complete
Fetch User Reviews and Delete Review Action
Reviews Page
Restrict Access to Submit Review Button
Cart and CartItem Model
Select Product Amount Component
Add To Cart - Component
Add To Cart Action - First Part
Add To Cart Action - Second Part
Cart Page and Cart Totals Component
Cart Items List Component
Delete Cart Item Action
Edit Cart Item Action
Bug Fix
Order Model and Order Actions
Orders and Sales Pages
Stripe Setup and API Keys
Refactor Order Model and createOrderAction
Checkout Page
Payment Route
Confirm Route
Test Stripe Functionality
Deploy Bug Fix !!!
Atlas Setup - Optional Video !!!
24 Topics
Overview and Setup
Important Update !!!
Shadcn-ui Overview and Setup
Layout Home Page and Create Pages
Important Info !!!
Clerk Auth and Nav Links
Dashboard Layout Sidebar and Navbar
Dropdownlinks Component Change Theme and Toggle Theme
Shadcn-ui Form Component and Types
Custom Form Components
Create Job Functionality - Continued
Important Info !!!
Prisma Render and Create Job Action
Toast Component React Query Setup and Create Job Form Complete
Get All Jobs Action and Page Setup
Search Form
Jobs List and Job Card
Job Info and Delete Job
Single Job Page and Edit Job Complete
Seed Database
Stats and Charts Actions
Stats Cards Loading Skeleton and Charts Container
Pagination - Button Container
Pagination - Complex Button Container
2 Topics
Course Complete
Extra Projects
25 Topics
Intro and Setup
Structure and Styled Components
Setup Pages
Error and Register Page (first part)
Register Page (second part)
Important Info !!!
HTTP Requests
Login User and Dashboard Setup
Navbar and Toggle Functionality
Small and Big Sidebar
Profile Page
Add Job Page - First Part
Add Job Page - Second Part
Create Job
All Jobs
Job Component
Edit Job and Test User
Stats Container
Recharts Library Update !!!
Charts Container
Search Container
Pagination
Query Params
Refactor and Logout User
Debounce
10 Topics
Setup and React Router
First Pages Context API and Mock Data
Info Card and Followers Components
Charts - First Part
Calculate Stats - First Part
Calculate Stats - Second Part
API Requests
API Requests - Second Part
Authentication
Authentication (Second Part) and Deploy
1 Topic
Bonus
Complete React, Next.js & TypeScript Projects Course 2024
Related React JS Courses
Thank You!
Your review has been submitted successfully.