Complete React, Next.js & TypeScript Projects Course 2025
Hands-on React: 25+ Projects Featuring Next.js, TypeScript, Prisma, Zod, Shadcn, Axios, Router 6, Query 5, Redux Toolkit
Hands-on React: 25+ Projects Featuring Next.js, TypeScript, Prisma, Zod, Shadcn, Axios, Router 6, Query 5, Redux Toolkit
MAJOR COURSE UPDATE - JUNE 2024 !!!
Exciting New Content in React Course
I'm thrilled to announce that I am adding more valuable content to our React course to help you stay ahead of industry standards. Here's what you can look forward to:
Comprehensive TypeScript tutorial
Detailed lessons on React with TypeScript
Complete Next.js tutorial with TypeScript
Several complex Next.js projects
Over 30 hours of new content !!!
Stay ahead with the latest industry standards and master the skills needed for modern React development!
What's New?
TypeScript Integration:
TypeScript Tutorial: Learn the basics and advanced features of TypeScript.
React with TypeScript: Master the integration of TypeScript with React to build robust applications.
Next.js Tutorials:
Next.js with TypeScript: Comprehensive tutorials on building Next.js applications using TypeScript.
Complex Next.js Projects: Work on real-world projects that leverage the full potential of Next.js.
Why These Additions?
Industry Standards: Both TypeScript and Next.js have become essential skills for modern React development.
New React Features: Many new React features are only available through React frameworks like Next.js.
Full-Stack Development: Next.js enables quicker and more efficient full-stack development by allowing server-side and client-side code to coexist seamlessly.
Team Efficiency: TypeScript enhances code maintainability and collaboration, making it a preferred choice for large teams.
Mastering React 18: Building Modern Web Applications
Dive into the dynamic world of front-end development with our comprehensive course on React 18, a cutting-edge JavaScript library used for creating engaging user interfaces. Developed and maintained by Facebook, React has become a cornerstone in building both single-page and mobile applications.
Why Learn React?
High Demand: React's popularity makes it a valuable skill for job seekers in the tech industry.
Efficiency and Performance: React's use of a virtual DOM ensures fast, scalable, and efficient application development.
Flexibility and Reusability: The library's design allows for reusable components, simplifying the development process and making code maintenance easier.
Course Coverage:
React Fundamentals: Understand the core principles of React.
Latest Features: Get hands-on with React 18.
Hooks & State Management: Deep dive into useState, useEffect, useRef, useReducer, useCallback, useMemo, and custom hooks.
Advanced Concepts: Learn about conditional rendering, prop drilling, context API, and more.
Navigation and Routing: Explore React Router 6 for seamless app navigation.
Data Handling: Utilize axios and redux-toolkit for efficient data management.
Project-Based Learning: Build over 25 real-world projects including a Birthday Reminder, E-Commerce Site, Quiz App, and a GitHub Users Explorer.
Ideal For:
Aspiring and experienced front-end developers looking to master React and elevate their web development skills. Whether you're aiming to boost your career prospects or build high-performance web applications, this course is your gateway to becoming a proficient React developer.
All Project Intros are available for preview.
Here are some of the projects we are going to build in this course
1. Birthday Buddy
2. Tours
3. Reviews
4. Accordion
5. Menu
6. Tabs
7. Slider
8. Lorem Ipsum
9. Color Generator
10. Grocery Bud
11. Navbar
12. Sidebar and Modal
13. Strapi Menu
14. Cart
15. Unsplash Images
16. Contentful CMS
17. Mix Master
18. Tailwind Portfolio
19. E-Commerce
20. Jobster
21. Github Users
22. Jobster
23. Comprehensive Full Stack Next.js E-Commerce Project
FAQ area empty
Intro
Github Repository
Folder Structure
Remove Boilerplate
First Component
First Quiz
Extensions and Settings
Create Element Function
JSX Rules
Extensions, Settings, and JSX Best Practices
Nest Components
React Developer Tools
BookList
Nested Components and React Developer Tools
CSS
Local Images (public folder)
JSX - CSS
JSX - Javascript
CSS and Styling in React with JSX
Props - Basic Setup
Props - Somewhat Dynamic Setup
Props - Multiple Approaches
Children Prop
Understanding React Props
Simple List
Proper List
Key Prop
Object as a Prop
Understanding React Lists and Props
Event Basics
Form Submission
Form Submission - Button Example
Anonymous Function (arrow)
Components Feature
React Event Handling and Fundamentals
Prop Drilling
Complex Example - Intro
Complex Example - Bug
Complex Example - Fix
Prop Drilling in React
ES6 Modules
Local Images (src folder)
Numbers Challenge
Title Challenge
Import and Export Statements in React
Build Folder
Deployment
React Fundamentals
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"
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
React State Management Basics
Matching Project
Code Example
UseEffect - Fundamentals
UseEffect - Multiple Effects
UseEffect Fetch Challenge - Intro
UseEffect Fetch Challenge - Complete
UseEffect Clean Up Info
React UseEffect Quiz
Multiple Returns
Multiple Returns - Fetch Data Setup
Multiple Returns - Fetch Data
Fetch Error "Gotcha"
Order Matters
Fetch Function Location
React Hooks Rules
Conditional Rendering and Data Fetching Quiz
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
React Conditional Rendering and Short-Circuit Logic Quiz
Matching Projects
Project Structure - Folder Example
Project Structure - Named Exports
Project Structure - Export Group
React Project Structure and Export Methods Quiz
Leverage Javascript - Intro
Leverage Javascript - Challenge
Leverage Javascript - Complete
Leverage Javascript Quiz
Forms - Setup
Controlled Inputs
User Challenge - Setup
User Challenge - Add New User
User Challenge - Remove User
Multiple Inputs
Checkbox Input
Select Input
FormData API
Controlled Inputs and Forms in React
Matching Projects
UseRef - DOM Node
UseRef - Initial Render
React useRef Essentials
Matching Projects
Custom Hooks - Toggle
Custom Hooks - Fetch Person
Custom Hooks - Generic Fetch
React Custom Hooks Quiz
Context API - Challenge
Context API - Prop Drilling
Context API - Solution
Context API - Custom Hook
Context API - Global Setup
React Context API Quiz
Matching Projects
UseReducer - Intro
UseReducer - Challenge
UseReducer - Setup
Reducer Basics
Actions and Default State
Reset List
Remove Person
Import/Export
Understanding the useReducer Hook in React
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
React Performance Quiz
React Practice Test
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)
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
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)
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
Important Update !!!
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
Important Update !!!
React Query - Landing Page Setup
React Query - Landing Page Complete
React Query - Single Cocktail Page
Redirects
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
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
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
Update !!!
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
Important Info !!!
Project Overview
Setup
Create Pages
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
Supabase Password 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 Version Info !!!
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 !!!
Introduction
Section Repository !!! Important Info !!!
Install and Setup Section Repository
Files and Folders
Explore First Test File
Test Validation Details
Vitest Info
SearchByText Component
SearchByText Methods - Overview
SearchByText Methods - Test File
Test Driven Development Example
SearchByRole Component
SearchByRole Methods Overview
SearchByRole Test File
User Interaction Component
User Interactions - Test File
Form Testing - Sandbox
Test Empty Inputs
Test Typing In The Empty Inputs
Refactor
Form Testing - Remaining Tests
Reviews App - Logic
Reviews App - List Component Unit Tests
Reviews App - Form Component Unit Tests
Reviews App - Sandbox Component Integration Tests
Create and Configure Template for Testing React Applications
Important Info !!!
Overview and Setup
Shadcn-ui Overview and Setup
Layout, Home Page and Create Pages
Clerk Version 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
Database Hosting 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
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
Important Info
AWS Setup
S3 Project - Part 1
S3 Project - Part 2
AWS Lambda Project - Part 1
AWS Lambda Project - Part 2
AWS Lambda Project - Part 3
DynamoDB Project - Part 1
DynamoDB Project - Part 2
Product Management Project - Part 1
Product Management Project - Part 2
Product Management Project - Part 3
SQS Project - Part 1
SQS Project - Part 2
Strong Knowledge of HTML, CSS, JS is Required. ES6 is optional.
Make Great Projects Using React
1.2
1 Student
320 Courses
1253 Reviews
Xin chào các bạn, tôi là Nguyễn Đình Cường, một lập trình viên và giảng viên đam mê công nghệ với hơn 15 năm kinh nghiệm trong ngành công nghiệp phần mềm. Tôi tốt nghiệp từ Bưu Chính Viễn Thông và đã từng làm việc cho một số công ty công nghệ hàng đầu như FPT Software và VinGroup. Với chuyên môn chính là phát triển ứng dụng web, tôi đã làm việc với nhiều công nghệ như HTML, CSS, JavaScript, React cho front-end và Node.js, Express, MongoDB cho back-end. Không chỉ dừng lại ở việc viết mã, tôi còn yêu thích tìm hiểu sâu về thiết kế hệ thống và kiến trúc phần mềm. Tôi tin rằng quá trình học lập trình không chỉ đơn thuần là lý thuyết, mà còn là sự trải nghiệm thực tế và giải quyết vấn đề. Trong các khóa học của mình, tôi cố gắng cung cấp cho học viên những bài giảng thú vị và dễ hiểu, cùng với các bài tập thực hành giúp củng cố kiến thức. Tôi hy vọng rằng qua các khóa học của mình, bạn sẽ không chỉ học được cách viết mã, mà còn phát triển tư duy lập trình và kỹ năng giải quyết vấn đề. Hãy cùng nhau khám phá thế giới lập trình và biến ý tưởng của bạn thành hiện thực! Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại liên hệ với tôi. Tôi rất vui được hỗ trợ bạn trong hành trình học tập của mình!
View Details