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!
Read more about the course
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
The No-BS Solution for Enterprise-Ready Next.js ApplicationsJack Herrington
Next40. Master Next.js 14 in 40 days of epic projectsReed Bargernextjs40.com
Build an LMS PlatformCode With Antonio
Building an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)Web Dev Cody
Next.js From Scratch 2024Brad Traversy
Build a Youtube CloneCode With Antonio
Shopify + Next.js + Tailwind CSS: Modern Ecommerceworkingwithshopify.com
