Welcome to the Course
Getting Started with React
Basic React Concepts
Component Project - Build A Simple Website
Intro to States in React
Intro React Project - Task Tracker App
Free Resource - Build A Quiz App (optional)
React Component Lifecycle
Routing in React
Advanced Forms in React
State Management
Beginner Project - Build A Blog App
Other Useful React Hooks
Advanced State Management - Zustand
Advanced Data Handling with React Query
Intermediate Project - Build a FullStack Game Manager
-
What are we building? (2:54)
-
Project Demo (2:26)
-
Project Structure (5:28)
-
Setup REST API (12:43)
-
Set Up React Project (6:02)
-
Setup the Project Routes (9:12)
-
Fetch List of Games (8:13)
-
Display List of Games (1:44)
-
Create Game Page (20:03)
-
Invalidating Queries (5:34)
-
Update Game Page (6:05)
-
Fetch Game By Id (3:47)
-
Reseting the Form (7:21)
-
Update Game Endpoint (4:28)
-
Update Game Mutation (2:49)
-
Invalidating More Queries (2:58)
-
Creating the Delete Game Endpoint (1:58)
-
Adding the Delete Button (5:28)
-
Creating the Theme Manager (11:59)
-
Creating the 404 Page Not Found (2:19)
Thinking In React - Best Practices
Transition to TypeScript in React
-
Why Typescript? (3:16)
-
Basic Typescript Types (6:23)
-
Functions in Typescript (2:41)
-
Custom Typescript Types (4:34)
-
Unions (3:33)
-
Interfaces (5:31)
-
Intersections (1:54)
-
Enums (2:40)
-
Setting Up Typescript in React (4:05)
-
Props using Typescript (3:39)
-
States using Typescript (3:30)
-
Forms using Typescript (2:02)
-
Zustand using Typescript (2:16)
Advanced Final Project - Real Time Chat Messaging App
-
What are we building? (4:44)
-
Project Demo (4:05)
-
Project Setup (4:42)
-
Setting up SupaBase (8:27)
-
Creating the Login Page (8:19)
-
Login Page Form Validation (5:15)
-
Setting Up Supabase Auth (9:42)
-
Supabase Auth Listener (12:04)
-
Setting Up Project Routes (11:08)
-
Chat Room Page (7:45)
-
Creating the Database Table (17:42)
-
Loading the Chat Messages (11:04)
-
Displaying the Messages (9:44)
-
Realtime Messages (9:34)
-
Create a New Room Page (11:08)
-
List Available Rooms (8:00)
Testing Strategies in React
Free Resource - What is New With React 19? (optional)
How To Deploy a React Website?
What Now?
