NextJS E-Com Masterclass: Learn The All New Next JS
Welcome to the NextJS E-Com Masterclass: Learn The All New Next JS!
Ready to create your very own online store? Join us on a fun-filled journey where you'll learn to build amazing e-commerce websites from start to finish. We'll show you how to use Next.js (a supercharged version of React), along with easy-to-understand tools like TypeScript, MongoDB, Cloudinary, and Mailtrap.
Don't worry if you're new to full stack development – I'll guide you every step of the way. By the end, you'll proudly have a full-stack skill set and the ability to craft impressive online shops. Get started now and let's bring your e-commerce dreams to life!
More
Why Next.js, you ask? Well, it's more than just another JavaScript library – it's a dynamic framework that supercharges your React applications with server-side rendering, efficient routing, and a fantastic developer experience. With the rise of e-commerce, having a deep understanding of Next.js is a game-changer, and that's exactly what you'll gain through our hands-on approach.
But that's not all – this course is designed to make you a well-rounded developer by introducing you to a variety of essential tools and technologies. From TypeScript, the user-friendly programming language, to MongoDB, a powerful and flexible database solution, you'll learn how to seamlessly integrate these components into your projects.
Cloudinary, the cloud-based image and video management platform, will become your ally in optimizing media for optimal performance and user experience. With Mailtrap, you'll master email testing and debugging, a crucial aspect of delivering reliable communication to your users.
Watch Online NextJS E-Com Masterclass: Learn The All New Next JS
| # | Title | Duration |
|---|---|---|
| 1 | Project Intro | 11:16 |
| 2 | Let Me Guide You | 02:01 |
| 3 | Node JS | 01:41 |
| 4 | Mongodb | 02:28 |
| 5 | VS Code | 01:36 |
| 6 | Node JS | 01:30 |
| 7 | Homebrew | 01:07 |
| 8 | Mongodb | 02:29 |
| 9 | Mongodb Compass | 01:04 |
| 10 | 12-Running Mongodb In The Background | 01:34 |
| 11 | VS Code | 00:49 |
| 12 | Open With VS Code | 01:01 |
| 13 | React TS Project Setup | 02:15 |
| 14 | Rendering App | 07:50 |
| 15 | Component & Props | 09:51 |
| 16 | Input & Change Handler | 09:43 |
| 17 | Project Setup | 11:35 |
| 18 | Layout | 03:42 |
| 19 | Navbar | 09:02 |
| 20 | Navbar Explained | 08:59 |
| 21 | Sign up Form | 04:20 |
| 22 | Form State & Validation | 08:27 |
| 23 | Rendering Errors | 09:24 |
| 24 | API Route | 07:33 |
| 25 | Connecting to Local Database | 04:16 |
| 26 | User Model | 07:39 |
| 27 | Creating New User | 05:27 |
| 28 | Hashing Password | 07:10 |
| 29 | Comparing Password | 04:52 |
| 30 | Sending Emails | 05:38 |
| 31 | ChatGPT & Email Verification Token | 10:45 |
| 32 | Generating Verification Token | 05:02 |
| 33 | Email Verification Page | 03:37 |
| 34 | Verify Token Route | 08:44 |
| 35 | Verifying Token | 06:07 |
| 36 | Rendering Notification | 04:33 |
| 37 | Next Auth | 11:25 |
| 38 | Sign in Route | 09:12 |
| 39 | Sign in UI | 08:09 |
| 40 | Auth Session | 05:36 |
| 41 | Auth Errors | 05:56 |
| 42 | Sign out | 04:43 |
| 43 | Guest Route | 07:06 |
| 44 | Customizing Session | 09:28 |
| 45 | Forget Password UI | 02:35 |
| 46 | Forget Password API Route | 07:06 |
| 47 | Sending Link to Email | 06:12 |
| 48 | Submitting Request | 04:59 |
| 49 | Validating Password Reset Token | 08:46 |
| 50 | Resetting Password | 15:23 |
| 51 | Production Build | 05:35 |
| 52 | Publishing Application | 09:53 |
| 53 | Refactoring Send Email | 10:55 |
| 54 | Sign in along with Sign up | 04:42 |
| 55 | Private Route | 05:17 |
| 56 | Fixing Auth Session Profile | 11:00 |
| 57 | Email Reverification | 13:38 |
| 58 | Admin Sidebar | 07:06 |
| 59 | Fixing Navbar | 06:55 |
| 60 | Product Table | 05:32 |
| 61 | Product Form | 11:36 |
| 62 | Product Model | 07:26 |
| 63 | Server Action | 07:32 |
| 64 | Validating Product Info | 05:50 |
| 65 | Using Validation Schema | 05:11 |
| 66 | Cloud Storage | 06:28 |
| 67 | Cloud Signature | 03:00 |
| 68 | Uploading Image | 08:40 |
| 69 | Creating New Product | 11:51 |
| 70 | About Action | 05:53 |
| 71 | Fetching New Products | 07:46 |
| 72 | Update Product Page | 08:15 |
| 73 | Update Product Form | 09:17 |
| 74 | Fixing Warning | 02:03 |
| 75 | Let's Understand How to update | 02:43 |
| 76 | Remove Image From Cloud | 01:55 |
| 77 | Removing Images | 13:36 |
| 78 | Removing Images From Cloud | 08:10 |
| 79 | Update Product 1 | 11:05 |
| 80 | Update Product 2 | 08:47 |
| 81 | Generating Dummy Product | 03:20 |
| 82 | Generating Multiple Dummy Products | 07:35 |
| 83 | Pagination | 07:42 |
| 84 | Fetching & Rendering Products | 06:46 |
| 85 | Few Little Fixes | 04:18 |
| 86 | Dynamic Route | 05:27 |
| 87 | Rendering Single Product | 07:10 |
| 88 | Hero Slider | 07:14 |
| 89 | Cart Model | 05:42 |
| 90 | Cart API 1 | 05:41 |
| 91 | Cart API 2 | 06:42 |
| 92 | Adding to Cart | 10:18 |
| 93 | Featured Product Model | 04:20 |
| 94 | Featured Product Form | 05:06 |
| 95 | Submitting Featured Product Form | 04:54 |
| 96 | Creating Featured Product | 04:50 |
| 97 | Featured Product Table | 01:56 |
| 98 | Rendering Featured Product | 02:59 |
| 99 | Update Featured Product 1 | 06:26 |
| 100 | Update Featured Product 2 | 05:02 |
| 101 | Deleting Featured Product | 07:12 |
| 102 | Few Little Fixes | 05:44 |
| 103 | Featured Product Slider | 07:44 |
| 104 | Responsive Slider | 02:47 |
| 105 | Horizontal Scroll Menu | 05:06 |
| 106 | Products by Category | 07:15 |
| 107 | Cart Items Count | 11:22 |
| 108 | Profile Page | 09:18 |
| 109 | Updating User Profile | 10:26 |
| 110 | New Profile Page UI | 08:00 |
| 111 | Loading UI | 08:29 |
| 112 | Error Page | 04:02 |
| 113 | Image Component | 07:20 |
| 114 | Cart Page | 03:58 |
| 115 | Fetching Cart Details | 18:45 |
| 116 | Updating Cart Items | 04:49 |
| 117 | Deleting Cart | 02:01 |
| 118 | Empty Cart Message | 02:25 |
| 119 | Setting up Stripe | 10:02 |
| 120 | Checkout Session URL | 15:31 |
| 121 | Final Checkout | 07:32 |
| 122 | Order Model | 07:27 |
| 123 | Stripe CLI | 04:09 |
| 124 | Using Webhook | 12:07 |
| 125 | Creating New Order | 10:41 |
| 126 | Recounting Stock | 04:05 |
| 127 | Instant Checkout | 07:55 |
| 128 | Creating Order | 06:58 |
| 129 | Fetching Orders of Profile | 05:08 |
| 130 | Rendering Orders | 04:17 |
| 131 | Orders UI Admin | 15:15 |
| 132 | Update Delivery API Route | 05:31 |
| 133 | Updating Delivery Status | 04:44 |
| 134 | Review Form | 05:57 |
| 135 | Review Model | 03:43 |
| 136 | Create/Update Review | 07:08 |
| 137 | Submitting Review Form | 05:47 |
| 138 | Fetching Review Details | 08:42 |
| 139 | Rendering Reviews | 08:28 |
| 140 | Average Rating | 09:11 |
| 141 | Rating Stars | 11:12 |
| 142 | Rendering Rating Stars | 05:45 |
| 143 | Fetching Sales History | 18:47 |
| 144 | Sales Chart | 08:57 |
| 145 | Sales Page UI | 04:02 |
| 146 | Fixing Review Issue | 06:32 |
| 147 | Fixing Sales Page Issue | 01:53 |
| 148 | Out of Stock | 02:15 |
| 149 | Fetching Similar Products | 03:12 |
| 150 | Rendering Similar Products | 08:58 |
| 151 | Latest Order inside Profile Page | 03:26 |
| 152 | History Model | 03:55 |
| 153 | Recording History | 08:50 |
| 154 | Admin Search | 08:19 |
| 155 | Search Bar | 04:49 |
| 156 | Search Filter UI | 02:35 |
| 157 | Search Filter | 18:38 |
| 158 | Searching Products | 09:21 |
| 159 | Clear Filter | 03:26 |
| 160 | Wishlist Button | 03:22 |
| 161 | Wishlist Api Route | 08:30 |
| 162 | Updating Wishlist | 04:04 |
| 163 | Fetching Wishlisted Products | 07:24 |
| 164 | Wishlisted Products UI | 07:44 |
| 165 | Updating Wishlist | 02:38 |
| 166 | Using Real Database | 11:55 |
| 167 | Custom Domain | 03:37 |
| 168 | Verify Domain Inside Mailtrap | 04:20 |
| 169 | Sending Real Emails | 10:49 |
| 170 | The Fix | 11:21 |
| 171 | Stripe Webhook | 07:15 |
Similar courses to NextJS E-Com Masterclass: Learn The All New Next JS
Next.js & React with ChatGPT - Development Guide (2023)
Real-Time Collaborative Apps with Next.js and Supabase
Complete Next.js Developer in 2023: Zero to Mastery
MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs
Next.js 14 & React - The Complete Guide
Building an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)
Next JS & Open AI / GPT: Next-generation Next JS & AI apps
Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)
Next.js Projects: Build an Issue Tracker
