🌟 Hey Everyone, Welcome back to the Channel. Today we are going to build an E-Commerce Store which has an admin dashboard and a storefront. To build/create this whole video we will use the newest tech on the market which means: Next.js, Kinde-Auth, Neon, Prisma, Stripe, Tailwindcss, Shadcn/UI, Vercel, Upstash and much more. This is a Full Stack tutorial, which means we will build everything from start to finish!
🚀 Kinde Auth: https://dub.sh/xeU8r3v
👨🏻💻 GitHub Repository: https://janmarshal.com/courses/build-...
🌍 My Website: https://www.janmarshal.com
✅ Follow me on X: https://x.com/janmarshaldev
📧 Business ONLY: [email protected]
Features:
🌐 Next.js App Router
🔐 Kinde Authentication with MFA
📧 Passwordless Auth
🔑 OAuth (Google and GitHub)
💰Payments using Stripe
🪝 Implementation of Stripe Webhooks
💿 Neon Database
💨 Prisma Orm
🚀 Upstash Redis for Cart functionality
📈 Recharts for displaying Charts
✅ Server Validation using Zod and Conform
🗂️ File Upload with Uploadthing
🎨 Styling with Tailwindcss and Shadcn UI
😶🌫️ Deployment to vercel
React Streaming
Stripe Checkout page
Server side implementation
Performance Optimized
Resources used:
Next.js: https://nextjs.org
Kinde: https://dub.sh/xeU8r3v
Tailwind.css: https://tailwindcss.com
Shadcn/UI: https://ui.shadcn.com
Stripe: https://stripe.com
Prisma: https://prisma.io
Neon: https://neon.tech/
Recharts: https://recharts.org/
Upstash: https://upstash.com/
Timestamps:
00:00 Intro
10:00 Installation
16:00 Start with Admin Dashboard Layout
43:00 Authentication with Kinde-Auth
01:07:00 Create Dashboard Index Page
01:24:00 Create Dashboard Orders Route
01:32:00 Create Dashboard Products Route
02:24:00 Setup Neon and Prisma
02:30:00 Store User in Database
02:45:00 Continue with Products Route
04:45:00 Create Banners Route
04:47:00 Create Category Page
05:25:00 Create Storefront
05:40:00 Create My Products Route
06:43:00 Create Product Id Route
07:15:00 Create Categories Route
07:37:00 Create Shopping Cart
08:56:00 Setup Stripe
10:23:00 Deploy to Vercel
10:44:38 Outro