Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Ultimate Next.js Course 2024 Edition
Chapter 1 - Next.js 14 Basics
1. Project Introduction (9:06)
2.Setting Up Node (3:11)
3.Project Structure (5:57)
4.Routing (5:20)
5.Layout (5:18)
6.Page Component (10:00)
7.Route Groups (1:44)
8.Parallel Routes (3:16)
9.Loading Page (1:20)
10.Error Page (1:21)
11.Route Handlers (2:08)
12.Middleware (2:48)
Chapter 2 - Caching, Data Fetching and Mutations
1. Caching (7:14)
2.Setting up NeonDB with Drizzle (4:41)
3. Schemas and Migrations (7:00)
4.Server Actions (6:32)
5.Mutating and Revalidating (5:29)
6.Progressively Enhanced Forms (4:02)
Chaper 3 - Tailwind and shad/cn
1. Tailwind Intro (8:25)
2. Tailwind Config and extensions (3:09)
3.Layers and components (2:30)
4.Adding shadcn to our project (6:18)
Chapter 4 - Authentication with Next-Auth V5
1.Which Auth Solution To Use? (4:43)
2. Next-Auth V5 (7:32)
3.Setting Up Google and Github Providers (4:56)
4. Save Users With Drizzle Adapter to your DB (7:30)
5.Creating Our Navbar (8:56)
6. Sign In Button (4:42)
7.Login Page (18:10)
8.Styling Our Login Page (10:32)
9. React-Hook-Form + Zod Part 1 (11:10)
10. React-Hook-Form + Zod Part 2 (12:12)
11.Creating Our Sign In Action (7:20)
12.Form Error and Success Components (8:58)
13.Creating Our Register Page (12:24)
14.Register Action (12:32)
15.Email Token Drizzle Schema (5:00)
16.Generate Verification Tokens (14:01)
17.Resend (15:16)
18. Confirm Users Email Address (13:20)
19. Login Authorize (14:40)
20.Password Reset Form (19:47)
21.Finishing Up Password Resets + HTTP and Websockets (22:52)
22. User Dropdown Menu (19:08)
23. Theme Your App (18:49)
24. User Preferences (29:05)
25. JTW and Session Callbacks (10:25)
26. Update User Preferences (14:35)
27. Two Factor Tokens (30:39)
28. Setting up UploadThing (16:05)
Chapter 5 - Admin Dashboard
1. Animations with Framer Motion (25:19)
2. Create Product Form (19:44)
3. Drizzle Product Schema (3:41)
4. Integrating TipTap Rich Text Editor (19:53)
5. Create/Edit Product Server Action (9:57)
6. Sonner Notifications (8:28)
7. Setting Up Tanstack Table (19:59)
8. Edit and Delete Products (13:14)
9. Finishing our Server Actions (13:47)
10. Filtering and Pagination (11:07)
11. Drizzle One/Many Relations (11:50)
12. Product Variant Wrapper (15:17)
13. Server Component Shananigans (4:43)
14. Variant Form (14:18)
15 Input Tags (18:43)
16. Variant Images with Uploadthing (34:47)
17.Variant Actions (21:52)
18.Deleting Variants (5:18)
19.Indexing With Algolia (14:33)
20. Shifting Layout Fix (2:20)
21. Bad State Call Fix (1:49)
Chapter 6 - Our Front End
1. Displaying our products (17:20)
2. Adding our products (3:50)
3. URL Routing with Product Picker (27:18)
4. Shad/CN Carousel (17:32)
5. Review Form (19:37)
6. User Review Action (13:34)
7. New Drizzle Kit Config (4:41)
8. Star System (19:46)
9. Review Chart (16:50)
10. Zustand (16:40)
11. Add To Cart (16:04)
12. Remove From Cart (14:35)
13.Price Animation and Local Storage Persist (25:20)
14.Cart Progress (17:23)
15.Order Table (4:52)
16.Stripe Elements (35:21)
17.Creating Orders (17:06)
18.Order Confirmation Page (9:22)
19.Order Details Dialog (23:59)
20.Quality Of Life Improvements (15:27)
21. Stripe CLI and Webhooks (17:40)
22. Analytics Page (24:09)
23. Recharts (36:38)
24. Cart Progress Animation (11:56)
25. Algolia Search (25:35)
26. Tag System (15:15)
Chapter 7 - Deployment
Deployment (20:30)
Chapter 5 - E-Commerce Project LEGACY
1. Getting Started (0:36)
2. Setting up Next with Tailwind (6:01)
3. Prisma Schemas (15:34)
4. Next Auth With Prisma (21:38)
5. Creating A Stripe Customer (15:51)
6. Creating our Navbar (23:16)
7. Fetching Stripe Products (16:31)
8. Formatting Prices (10:10)
9. Styling our home page (9:50)
10. Product Description Page (23:00)
11. State Managment With Zustand (16:17)
12. Adding Products to Cart (26:39)
13. Cart UI (9:57)
14. Adding and Removing Products (12:10)
15. Empty Carts (4:44)
16. Adding Google Fonts (6:02)
17. Total Price Format (4:03)
18. Framer Motion (16:09)
19. Keeping It Mobile Friendly (3:34)
20. Getting Started with Stripe (17:10)
21. Stripe Order Data (26:56)
22. Saving orders (32:48)
23. Rendering Stripe Form (30:33)
24. Success Page (28:36)
25. Stripe Webhooks (26:46)
26. Dashboard Page (30:19)
27. More Dashboard Styling (6:57)
26. Lottie Animations (11:09)
27. Daisy UI (17:21)
28. Adding a dropdown (10:01)
29. Dark Light Mode (18:04)
30. Stripe Darkmode (13:14)
31. Adding Different Fonts (3:55)
Teach online with
1. Animations with Framer Motion
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock