Build a Complete E-Commerce Shop with Next.js 14, Tailwind, React | Full Course 2024

In this single video, we're building an entire, modern E-Commerce Store for custom phone cases from beginning to end.

Highlights:
💻 Beautiful landing page included
🎨 Custom artworks made by a professional illustrator
💳 Secret admin dashboard to manage orders
🖥️ Drag-and-drop file uploads
🛍️ Customers can purchase directly from you
🌟 Clean, modern UI on top of shadcn-ui
🛒 Completely custom phone case configurator
🔑 Authentication using Kinde
✉️ Beautiful thank-you email after purchase
✅ Apple-inspired configurator design
⌨️ 100% written in TypeScript
🎁 ...much more

Copy & Paste list to follow along with the video (optional):

Thanks so much to Kinde for making this huge project possible by sponsoring this video!

-- Chapters
0:00 YO WADDUP
1:33 Demo
8:56 Getting started & basic design
19:56 Making a beautiful hero section
56:42 Authentication
1:06:24 Animated landing page section
2:00:00 Finishing our landing page
2:20:00 Creating our file upload page
3:35:53 Creating our configurator page
6:34:15 Creating our configuration summary page
7:28:33 Integrating secure payments
8:27:28 Creating an auth callback
8:50:20 Creating our stripe webhook
9:34:19 Creating our thank you page
10:30:00 Creating a secret admin dashboard
11:15:00 Writing our thank-you email
11:37:30 Final touches & improvements
11:47:45 Final deployment
11:54:00 Final review
11:59:00 Outro - thank you for following along!

[joshtriedcoding]

i did NOT forget my youtube password, this just took forever to make, appreciate you <3

[JeanBaptisteChabi]

This is what I call tutorial 🥰 no cloning or copying code around, just pure educational content. Thanks man

[thiagotriedcoding]

Josh, your friends are so lucky to have you as a friend. Thank you for sharing your knowledge!

[nikunjmehra]

Super hyped about this build Danke schoen!

[Rohit-kilj]

This is unreal. Best project I have ever seen in youtube

[swajpz]

if you are confused why is josh using <img/>

from discord:
josh — 07/05/2024 10:23
Next image uses lazy loading to optimize site performance, which is very handy but can also look pretty horrendous in some scenarios. The normal html image sometimes looks better

[emilianobregains]

I'll be putting some things here I found useful to add while following this tutorial:

- One can use the class "size-4" to apply the classes "w-4 h-4" when the width and height are the same (There is from "size-1" to "size-96").
- On conditional rendering (like the "Dashboard" button on "isAdmin") if nothing is returned on false, one may use the double ampersand "&&" to save the return "null". i.e. "{isAdmin && (<Whatever></Whatever>)}".

[DiogoLScarmagnani]

...and, 4 weeks later, that's it! I finally concluded it. Very helpful tutorial. I have already made your messaging video months ago, and it's great how this time you bring here various new concepts and tools (comparing to the messaging video), like Prisma. Prisma is very useful lib for database, I really liked it. And, of course, I loved to learn how to implement payment solution with Stripe. Thank you, Josh.

[mehdichamiani]

Words can not describe this kind of generousity from a developer on youtube, thanks Josh, you are well deserved for everything you get❤

[FelipeSantosDev]

The man is back with one more amaaaazing project! Thanks!

[springerbarry]

Oh Josh! You make this world a better place! So far you are the best I met in all Youtubers!

[smsibasish]

this is next level great! kudos to you for putting out high quality content back to back

[richard__cod]

Thank you so much, my brother. I don't usually comment, but I watched the entire video, and the creativity, time, and effort you must have put into creating something of such high quality is truly incredible.

[MahmoudSAli-txpp]

I would like to express my sincere gratitude for the videos you create. I thoroughly enjoy watching them and I have learned so much from them. I am truly grateful for the knowledge and entertainment you provide. Thank you for sharing your expertise and passion with the world.

thx ❤

[RockstahRolln]

Your video just happenend to pop up on my feed and I want to take the time to say how INCREDIBLE this was! You did a terrific job of explaining each step. I have taken the time to click on the Kinde link to say Thanks to you. But also I would like to say a huge Thank You here for sharing this incredible video with us.

[wesom-]

Amazing! It blows my mind that all of that is available for free online thank you so much! <3

[andrewladd]

Yoooo Josh! Working my way through this now, but I gotta say man.. that Reviews section on the landing page is *chefs kiss*.

[ziwcpge]

Thank you so much for this incredibly useful tutorial! Your explanation was clear and easy to follow, and it really helped me. I appreciate the time and effort you put into making this video. Keep up the fantastic work!

[dysper]

This is so crazy i never see that before. This course is unreal ! thanks bro

[fiimble]

Josh,
You just raised the bar!
Thanks!