Learn how to create a contemporary and complex e-commerce application for online shopping from the ground up, employing the advanced technology stack. Everything is covered in this course, the “The Ultimate Fullstack Next.JS 14 Course 2024 Edition” course, including Next. js 14. 2 for the front end, Next-Auth V5 for authentication, and powerful back-end by using Drizzle ORM with PostgreSQL. You will also be able to effectively handle state using Zustand and React Query, design visually appealing layouts with Shad/CN, and subsequently apply some animations with Framer Motion.
"Next.js provides a seamless approach to routing that eliminates the need for additional setup. Each page is defined as a separate file in the pages directory, making the project structure straightforward and easy to follow." - LogRocket Blog
Optimize your application with features such as the powerful Algolia search engine, which provides fast and relevant results and convenient image management through uploading. With the help of React Hook Form, you will efficiently manage forms, and user input will become as simple as pie. Further, the smooth payment process with the help of Stripe is explained, and how to make it safe to process payments on an e-commerce site is also discussed.
You can create and host a competent online store at the end of this course, The Ultimate Fullstack Next.JS 14 Course 2024 Edition. You will also be taught how to push your app, domain setting, and production methods so that you can be assured when launching a project.
The Ultimate Fullstack Next.JS 14 Course 2024 Edition Table of Contents:
- Chapter 1 - Next.js 14 Basics
- Preview1. Project Introduction (9:06)
- Preview2. Setting Up Node (3:11)
- Start3. Project Structure (5:57)
- Start4. Routing (5:20)
- Start5. Layout (5:18)
- Start6. Page Component (10:00)
- Start7. Route Groups (1:44)
- Start8. Parallel Routes (3:16)
- Start9. Loading Page (1:20)
- Start10. Error Page (1:21)
- Start11. Route Handlers (2:08)
- Start12. Middleware (2:48)
- Chapter 2 - Caching, Data Fetching and Mutations
- Start1. Caching (7:14)
- Start2. Setting up NeonDB with Drizzle (4:41)
- Start3. Schemas and Migrations (7:00)
- Start4. Server Actions (6:32)
- Start5. Mutating and Revalidating (5:29)
- Start6. Progressively Enhanced Forms (4:02)
- Chapter 3 - Tailwind and Shad/CN
- Start1. Tailwind Intro (8:25)
- Start2. Tailwind Config and Extensions (3:09)
- Start3. Layers and Components (2:30)
- Start4. Adding Shad/CN to Our Project (6:18)
- Chapter 4 - Authentication with Next-Auth V5
- Preview1. Which Auth Solution to Use? (4:43)
- Start2. Next-Auth V5 (7:32)
- Start3. Setting Up Google and Github Providers (4:56)
- Start4. Save Users with Drizzle Adapter to Your DB (7:30)
- Start5. Creating Our Navbar (8:56)
- Start6. Sign In Button (4:42)
- Start7. Login Page (18:10)
- Start8. Styling Our Login Page (10:32)
- Start9. React-Hook-Form + Zod Part 1 (11:10)
- Start10. React-Hook-Form + Zod Part 2 (12:12)
- Start11. Creating Our Sign In Action (7:20)
- Start12. Form Error and Success Components (8:58)
- Start13. Creating Our Register Page (12:24)
- Start14. Register Action (12:32)
- Start15. Email Token Drizzle Schema (5:00)
- Start16. Generate Verification Tokens (14:01)
- Start17. Resend (15:16)
- Start18. Confirm Users Email Address (13:20)
- Start19. Login Authorize (14:40)
- Start20. Password Reset Form (19:47)
- Start21. Finishing Up Password Resets + HTTP and Websockets (22:52)
- Start22. User Dropdown Menu (19:08)
- Start23. Theme Your App (18:49)
- Start24. User Preferences (29:05)
- Start25. JWT and Session Callbacks (10:25)
- Start26. Update User Preferences (14:35)
- Start27. Two Factor Tokens (30:39)
- Start28. Setting Up UploadThing (16:05)
- Chapter 5 - Admin Dashboard
- Start1. Animations with Framer Motion (25:19)
- Start2. Create Product Form (19:44)
- Start3. Drizzle Product Schema (3:41)
- Start4. Integrating TipTap Rich Text Editor (19:53)
- Start5. Create/Edit Product Server Action (9:57)
- Start6. Sonner Notifications (8:28)
- Start7. Setting Up Tanstack Table (19:59)
- Start8. Edit and Delete Products (13:14)
- Start9. Finishing Our Server Actions (13:47)
- Start10. Filtering and Pagination (11:07)
- Start11. Drizzle One/Many Relations (11:50)
- Start12. Product Variant Wrapper (15:17)
- Start13. Server Component Shenanigans (4:43)
- Start14. Variant Form (14:18)
- Start15. Input Tags (18:43)
- Start16. Variant Images with UploadThing (34:47)
- Start17. Variant Actions (21:52)
- Start18. Deleting Variants (5:18)
- Start19. Indexing with Algolia (14:33)
- Start20. Shifting Layout Fix (2:20)
- Start21. Bad State Call Fix (1:49)
- Chapter 6 - Our Front End
- Start1. Displaying Our Products (17:20)
- Start2. Adding Our Products (3:50)
- Start3. URL Routing with Product Picker (27:18)
- Start4. Shad/CN Carousel (17:32)
- Start5. Review Form (19:37)
- Start6. User Review Action (13:34)
- Start7. New Drizzle Kit Config (4:41)
- Start8. Star System (19:46)
- Start9. Review Chart (16:50)
- Start10. Zustand (16:40)
- Start11. Add to Cart (16:04)
- Start12. Remove from Cart (14:35)
- Start13. Price Animation and Local Storage Persist (25:20)
- Start14. Cart Progress (17:23)
- Start15. Order Table (4:52)
- Start16. Stripe Elements (35:21)
- Start17. Creating Orders (17:06)
- Start18. Order Confirmation Page (9:22)
- Start19. Order Details Dialog (23:59)
- Start20. Quality of Life Improvements (15:27)
- Start21. Stripe CLI and Webhooks (17:40)
- Start22. Analytics Page (24:09)
- Start23. Recharts (36:38)
- Start24. Cart Progress Animation (11:56)
- Start25. Algolia Search (25:35)
- Start26. Tag System (15:15)
- Chapter 7 - Deployment
- Start Deployment (20:30)
- Chapter 8 - E-Commerce Project LEGACY
- Start1. Getting Started (0:36)
- Start2. Setting Up Next with Tailwind (6:01)
- Start3. Prisma Schemas (15:34)
- Start4. Next Auth with Prisma (21:38)
- Start5. Creating a Stripe Customer (15:51)
- Start6. Creating Our Navbar (23:16)
- Start7. Fetching Stripe Products (16:31)
- Start8. Formatting Prices (10:10)
- Start9. Styling Our Home Page (9:50)
- Start10. Product Description Page (23:00)
- Start11. State Management with Zustand (16:17)
- Start12. Adding Products to Cart (26:39)
- Start13. Cart UI (9:57)
- Start14. Adding and Removing Products (12:10)
- Start15. Empty Carts (4:44)
- Start16. Adding Google Fonts (6:02)
- Start17. Total Price Format (4:03)
- Start18. Framer Motion (16:09)
- Start19. Keeping It Mobile Friendly (3:34)
- Start20. Getting Started with Stripe (17:10)
- Start21. Stripe Order Data (26:56)
- Start22. Saving Orders (32:48)
- Start23. Rendering Stripe Form (30:33)
- Start24. Success Page (28:36)
- Start25. Stripe Webhooks (26:46)
- Start26. Dashboard Page (30:19)
- Start27. More Dashboard Styling (6:57)
- Start28. Lottie Animations (11:09)
- Start29. Daisy UI (17:21)
- Start30. Adding a Dropdown (10:01)
- Start31. Dark Light Mode (18:04)
- Start32. Stripe Darkmode (13:14)
- Start33. Adding Different Fonts (3:55)
Who is this course for?
- Aspiring Full-Stack Developers: anyone wish to gain profound knowledge in contemporary web development and an all-around skill set that will allow me to create a high-quality website.
- Frontend Developers: Wishing to extend the information acquired to the backend technologies.
- Backend Developers: Concerned about frontend technologies and developing full-stack applications.
- E-Commerce Entrepreneurs: Seeking web hosting of their online stores for development and performance.
