Complete React and NextJS course with AI powered Projects

Introduction
1 Introduction to the course
2 Code files to download

Get started with react
3 What is react and why to use it
4 Whats with version of react and react docs
5 We need a bundler – Vite
6 Your first react app in browser
7 React in online code editors
8 Understand every file in react
9 Pick your path for react course
10 Build command in react
11 Take your react application to production

Component ecosystem of react
12 Configure tailwind in react application
13 Building card with tailwind
14 What are props in react
15 Building your first component
16 Custom components with props
17 Building faster with tailwind components
18 Overview of Shadcn components and setup
19 Project ahead – Get ready

Your first react project with state
20 Introduction to counter project with forms
21 Javascript run time – Node and Bun for react
22 Writing HTML elements and forms in react
23 Behind the scene of react state
24 What are hooks in react
25 Going in depth of useState hook
26 Handling form in react

Queue Management System Project
27 Queue Management project walkthrough
28 Planning the application workflow
29 Learn the data flow in components in react
30 Handle form and pass data to parent
31 A little trip to map and filter in javascript
32 Understand Conditional rendering in react
33 Debugging in multi components

Advance Props and components
34 Different types of props and Context
35 Setting up vite app for props in react
36 Design button variations with props
37 Children props in react
38 Complex prop with complex data in react
39 useRef and forwardRef in react
40 Context API and prop drilling
41 Create your first context api provider
42 Create your first custom hook
43 Using context in multiple components

Custom Hooks
44 Setting up application for custom hooks
45 Designing components for shopping cart
46 useEffect hook for interviews
47 Sync across the tabs
48 Handling cart operations
49 Finish up with custom hook features
50 Debugging the application – Thought process

State Management – Zustand
51 State Management libraries
52 Create your first store in Zustand
53 Subscribe only to what you need
54 One store with multiple slices
55 Async actions for API calls

Git and Github Section – Add on Section
56 Introduction to GIT series
57 Git init and hidden folder
58 Git commits and logs
59 Git internal working and configs
60 Git merge and git conflicts
61 Git Diff and stashing
62 Git rebase is not that scary
63 Insight of pushing code to github
64 How to make Pull Request and Open Source contribution

JS Refresher – Add on
65 Javascript story – from console to v8 engine
66 How javascript executes the code – Behind the scene
67 Datatypes, variables and constants in Javascript
68 Operations in javascript
69 Primitives in javascript
70 Non Primitives in javascript
71 Five challenges on conditions in javascript
72 Facing ten challenges in Array and methods
73 Introduction to loops in javascript
74 Defeat 6 loop challenges in Javascript
75 Ten loop challenges to learn all kind of loops in javascript
76 Function, arrow function, THIS and context in javascript
77 Higher order function and nested functions in javascript
78 A masterclass on prototypes in javascript
79 Functional constructor and Errors
80 Classes Objects and inheritance in javascript
81 Encapsulation, Polymorphism, Abstraction and getters setters
82 DOM and BOM basics in javascript
83 Solving 5 challenges of DOM
84 DOM finale with 5 more challenges
85 Asynchronous Javascript with event loop
86 Closures in javascript
87 Promises and promise chaining
88 Prototypal Inheritance in javascript
89 THIS and binding context
90 Aync-await and Promise all
91 Iterator and generators in javascript
92 ES6 Modules and CommonJS
93 Demo of project 1 – Todo with local Storage
94 Add a task in array
95 Handling local storage and DOM event
96 Event bubbling and CRUD operations
97 Demo of API handling project
98 Handle any type of API in your code
99 Demo of Project 3 Ecommerce app
100 Building Ecommerce cart page
101 Project 3 assignment
102 Demo of project 4 Expense Tracker
103 Expense tracker with local storage and event deligation
104 Demo of project 5 – quiz application
105 Building a complete quiz app

Next.js Getting Started & Fundamentals
106 Introduction to Next.js & Why Use Frameworks
107 What is Router in Next.js , App Router vs Page Router ( Which one to choose)
108 Installation & Writing Your First Hello world in Next.js
109 Next.js vs Just React
110 Next.js Folder Structure Breakdown

Project Structure & File System Routing
111 Folder and Files Conventions in Next.js
112 Types of Folders & Files in Next.js
113 Nested Routing and Dynamic Routing
114 Mini Project – Project Overview & Header Setup
115 Mini-Project- Building Footer
116 Mini Project – Building a Responsive Home Page
117 Mini-Project – Making Responsive About Page
118 Mini-Project- Making Responsive Contact Page

Advanced Routing
119 Nested Dynamic Routing
120 Catch All Segment and Optional Catch All Segment
121 Routes Group and Private Folder
122 Intercepting Routes – Same and One Level up of Intercepting Routes
123 Intercepting Routes – Two and Root Level up of Intercepting Routes
124 Introduction of Parallel Routes and Slots in Next.js
125 Unmatched Routes and Default Page Convention
126 Making Your Custom Not-Found Page

Rendering & Components Deep Dive
127 Server components
128 Client Components and Which one to choose ( Client vs Server)

Backend Route handlers
129 What is Route Handlers in Nextjs and GET endpoint in next.js
130 Creating POST endpoint in Next.js
131 Creating PUT endpoint in Next.js
132 Creating PATCH endpoint in Next.js
133 Creating DELETE endpoint in Next.js
134 Exploring Query Parameter
135 Headers in Next.js
136 Cookies in Next.js
137 Notes App – Project Setup & Database Connection
138 Notes App – MongoDB Model, Create API & Add Note Form
139 Notes App – Fetch & Display Notes with Cards, useState & Toasts
140 Notes App – Delete Endpoint & Removing Notes
141 Notes App – Edit Endpoint & Conditional Editing Form

Core Functions and Hooks in Next.js
142 Caching & Revalidate Made Easy – Next.js Extended Fetch API
143 Handling 404s with the notFound() Function in Next.js
144 useParam Hook
145 usePathname Hook
146 useQueryParams Hook
147 useRouter Hook – push, replace, back & forward , prefetch
148 Redirect Function in Next.js

Server Actions & App Optimizations
149 Deep Dive into Server Actions Why They Outshine API Routes
150 Mastering Fonts in Next.js Google & Local Made Easy
151 Forms in Next.js Prefetching, Navigation & Server Actions
152 Optimized Images in Next.js with the Image Component
153 Next.js Link & Script – Beyond a and script
154 Contact Form Project – Introduction, Setup & Database Connection
155 Contact Form Project – Contact Model, ShadcnUI & Form UI
156 Contact Form Project – Create Contact Server Action & Form Integration
157 Contact Form Project – Get Contact List & Render in Server Component
158 Contact Form Project – Update Contact Status & Revalidate Path
159 Contact Form Project – Contact Status Component, unstable_cache & Revalidate Tag

Middleware , Metadata and SEO
160 Static vs Dynamic Metadata Best Practices for Layouts & Pages
161 Title Metadata Deep Dive Default, Template & Absolute Properties Explained
162 How to Add and Update Favicons in Next.js Projects
163 Static Open Graph Image What It Is, Why It Matters, Pros & Cons
164 Dynamic Open Graph Images in Next.js Building an OG API with nextog

State Management & Data Fetching
165 Introduction to Tanstack Query and Initializing in Query provider in Nextjs App
166 useQuery in TanStack Query – Simplifies data fetching by removing boilerplate
167 useMutation in TanStack Query – Mutations, Query Invalidation, and Optimistic UI
168 What is Hydration & Caching in Next.js – a quick guide
169 ToDo App – DB, Schema & Query Provider Setup
170 ToDo App – Add Todo with Zod Validation & Mutation Hooks
171 ToDo App – Get & Display Todos with Zustand and TanStack Query
172 ToDo App – Mark Todo Completed with Mutations
173 ToDo App – Delete Todo with Mutations

Database & ORM Integration
174 ORM & Prisma in Next.js From Setup to Seeding
175 Creating & Fetching Data with Prisma ORM
176 Building a PostList Component with Prisma in Server Components
177 Introduction to Drizzle ORM with Next.js & Neon Setup + User Schema
178 CRUD Operations with Drizzle ORM & Next.js Server Actions
179 Creating User Management UI UserList + UserForm using shadcn and drizzle orm

Authentication & Authorization
180 Introduction to Authentication and Authorization in Nextjs
181 Mastering Better Auth in Next.js Google & GitHub Login with ShadCN UI
182 Configuring Better Auth DatabaseURL + Google & GitHub Secrets
183 Better Auth in Action Database Migration, API & Auth Client Setup
184 Better Auth Login UI ShadCN + Google & GitHub Sign-In
185 Better Auth Security Route Protection, Sessions & Sign-Out Flow
186 Clerk Authentication in Next.js Intro, Middleware Custom Sign-InUp Setup Guide

Payments & Billing
187 Introduction of Billing and Payment Modules and Stripe Component Setup
188 Next.js and Stripe Building a Payment Flow
189 Integrating Polar with Next.js and Better Auth
190 Next.js + Razorpay Order Creation and Payment Verification

Leetcode Clone
191 Introduction and Demo of Leetcode Project
192 Project Setup – Installing Nextjs and Initializing Shadcnui
193 Database Setup Made Easy Prisma Initialization & Dockerized DB for Next.js
194 Authentication Using Clerk -Clerk Setup, GitHub OAuth & Custom Auth Pages
195 User Onboarding with Prisma – Defining Schema & Server Actions
196 Building a Responsive Navbar & Homepage with DarkLight Mode + Role-Based Auth
197 Judge0 Setup Self-Hosting Locally or Cloud Integration via RapidAPI
198 Create Problem Defining Prisma Schema & Linking with Admin User
199 Problem Creation – Integrating Judge0 to Validate & Save Testcases in DB
200 Role-Based Access & UI for Problem Creation Form with Sample Problems
201 Problem Route Page Fetching All Problems with Table UI, Filters & Search
202 Problem Solving Page Fetch by ID with Header, LeftRight Sections & Full Layout
203 Submissions & TestCases Prisma Schema for Storing Execution Data
204 Submission History Fetch User-Specific Submissions & Build History Component
205 Prisma Schema & Backend Endpoints for Creating Playlists and Adding Problems
206 Create Playlist & Add Problems via Modal with Proper Logic Handling
207 Profile Page Fetch User Info, Stats, Submissions & Playlists

V0 Clone
208 Introduction and Demo of V0-Clone Project
209 Project Setup – Installing Nextjs and Initializing Shadcnui
210 Database Setup Made Easy Prisma Initialization & Dockerized DB for Next.js
211 Authentication Using Clerk – Clerk Setup, GitHub and Google Oauth & Custom Auth
212 Create a User-Friendly Header That Changes When Users Sign In
213 Building Your App’s Entry Point Modern Home Page with Templates & Project Form
214 Understanding and Implementing Background Jobs with Inngest
215 AI Background Jobs With Inngest
216 Hands-On with E2B Sandboxes – Dockerize and Run Next.js Apps
217 Inngest Agents Kit – Adding File, Terminal & API Tools to Your AI Agent
218 Build the Projects Backend with Prisma, Server Actions, and Background Jobs
219 Add Project List and Project View Components with Dynamic Project Route Segment
220 Build the Messages Backend with Prisma, Background Jobs with User and Assistant
221 Build File Explorer & Syntax Highlighting with Sandbox Integration on Iframe
222 AI Agents Setup – Title Generation & Response Summarization
223 Pricing Page with Payment Integration and Rate Limiting for Free and Pro Users
224 AI Agent Memory Setup – Long-Term Persistence with Inngest

T3-Chat Clone
225 Introduction and Demo of T3-Chat Project
226 Project Setup – Installing Nextjs and Initializing Shadcnui
227 Database Setup Made Easy Prisma Initialization & Dockerized DB for Next.js
228 Authentication Using Better-Auth ,GitHub & Custom Auth Pages
229 Designing an Interactive Chat Interface Sidebar, Header & Theming
230 Implementing Model Selection Openrouter, Fetching Models, and UI Setup
231 End-to-End Chat Setup Backend Schema, API, and UI Hooks
232 Building Chat Sidebar Data Fetch, Zustand Store, and Component Design
233 Active Chat Sidebar Items Dynamic Page & Messaging Components
234 Advanced Chat API Development Streaming, Message Conversion, and Persistence
235 Building Chat Page UI Dynamic Message Rendering and Auto Stream Trigger
236 Finalizing the Chat App Auto-Trigger Stream Response & Project Wrap-Up

Supabase MasterClass
237 Introduction and Demo of Project using Supabase
238 Installing Nextjs and Initializing Shadcnui
239 Next.js + Supabase The Ultimate Developer Onboarding Flow
240 User Authentication Mastery From Sign-Up to Logout in Next.js
241 Supabase in Action Build a Secure Blog with Storage, RLS & Editor.js
242 Supabase Secure Routes Fetch, Display, and Debug Blog Content

Convex MasterClass
243 Introduction and Project Demo
244 Convex Quickstart Next.js + shadcnui Setup in Minutes
245 Why Convex Master the Future of Realtime Full-Stack Development
246 User-Ready Convex Authentication + Profile Components in One Go
247 Convex in Action Schema, Functions, and UI for a Complete Todo App

Nextjs-16 MasterClass
248 Introduction to Next.js 16 which is now available with major improvements
249 Deep Dive into cacheComponents The Core of Next.js 16’s PPR Model
250 Next.js DevTools MCP – Enabling AI Agents to Understand Your App
251 Next.js Proxy Explained – Smarter Network Boundaries and Request Control

Farewell
252 Farewell