🚀 Today we are going to create a Digital Marketplace using Next.js 14, Stripe Connect, Kinde, Prisma, Supabase, and Tailwind! Learn step-by-step and elevate your development skills.
👨🏻💻 GitHub Repository: https://github.com/ski043/marshal-ui-yt
Features:
🌐 Next.js App Router
🔐 Kinde Authentication with MFA
📧 Passwordless Auth
🔑 OAuth (Google and GitHub)
💰Payments using Stripe
🏪 Marketplace Functionality using Stripe Connect
🪝 Implementation of Stripe Webhooks
💿 Supabase Database
💨 Prisma Orm
✅ Server Validation using Zod
🗂️ File Upload with Uploadthing
🎨 Styling with Tailwindcss and Shadcn UI
📧 Sending Emails with Resend
🖼️ Creating Beautiful Emails using React-Email
😶🌫️ Deployment to vercel
React Streaming
Stripe Express Dashboard
Stripe Checkout page
Server side implementation
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
Supabase: https://supabase.com
Timestamps:
00:00 Intro
10:40 Installation
17:00 Creating Navbar
43:00 Authentication
01:10:00 Setup Sell Route
01:44:00 Setup File Uploads
02:00:00 Setup Database and ORM
02:24:00 Server Side Validation using Zod
03:25:00 Create Settings Route
03:46:00 Create Homepage
04:14:00 Create Product Id Page
04:47:00 Create Category Page
05:30:00 Protect Sell Route
05:40:00 Create My Products Route
05:48:00 Setup Stripe
06:43:00 Listen for Stripe Webhooks
07:10:00 Deploy to Vercel
08:04:00 Outro
Also, there is another course from Josh tried Coding
In this single video, we’re building an entire, modern E-Commerce Marketplace for digital products from beginning to end.
⭐Discord for questions/answers: / discord
⭐Payload: https://link.joshtriedcoding.com/payload
⭐GitHub Repo: https://github.com/joschan21/digitalh…
The features of our digital marketplace:
🛠️ Complete marketplace built from scratch in Next.js 14
💻 Beautiful landing page & product pages included
🎨 Custom artwork included
💳 Full admin dashboard
🛍️ Users can purchase and sell their own products
🛒 Locally persisted shopping cart
🔑 Authentication with sign- up verification email
🖥️ Learn how to self-host Next.js
🌟 Clean, modern UI using shadcn-ui
✉️ Beautiful emails for signing up and after purchase
✅ Admins can verify products to ensure high quality
⌨️ 100% written in TypeScript
🎁 …much more
Copy & Paste list to follow along with the video (optional):
Thanks so much to Payload for making this huge project possible by sponsoring this video!
Chapters:
0:00 – What you’ll learn & demo
7:21 – Creating the project together
11:17 – Making this look good right away
25:05 – Creating our landing page
44:40 – Creating our dynamic, beautiful navbar
1:32:44 – Creating our shopping cart
1:55:55 – Setting up our server
2:14:30 – Setting up our admin dashboard
2:34:39 – How do we handle the auth flow?
2:40:10 – Implementing our auth flow
3:03:29 – tRPC setup (super handy backend tool)
3:32:33 – Finishing our auth flow
4:03:28 – Sending a sign-up verification email
4:40:28 – Proper error handling & finishing auth
5:14:24 – Making our navbar truly dynamic
5:29:41 – How do we architect our data models?
5:37:09 – Modelling our data & enabling uploads
6:41:37 – Showing products in our store
7:19:49 – AirBnB-style image slider
7:45:24 – Creating our product detail page
8:13:16 – Persistent shopping cart logic
8:40:47 – Creating our checkout page
9:20:23 – Protecting our API with secured routes
9:24:41 – Creating the user checkout sessions
9:55:27 – How does our payment flow look like?
9:57:57 – Creating the thank-you page
10:39:16 – Listening for stripe webhook locally
10:47:05 – Creating the receipt email
10:54:47 – Deployment to receive webhook in production
11:10:44 – Final security tweaks
11:36:08 – Final styling tweaks
11:56:04 – Final check – awesome!
