Full Stack Ecommerce Store With Admin Dashboard From Scratch - Next.js, Prisma, Stripe, Tailwind

Join the Slack Developer Program for exclusive access to beta features, sandboxes, resources, and more: api.slack.com/developer-progr...
Next.js Simplified Course: reactsimplified.com/#next-js-...
Creating an ecommerce site is not easy. There are so many different things that go into even a simple ecommerce site from an admin dashboard, to payment processing, to account management, and so much more. In this video I will go through everything you need to do in order to get up and running with your very first ecommerce shop entirely from scratch with Next.js, Tailwind, Prisma, and TypeScript.
📚 Materials/References:
Next.js Simplified Course: reactsimplified.com/#next-js-...
GitHub Code: github.com/WebDevSimplified/n...
Intl Number Formatter Video: • Formatting Is So Easy ...
Zod Crash Course Video: • Learn Zod In 30 Minutes
Next.js Caching Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00:00 - Introduction
00:00:52 - Sponsor
00:02:10 - Database Setup
00:12:05 - Admin Dashboard Page
00:37:24 - Admin Product Pages
01:34:36 - Admin Authentication
01:45:22 - Customer Home Page
02:00:58 - Customer Products Page
02:03:32 - Next.js Caching
02:10:08 - Customer Product Purchase Page
03:02:28 - Admin Customers Page
03:04:18 - Admin Sales Page
03:06:48 - Purchase Receipt Email
03:24:38 - Customer My Orders Page
#Ecommerce #WDS #NextJS

[@WebDevSimplified]

Join the Slack Developer Program for exclusive access to beta features, sandboxes, resources, and more: api.slack.com/developer-program?AMER_US_EN_Q1_SLKAW_Developer_Program_Web_Dev_Simplified&

[@klkiessertggksmsmsjfldd]

its free?

[@Slackhq]

@@klkiessertggksmsmsjfldd It sure is!

[@anhqui19822011]

I've been looking for this project for a long time. Thank Kyle for awesome project!

[@ahmedyasser5058]

We've been waiting for something like this so long bro thanks for everything you do on the channel ♥

[@MrCuteguylol]

Thank GOD. I have a Next JS project in my job and your video came up. Damn.

[@violinsheetmusicblog]

This video omits a lot of details for those just starting out, but it's great for those who already have worked with most of these tools in the past. Thanks!

[@AgustinAstronomy]

thanks for this amazing video. So many key concepts are covered here, like redirects from api route to pages, prisma, server actions. Thanks!

[@themks8452]

this is going to be the best video on this channel

[@whitewalker19]

man mad respect..this is what I was searching for

[@7doors847]

This looks like a fun project. Looking forward to it. Thanks!

[@anirudhnomula2942]

A wholesome project with almost a lot of best practices covered , definetly recommend to watch this ❤

[@anand_dudi]

This is most useful tutorial on nextjs i have ever seen as senior react node developer

[@thabosiphiwemngoma1859]

About time. Thank you for this. Now you should try other backends like python. Your breakdowns are amazing

[@andrewtcoder]

Amazing video!!! Thank you so much! You're the best teacher!!!!

[@EcomCarl]

Incredible tutorial on building an efficient eCommerce site with minimal code! Leveraging tools like Next.js and Prisma not only streamlines development but also enhances scalability and maintenance 👍.

[@lenaggar]

I really admire your speed from thought to implementation and iteratively moving forward while not spending too much time considering different options in each crossroads you hit I usually get stuck on these mini decisions along the way while working. Perfectionism harms my velocity quite a lot! Maybe you can talk about how you manage the need for perfectionism! (if you do face it of course 😅)

[@telur_ramen]

thank you so much for this amazing course!

[@404-not-found-service]

Thank you very much for the video, this type of content is appreciated.

[@berkayakbey1080]

i love the way you shake your head left and right like an aggressive crocodile trying to rip off a flesh from a dear

[@utku3463]

haha deme deme ayıp

[@the__jive]

Thank you very much Kyle! I learned a lot from this video, ❤.

[@WebDevSimplified]

I'm glad I could help!

[@jrom_ai]

AMAZING tutorial!!!

[@nasa-eemadadam2213]

Awesome tutorial 😁 need more nextjs project 😊😊😊

[@user-ru8hn9hb5c]

You are one of the best on KZbin

[@laduniestu]

wish you all the besttt 🔥🔥🔥

[@nelsonyu4112]

Thank you Sir! Really appreciate the time you put into this tutorial, it saved me a lot of time from navigating best practices. I tried the Gen AI tools but they are not doing nearly as well as this because of new paradigms like App Router.

[@jmgutierrez962]

Thank You sir..This is really really helpful..

[@AlexanderMihailov-tx8pk]

thats amazing! Thank you

[@joelmason6818]

Something I would greatly appreciate is that you create another version of this for solid items shipped with a popular shipping calculator included. Thus would be cool and would help plenty of people selling actual items vs. digital downloads. Thx in advance!

[@X-razcal-X]

Great video. Thank you 🎉

[@MrGunshippilot]

Great content! Thank you very much for doing this. How would you perform client-side validation, e.g. similar to react-hook-form?

[@joel-rg8xm]

Gem video to bookmark, thx

[@raphauy]

Awesome!!! Thank you very much!!!

[@husseinsalim2398]

Sounds great

[@kiliansprotte6592]

Great video, thanks! How about making a follow-up video on comparing the different state management approaches with regard to component tests? :) I think this could be an important factor and another way to highlight the differences.

[@floriangogea9712]

Thanks a lot! You're so kind...

[@justinhoward6384]

Kyle drops another hit

[@christenw.1726]

Thank you ❤

[@Habesha_Today]

Dev please do more videos on Next-js and TypeScript especially on Ecommerce-Site and other complex projects

[@JediMediator]

Have you considered doing any tutorials on building some kind of shipping integration? I looked into it recently and found it very intimidating.

[@artemonstrick]

WOW ALMOST 4 HOURS OF MY FAVORITE WOBBLY HEAD TALKING! WOHOOOOOOOO!1111

[@asyncrohan]

Hey kyle thanks for this one , can you guide us how to improve our css as a full stack dev because we focus on logic more than ui

[@adejoh6650]

This is a great project!! Thanks🙏 You talk as fast as Ben Shapiro...no doubt you would be the Fastest Rapper on Earth if you switch jobs!!!

[@codeconcise365]

You might think Kyle is ELISA with his robotic head movement and fast-pace speech

[@wilsontomisin9582]

Thanks bro🎉🎉🎉

[@user-ru8hn9hb5c]

When I finish this, I'll try adding product attributes, more fields, etc.

[@ShadowsPowerFy]

Thanks a lot!

[@Sokoladomeistrai-kq1to]

Thank you!!!

[@ashil816]

Great content, thank you. Imagine we are planning a React Native app for this shop, utilizing the same API/database. What are the best practices in Next.js 14 for exposing the API to external users? Is it feasible for Next.js 14 to handle both scenarios, or should we opt for a dedicated backend?

[@frontend_ko]

thanks for really nice video. can you create a video for i18n in app router? it's too complicated in app router my only concern for this tutorial is that the middleware for admin auth was done in dev mode. i'm not sure it's gonna really work in production mode because everything is cached by default.

[@ricardoestrella95]

No hate, just suggestion. I appreciate this video, but just as js mastery, you should also upload that kind of videos, just as this one! Nice video :)

[@anirudhnomula2942]

wow that was so fast for me , guess im a noob afterall , right now studied and coded almos till 43 min , will take this forward tomorrow , thanks for this video , wanted to start my own ecom site

[@anirudhnomula2942]

checking in again today , completed till 51:33 , was trying to load till 1:20:00 but it was way too much for me so instead tried coding and ended till 51 min , thank you so much for packing a lot of stuff , i have a newfound respect for u

[@anirudhnomula2942]

i tried a lot to complete this in one go from 51 min but ending giving up at 2hr:15min~:, atleast this i coded till that point , alot of things seem more clear when we code it out , thanks again for all ur effort , u really made it simple, true to ur word , gn

[@anirudhnomula2942]

Ok today its finally done , i gave up to code along when u started web hooks 🙃 but scanned fro there till the end as it was mostly react email and a bit of same which was done with admin products page but finally i completed this whole video feels so nice to be able to check this of the list

[@anirudhnomula2942]

So it took me 10 days to actually complete it 😂 and u did it in 4~5 hrs 😮 glad i found this video learnt a lot from this video , really appreciate it from bottom of my heart

[@thiagosullivan]

That white Jackson is awesome 🥰

[@M1a2n3o43]

hey man while you were making the add new product form, i tried to it my own way using the form component by shadcn just as it says in the docs and it was imposible.i even posted a question in stackoverflow and people had a hard time finding the issue. could you maybe make a video about the proper way to make forms with shadcn with form and react hook form? Would be a gem of a video. thanks anyway great tutorial.

[@waelhlali2196]

Great work, can you do it with mern stack, redux and redux toolkit ?

[@klkiessertggksmsmsjfldd]

finished this. You should extend this sample with user login, purchases and cart. PEACE

[@siehrichmond7693]

Hello Walker 🤠, can you add life simplification to your work...🤓.You make it easier

[@user-km2qp6un8x]

Hi, thanks for this. Stupid question - any particular reason why you aren't using arrow functions for components, i.e. ?

[@pablom8854]

Some relevant timestamps for me 5:15 price in cents 9:17 restrict 9:40 download verification 12:30 shad config

[@lostinthenarrativve]

Fuuuuck me this is what we've all been waiting for in years

[@YT-su2sq]

I would love to.

[@Nodsaibot]

whats with the PascalCase styling on elements? lol also you should try and make your cam 3x smaller when coding

[@savindupasintha]

Brother I need to know some thing. I am currently in singapore and no time to do self learning things. 1. can you tell use to your daily life how going ? 2. How you manage your time , also you doing job ?

[@alijalloul122]

when caching the calls to the db, why not use memo as a simpler way to cache the fetched data till the user either exists the website or manually reloads?

[@masadamsahid]

If you guys using yarn and encounter error ERR_ESM_REQUIRED when running the react-email like bellow: [your_nextjs_app_path]/node_modules\ora\index.js:65 if (process.platform === 'win32') { ^ Error [ERR_REQUIRE_ESM]: require() of ES Module ... You might have to delete your node_modules directory and then reinstall all the dependencies USING NPM (npm install), and DON'T use YARN (yarn). And then try to run the react-email script as in the video (npm run email). Hope this helps you well.

[@buraxta_]

🔥🔥🔥

[@NoIngNames]

So, am I missing something or upon successful purchase no record is made in Order table of the database?

[@joshuastephenkartes4171]

Hey, Kyle! So, I'm not sure this question has been asked yet in the comments. You're using the "use server" directive in /src/app/admin/_actions/products.ts, but then you're using the client-side `File` type in the `fileSchema` validation. I'm not sure if I missed something earlier in the video that would prevent the "File is not defined" error due to referencing `File` in a server component ...?

[@alecdorasandler6690]

Email service bookmark 2:57:00

[@vert-vh2wh]

@webdev with the picture uploaded is it possible that I can use api that give me the product image if I type product name or sku

[@DeaViNG]

are there alternatives to stripe I could use if it is not supported in my country?

[@user-le8kh8cr4n]

well done, can i re-design and deploy for business use ??

[@klkiessertggksmsmsjfldd]

no

[@user-le8kh8cr4n]

@@klkiessertggksmsmsjfldd why not ??? so how do i get it business ready ??

[@beamngdrivepr]

Is processing possible to upload a video playlist?

[@bryandelacruz9066]

Hi, may i know what database used in this project? thank you

[@JBUDDTV]

how do you santize the data before putting into the database ?

[@codewithguillaume]

❤❤❤

[@allusio]

Why you use react caching and next unstable_cache. It is looks like they do the same thing.

[@kenthefley2226]

Is this a production ready app?

[@Tanner-cz4bd]

What do you use for auth

[@user-hm1ld3bg3g]

How page loading function works well? It seems that there is no particular code that implements this function but it works well without any states

[@abdulkerimyalcn3911]

i agree you. How does loading.tsx work we didin't import it anywhere

[@matthiasnienhaus7735]

20:18 How do you split the string into multiple lines within the cn() function? I get an unterminated string literal error 1002 when I try that.

[@jamesb1664]

If you notice it happen when he saves the changes - he has prettier extension enabled to ‘format on save’

[@rajeshkannan748]

text-muted-forehand is tailwind classes ? I couldn't find that in tailwind css doc

[@algaldia]

Didn't find either.

[@kyriakosbekas]

They are classes that are generated due to the tailwind config file. When you setup shadcn/ui, some variables for colors, animation, etc. are added there and therefore you have access to these generated classes

[@algaldia]

@@kyriakosbekas Thank you!!

[@Reacts441]

Is this project available in GitHub please?

[@LoeRL1]

Could anyone explain what's happening here in terms of database? I normally use mongodb but in the bits of the video I have watched so far there are no calls to a database.

[@toptry5]

he use prisma sql database, which setup locally

[@Rasinzz]

How can I log into the admin page?

[@AntonVanjukhin]

Can somebody help me please to add multiple images in product?

[@bilal5488]

Next please mern project

[@jamesmassa1999]

Please do this project in vanilla js.

[@JustinK0]

thats something for you to learn and do yourself based on this video. Use your problem solving skills. I created this project from this video in angular and used a different database. Its much better than blindly copying the video

[@truestoriesz]

@@JustinK0 How I can do that? I tried to do this project in angular but I got confused in a lot of ways :'( maybe my solving skills are just not in this level yet.

[@yukiritosurada8392]

Please create infinitely nested comments using Next.js and MongoDB. Thank you🙏🙏

[@douglast.9790]

is using next auth?

[@7th.convict]

Navlink text wont even show for me.

[@romanmed9035]

state manager is not have? ex redux.

[@ruanxun9454]

I have the same layout as you do, however, the layout.tsx in (customerFacing) does not work, I have to remove the parenthesis for it to work, it seems like a conflict between the root layout and the layout inside (customerFacing), anyone facing the same issue?

[@ruanxun9454]

I figured it out, just forgot to delete the page.tsx file in the app root

[@qanyz7534]

Really great project! But please remember to breathe..

[@vangore2781]

Hi 🙂

[@mohamedsamahi5225]

Has any one faced the problem of shadcn overwrites the tailwind config file configurations, resulting in having tailwind classes not to applied?, Kindly, provide me with the solution if you come over it :)

[@brokegod5871]

I ran into this issue few days ago, unfortunate as it is, that's the default behaviour of installing shadcn, it overwrites your tailwind config... So yeah next time either freshly start off with shadcn instead of installing it midway or keep your project in github to revert from such cases

[@mitalicops8538]

Each time i click submit in the products, i get an error File is not defined, I believe its a zod issue, i dont know how to fix it i tried different ways still doesn’t work The File issue it refers to is in the actions folder which is a server file. Zod is trash PLZ HELP!

[@BrandonFunk]

It seems like the tutorial you're following assumes that the code will be executed in a browser environment, where the File object is available. However, in your case, you're using "use server", which implies that the code is intended to run in a server-side environment, such as Node.js, where the File object is not available. To adapt the code to run in a server-side environment, you need to handle file uploads differently. Instead of relying on the File object, you would typically handle file uploads using libraries like multer in Node.js. from CHATGPT, why is it working for him but im following exactly and it won't work?!

[@mitalicops8538]

@@BrandonFunk well i left the project after trying really hard to fix it, i even cloned his repo still the same issue. This guy cant be like the top creators of JS like JSMastery and Code with Antonio, he is trying to be like them but clearly ; I ain’t pleased. If he ends up making these mistakes in the future, then forget it.

[@BrandonFunk]

@@mitalicops8538 def try to take it as a learning experience, not everything is going to go perfectly everytime, you need to overcome problems and find solutions, ive tried to stop walking away from projects because i get stuck and think its impossible, don't give up ! :)

[@nestofbleu4094]

@mitalicops8538 Try to add this at the top import {File} from "buffer" and it will work normally.

[@ismailanajar]

upload files locally doesn't work in production. the same for sqlite db

[@WebDevSimplified]

It depends on how you host your project but generally I agree that using something like Postgres is better for a production database and a tool like S3 for file uploads. For this project since the number of files uploaded is quite small it doesn't matter much how you host them as long as they can be easily and quickly downloaded by users

[@ismailanajar]

​@@WebDevSimplified Thank you for your prompt response. I appreciate your assistance. I tried using Vercel and Render. With Vercel, the upload itself doesn't work, while with Render, the upload works, but the image isn't accessible

[@realtalk3736]

MAAAAAAAAAAAAAAAAAAN

[@rishawraj]

at 2:37:26, when i click the purchase button it show an error: Uncaught (in promise) Error: PrismaClient is unable to run in this browser environment, or has been bundled for the browser (running in `unknown`).

[@klkiessertggksmsmsjfldd]

going to follow along and this scares me

[@rishawraj]

@@klkiessertggksmsmsjfldd it was my fault. I misspelled "use server" in a component.

[@rishawraj]

@@klkiessertggksmsmsjfldd but If you're from india you will have to add more fields to the form , to follow indian regulations for online payment.

[@ajaydeepsinghrajpoot]

@@rishawraj i guess this is why i'm still getting unknown error occurred.

[@rishawraj]

@@ajaydeepsinghrajpoot you just need to add an addressElmement in form.

[@tumbleweed_wagon2113]

Could someone explain why he does product == null instead of !product ?

[@tumbleweed_wagon2113]

I know why because the db or whatever can return null, but he doesn't want to explicitly check if it equals null because who knows, I'm guessing?

[@AhmedHuzain]

@@tumbleweed_wagon2113 !product will return true if product holds a falsey value (empty string, int of 0, null, undefined, etc..) I'm assuming, he explicitly wants to check if the product equals null and not just a falsey value.

[@squidypop]

Can I follow along if I only know JS and not TS?

[@klkiessertggksmsmsjfldd]

sure

[@wesammuneer672]

yes, i learned a lot of stuff only from this tutorial, I'm currently on 2:37:00 as a prove 😂😅

[@klkiessertggksmsmsjfldd]

@@wesammuneer672 any issues with admin auth? I can't get it work :(

[@jimmytan6543]

How can we deploy and host this web app? Thanks

[@klkiessertggksmsmsjfldd]

vercel or similar