In this single video, we’re building an entire, modern E-Commerce Marketplace for digital products from beginning to end.
⭐Discord for questions/answers: https://discord.gg/4vCRMyzgA5
⭐Payload: https://link.joshtriedcoding.com/payload
⭐GitHub Repo: https://github.com/joschan21/digitalhippo
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):
https://github.com/joschan21/digitalhippo/blob/master/COPY-PASTE-LIST.md
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!
