Complete React, Next.js & TypeScript Projects Course 2025

Introduction
1 Main Course Repository
2 What is React
3 Goals
4 Structure
5 Requirements
6 Discord Channel
7 Video Blur Fix
8 Course Review

Dev Environment
9 Workflow Info
10 Browser
11 VS Code
12 Terminal
13 Nodejs
14 CreateReactApp

React Fundamentals
15 React Fundamentals
16 Extensions Settings and JSX Best Practices
17 Nested Components and React Developer Tools
18 CSS and Styling in React with JSX
19 Understanding React Props
20 Understanding React Lists and Props
21 React Event Handling and Fundamentals
22 Prop Drilling in React
23 Import and Export Statements in React
24 Intro
25 Github Repository
26 Folder Structure
27 Remove Boilerplate
28 First Component
29 Extensions and Settings
30 Create Element Function
31 JSX Rules
32 Nest Components
33 React Developer Tools
34 BookList
35 CSS
36 Local Images public folder
37 JSX CSS
38 JSX Javascript
39 Props Basic Setup
40 Props Somewhat Dynamic Setup
41 Props Multiple Approaches
42 Children Prop
43 Simple List
44 Proper List
45 Key Prop
46 Object as a Prop
47 Event Basics
48 Form Submission
49 Form Submission Button Example
50 Anonymous Function arrow
51 Components Feature
52 Prop Drilling
53 Complex Example Intro
54 Complex Example Bug
55 Complex Example Fix
56 ES6 Modules
57 Local Images src folder
58 Numbers Challenge
59 Title Challenge
60 Build Folder
61 Deployment

Backroads Application
62 Intro
63 Github Repository
64 Setup
65 Install
66 SRC Boilerplate
67 Structure
68 Components
69 Nav Logo
70 Smooth Scroll
71 Page Links
72 Social Links
73 Hero and About Components
74 Title Component
75 Services Component
76 Tours Component
77 Footer Component
78 Alternative Approach Page Links Component
79 Alternative Approach More Components
80 Continuous Deployment Setup
81 Continuous Deployment Benefits
82 Continuous Deployment Gotcha

VITE
83 VITE Intro
84 VITE Install Setup

React Hooks and Advanced Topics
85 React Practice Test
86 React State Management Basics
87 Controlled Inputs and Forms in React
88 React useRef Essentials
89 Understanding the useReducer Hook in React
90 Intro
91 Github Repository
92 Setup
93 Overview
94 Error Example
95 UseState Fundamentals
96 Initial Render and Rerenders
97 General Rules of React Hooks
98 UseState Array Example Setup
99 UseState Array Example Complete
100 UseState Extra Info
101 UseState Object Example Setup
102 Auto Batching Info
103 UseState Object Example Complete
104 UseState Set Function Gotcha
105 UseState Functional Update Form
106 UseState SetTimeout Example
107 Matching Project
108 Code Example
109 UseEffect Fundamentals
110 UseEffect Multiple Effects
111 UseEffect Fetch Challenge Intro
112 UseEffect Fetch Challenge Complete
113 UseEffect Clean Up Info
114 Multiple Returns
115 Multiple Returns Fetch Data Setup
116 Multiple Returns Fetch Data
117 Fetch Error Gotcha
118 Order Matters
119 Fetch Function Location
120 React Hooks Rules
121 Vanillajs Optional
122 Short Circuit Overview
123 Short Circuit Examples
124 Ternary Operator
125 Toggle Challenge
126 User Challenge
127 UseEffect Cleanup Function SetupChallenge
128 UseEffect Timer Example
129 UseEffect Event Listeners Example
130 You Might Not Need an Effect
131 Matching Projects
132 Project Structure Folder Example
133 Project Structure Named Exports
134 Project Structure Export Group
135 Leverage Javascript Intro
136 Leverage Javascript Challenge
137 Leverage Javascript Complete
138 Forms Setup
139 Controlled Inputs
140 User Challenge Setup
141 User Challenge Add New User
142 User Challenge Remove User
143 Multiple Inputs
144 Checkbox Input
145 Select Input
146 FormData API
147 Matching Projects
148 useRef DOM Node
149 useRef Initial Render
150 Matching Projects
151 Custom Hooks Toggle
152 Custom Hooks Fetch Person
153 Custom Hooks Generic Fetch
154 Context API Challenge
155 Context API Prop Drilling
156 Context API Solution
157 Context API Custom Hook
158 Context API Global Setup
159 Matching Projects
160 UseReducer Intro
161 UseReducer Challenge
162 UseReducer Setup
163 Reducer Basics
164 Actions and Default State
165 Reset List
166 Remove Person
167 ImportExport
168 Matching Projects
169 Performance Intro
170 Component Rerenders
171 React Dev Tools
172 Lower State
173 Lower State Challenge
174 Reactmemo
175 Mind Grenade
176 UseCallback Hook
177 UseCallback Hook Common Use Case
178 UseMemo Hook
179 UseTransition Hook
180 React Suspense

Fundamental Projects With Steps
181 Important Info
182 Intro
183 Setup
184 Setup Figma File
185 Birthday Buddy Setup
186 Birthday Buddy Import List
187 Birthday Buddy Render List
188 Birthday Buddy Clear List
189 Birthday Buddy CSS Optional
190 Tours Setup
191 Tours Fetch Tours
192 Tours Render Tours
193 Tours Remove Tour
194 Tours Read More
195 Tours Refetch
196 Tours CSS Optional
197 Reviews Setup
198 Reviews Data
199 Reviews React Icons
200 Reviews First Person
201 Reviews Prev and Next
202 Reviews Check Number
203 Reviews Random Person
204 Reviews Modulus Operator
205 Reviews CSS Optional
206 Questions Setup
207 Questions Render List
208 Questions Toggle Info
209 Questions Alternative Setup
210 Questions CSS Optional
211 Menu Setup
212 Menu Title Component
213 Menu Render Items
214 Menu Unique Categories
215 Menu Display Categories
216 Menu Filter Items
217 Menu CSS Optional
218 Tabs Setup
219 Tabs Fetch Jobs
220 Tabs Display Job
221 Tabs Duties and UUID Library
222 Tabs Button Container
223 Tabs Current Item
224 Tabs CSS Optional
225 Slider Setup
226 Slider Structure
227 Slider CSS
228 Slider Initial Logic
229 Slider Current Item and PrevNext
230 Slider Autoslide autoplay
231 Slider Library Info
232 Slider React Slick Setup
233 Slider React Slick Complete
234 Lorem Ipsum Setup
235 Lorem Ipsum Structure
236 Lorem Ipsum Submit Form
237 Lorem Ipsum Nanoid Library
238 Lorem Ipsum CSS Optional
239 Color Generator Setup
240 Color Generator Form Structure
241 Color Generator HTML Color Input
242 Color Generator Valuesjs Library
243 Color Generator Render List
244 Color Generator React Toastify
245 Color Generator ChangeAdd Color
246 Color Generator Clipboard API
247 Color Generator CSS Optional
248 Grocery Bud Setup
249 Grocery Bud Form Component
250 Grocery Bud Add Item
251 Grocery Bud Render Items
252 Grocery Bud Single Item
253 Grocery Bud Remove Item
254 Grocery Bud Local Storage
255 Grocery Bud Edit Item Global Setup
256 Grocery Bud React Toastify
257 Grocery Bud CSS Optional
258 Navbar Setup
259 Navbar Data
260 Navbar Initial Setup
261 Navbar Initial Setup CSS
262 Navbar Fixed Setup
263 Navbar Dynamic Setup
264 Navbar Question
265 Navbar Complete App
266 SidebarModal Setup
267 SidebarModal Components
268 SidebarModal Global Context
269 SidebarModal Home Component
270 SidebarModal Modal Component
271 SidebarModal Sidebar Component JSX
272 SidebarModal Sidebar CSS
273 SidebarModal Sidebar Toggle
274 Strapi Setup
275 Strapi Data
276 Strapi Global Context
277 Strapi Components
278 Strapi Navbar CSS
279 Strapi Hero
280 Strapi Sidebar JSX
281 Strapi Sidebar CSS
282 Strapi NavLinks
283 Strapi PageId Logic
284 Strapi Submenu JSX
285 Strapi Submenu CSS
286 Strapi Hide Submenu Part 1
287 Strapi Hide Submenu Part 2
288 Cart Intro
289 Cart Setup
290 Cart Global Context
291 Cart UseReducer Setup
292 Cart Setup Actions
293 Cart Data Structures
294 Cart Map Object
295 Cart Switch to Map
296 Cart Clear Cart
297 Cart Remove Item
298 Cart Increase Amount
299 Cart Decrease Amount
300 Cart Calculate Totals
301 Cart Fetch Structure
302 Cart Fetch Complete
303 Cart CSS Optional

Axios HTTP Library
304 Intro
305 Starter
306 Setup
307 GET Request
308 Setup Headers
309 POST Request
310 Global Default
311 Custom Instance
312 Interceptors

React Query
313 Intro
314 Starter
315 Useful Info
316 Server BackEnd Setup
317 Tasks App FrontEnd Setup
318 Axios Custom Instance
319 HTTP Methods
320 API Docs
321 React Query Intro
322 React Query Install and Setup
323 Important Update
324 First Query
325 Render Data
326 Error Handling
327 Thunder Client
328 Create Task Challenge
329 Create Task Initial Setup
330 UseMutation Helpers
331 Edit Task Challenge
332 Edit Task Complete
333 Delete Task
334 Refactor
335 Alternative Server Setup

Unsplash Images Project with React Query
336 Intro
337 Download
338 Starter
339 Structure
340 Dark Theme Initial Setup
341 Dark Theme AddRemove Class
342 Dark Theme CSS
343 Dark Theme Users Prefers Dark Mode CSS
344 SearchForm
345 Unsplash API Info
346 Unsplash API Register
347 Obtain Correct URL
348 Setup React Query
349 Setup Query
350 Render Images
351 React Query Dev Tools
352 Setup Global SearchValue
353 UseQuery Fix
354 Dark Mode Javascript Check
355 Important Update
356 Local Storage
357 ENV Variables
358 Deploy
359 CSS Optional

Contentful CMS Project
360 Intro
361 Starter
362 Setup
363 Hero Component
364 Undraw
365 Projects Data
366 Headless CMS
367 Create Contentful Account
368 Content Type
369 Content
370 Contenful API Docs
371 Contentful SDK Install and Setup
372 Fetch Projects
373 Render Projects
374 Deploy
375 Webhooks
376 CSS Optional

MixMaster React Router 64 and React Query
377 Intro
378 Setup
379 Starter
380 SPA and React Router Info
381 Basic Router
382 Setup Pages
383 Link Component
384 Nested Pages
385 Nested Pages More Complex Example
386 Navbar
387 Styled Components Setup
388 Styled Components Wrapper
389 Navbar CSS optional
390 About Page
391 Page Layout
392 Error Page
393 Error Page CSS
394 Loader Info
395 Loader Landing Page
396 CocktailDB Overview
397 Important Update
398 Fetch Drinks
399 Single Page Error
400 CocktailList
401 CocktailCard
402 CocktailList and CocktailCard CSS optional
403 Global Loading and Context
404 Single Cocktail Setup
405 Single Cocktail Render
406 Ingredients Challenge
407 Additional Check
408 Single Cocktail CSS optional
409 React Toastify Setup
410 Newsletter Structure
411 HTML Form Submission
412 Action Setup
413 Submit Form
414 Handle Errors
415 Navigation State
416 SearchForm Structure
417 SearchForm Complete
418 SearchForm CSS optional
419 React Query Setup
420 Important Update
421 React Query Landing Page Setup
422 React Query Landing Page Complete
423 React Query Single Cocktail Page
424 Redirects

WebDev Portfolio Tailwind CSS
425 Project Intro
426 Tailwind Intro
427 Project Setup
428 Additional Assets
429 Navbar
430 Hero
431 Custom Class
432 Skills Section
433 About Section
434 Projects Section

Redux Toolkit
435 Intro
436 Github
437 Setup
438 Install
439 Store
440 First Slice
441 Redux Dev Tools
442 useSelector
443 Hero Icons
444 Cart Items Local Data
445 Cart Container
446 Cart Item
447 Reducers Clear Cart
448 Reducers Return State
449 Reducers Remove Item
450 Reducers Increase and Decrease
451 Reducers Calculate Totals
452 Modal Setup
453 Modal Complete
454 Important Update
455 createAsyncThunk
456 createAsyncThunk More Options
457 Builder Callback Notation

Comfy Store React Router 64 RTK Axios React Query
458 Intro
459 DaisyUI
460 Assets
461 VITE TailwindCSS
462 DaisyUI Setup
463 Install Dependencies
464 Create Pages
465 Route Structure
466 Error Page
467 Form Input
468 Login Page
469 Submit Button
470 Register Page
471 Custom Class
472 Header Component
473 Navbar Structure
474 NavLinks Component
475 Toggle Component
476 Add Theme
477 Set Theme
478 About Page
479 Hero Component
480 Base URL
481 Landing Loader
482 Featured Products
483 Format Price
484 Fetch Single Product
485 Render Single Product
486 Single Product Colors
487 Single Product Amount
488 Generate Amount Inputs
489 Products Page Setup
490 Products List
491 Products Container
492 Filters Search Input
493 Filters Select Input
494 Filters Range Input
495 Filters Checkbox Input
496 Global Loading
497 Filters Params
498 Pagination Setup
499 Pagination Complete
500 Redux Toolkit Setup
501 Add To Cart Functionality
502 AddItem Reducer
503 Refactor and Local Storage
504 Clear Remove and Edit Reducers
505 Cart Page
506 Cart Totals
507 Cart Items Setup
508 Cart Items Functionality
509 User Slice Setup
510 Refactor Theme Toggle
511 Logout and Access User
512 Register User Docs
513 Register User Complete
514 Login User Setup
515 Access RTK Store in Action
516 Login Page Action Complete
517 Login User Reducer
518 Demo User
519 Checkout Page Setup
520 Checkout Page Restrict Access
521 Create Order Request
522 Checkout Form Setup
523 Checkout Form Complete
524 Auth Errors
525 Orders Request
526 Orders Page Setup
527 Orders List
528 Complex Pagination
529 React Query Setup
530 React Query Landing Page
531 React Query Single Product Page
532 React Query All Products Page
533 React Query Orders Page
534 React Query Remove Queries

Important Info
535 Course Update New Content

Typescript Fundamentals
536 Intro Setup Files and Folders
537 Type Annotations and Type Inference
538 Union and Any Type
539 Arrays and Objects
540 Functions Params and Function Returns
541 Optional Default and Rest Parameters
542 Objects as Parameters and Excess Property Checks
543 Type Alias and Intersection Type
544 Interface Fundamentals
545 Interface Advanced
546 Tuples and Enums
547 Type Assertion Type Unknown and Type Never
548 ES6 Modules
549 Type Guarding First Part
550 Type Guarding Second Part
551 Generics
552 Fetch Data and Declaration Files
553 Classes
554 Tasks Project First Part
555 Tasks Project Second Part

React with Typescript
556 Setup And Fundamentals
557 UseState and Events
558 Challenge and Solution
559 Context API and useReducer
560 Fetch Data
561 Redux Toolkit
562 Tasks Project

Nextjs Tutorial with Typescript
563 Update
564 Nextjs Info Setup Home Page and Link Component
565 Nested Routes
566 Layout File Navbar Fonts and Metadata
567 Server Components vs Client Components
568 Fetching Data
569 Nested Layouts and Dynamic Pages
570 Images
571 More Routing Options
572 Server Actions
573 Actions File
574 Fetch Users and Revalidate Cache
575 useFormStatus and useFormState
576 Delete Button Hidden Input and Bind Method
577 Route Handlers First Part
578 Route Handlers Second Part
579 Middleware Local Build and Cache

Nextjs Store Project
580 Important Info
581 Project Overview
582 Setup
583 Create Pages
584 Shadcnui Install and Setup
585 Button Component
586 Setup Components
587 Container Component
588 Navbar Component Blueprint
589 Logo Component
590 NavSearch and CartButton Components
591 Shadcn Change Theme
592 Shadcn Toggle Dark Mode
593 LinksDropdown Component Initial Setup
594 Supabase Password Info
595 Create Supabase Project
596 Setup Prisma
597 Connect Prisma to Supabase
598 Prisma CRUD
599 Practice Writing Prisma Queries
600 Product Model
601 Seed Database
602 Create More Components
603 SectionTitle and EmptyList Components
604 Fetch Products Functions
605 Featured Products
606 Products Grid Component
607 Hero Component
608 Hero Carousel Component
609 Loading Container
610 ProductsContainer Component
611 ProductsList Component
612 NavSearch Component
613 Fetch Product Details
614 Products Details Page Setup
615 Supabase Bug
616 Deploy on Vercel
617 Setup Toast Component
618 Clerk Version Info
619 Clerk Authentication
620 SignOut Link Component
621 UserIcon Component
622 LinksDropdown Component Complete
623 Test Auth Provider in Production
624 Admin Pages Structure
625 Restrict Access to Admin Pages
626 Create Product Page Setup and Faker Library
627 FormInput Component
628 Rest of Form Components
629 SubmitButton Component
630 FormContainer Component
631 CreateProductAction First Approach Helper Functions
632 Zod Library and Product Schema
633 Custom Error Messages
634 Image Validation
635 Upload Image to Supabase Bucket
636 Fetch Admin Products
637 Icon Button and Delete Product Action
638 Complete Admin Products Page
639 Remove Old Image from Supabase Bucket
640 Fetch Admin Product Details
641 Edit Product Page
642 Update Image Container Component
643 Loading Table Component
644 Favorite Model
645 Favorite Buttons and Actions
646 FavoriteToggleButton and FavoriteToggleForm Components
647 Toggle Favorite Action
648 Favorites Page
649 React Share Library
650 Review Model
651 Rating Input and Submit Review Components
652 Create Review Action
653 Rating and Comment Components
654 Product Reviews Component
655 Product Rating Component Complete
656 Fetch User Reviews and Delete Review Action
657 Reviews Page
658 Restrict Access to Submit Review Button
659 Cart and CartItem Model
660 Select Product Amount Component
661 Add To Cart Component
662 Add To Cart Action First Part
663 Add To Cart Action Second Part
664 Cart Page and Cart Totals Component
665 Cart Items List Component
666 Delete Cart Item Action
667 Edit Cart Item Action
668 Bug Fix
669 Order Model and Order Actions
670 Orders and Sales Pages
671 Stripe Setup and API Keys
672 Refactor Order Model and createOrderAction
673 Checkout Page
674 Payment Route
675 Confirm Route
676 Test Stripe Functionality
677 Deploy Bug Fix
678 Atlas Setup Optional Video

Search Github Users GraphQL Apollo Client Typescript ShadncnUI
679 Section Repository Important Info
680 Install and Setup
681 Search Form
682 GraphQL Overview
683 Apollo Client and Query
684 User Profile Stats Container and User Card Components
685 Utils Functions
686 Charts and Loading Component

React Application Testing with RTL and Vitest
687 Introduction
688 Section Repository Important Info
689 Install and Setup Section Repository
690 Files and Folders
691 Explore First Test File
692 Test Validation Details
693 Vitest Info
694 SearchByText Component
695 SearchByText Methods Overview
696 SearchByText Methods Test File
697 Test Driven Development Example
698 SearchByRole Component
699 SearchByRole Methods Overview
700 SearchByRole Test File
701 User Interaction Component
702 User Interactions Test File
703 Form Testing Sandbox
704 Test Empty Inputs
705 Test Typing In The Empty Inputs
706 Refactor
707 Form Testing Remaining Tests
708 Reviews App Logic
709 Reviews App List Component Unit Tests
710 Reviews App Form Component Unit Tests
711 Reviews App Sandbox Component Integration Tests
712 Create and Configure Template for Testing React Applications

Extra Projects
713 Course Complete
714 Extra Projects

Nextjs Jobify Project
715 Important Info
716 Overview and Setup
717 Shadcnui Overview and Setup
718 Layout Home Page and Create Pages
719 Clerk Version Info
720 Clerk Auth and Nav Links
721 Dashboard Layout Sidebar and Navbar
722 Dropdownlinks Component Change Theme and Toggle Theme
723 Shadcnui Form Component and Types
724 Custom Form Components
725 Create Job Functionality Continued
726 Database Hosting Info
727 Prisma Render and Create Job Action
728 Toast Component React Query Setup and Create Job Form Complete
729 Get All Jobs Action and Page Setup
730 Search Form
731 Jobs List and Job Card
732 Job Info and Delete Job
733 Single Job Page and Edit Job Complete
734 Seed Database
735 Stats and Charts Actions
736 Stats Cards Loading Skeleton and Charts Container
737 Pagination Button Container
738 Pagination Complex Button Container

Jobster
739 Intro and Setup
740 Structure and Styled Components
741 Setup Pages
742 Error and Register Page first part
743 Register Page second part
744 Important Info
745 HTTP Requests
746 Login User and Dashboard Setup
747 Navbar and Toggle Functionality
748 Small and Big Sidebar
749 Profile Page
750 Add Job Page First Part
751 Add Job Page Second Part
752 Create Job
753 All Jobs
754 Job Component
755 Edit Job and Test User
756 Stats Container
757 Recharts Library Update
758 Charts Container
759 Search Container
760 Pagination
761 Query Params
762 Refactor and Logout User
763 Debounce

Github Users
764 Setup and React Router
765 First Pages Context API and Mock Data
766 Info Card and Followers Components
767 Charts First Part
768 Calculate Stats First Part
769 Calculate Stats Second Part
770 API Requests
771 API Requests Second Part
772 Authentication
773 Authentication Second Part and Deploy

Bonus
774 Bonus