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

[@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&

[@kiwiwiwiwiwiwi2088]

its free?

[@Slackhq]

@@kiwiwiwiwiwiwi2088 It sure is!

[@wall-v]

How come, when you are styling the menus and they are already styled in dashboard page? I am trying to style the nav component here and i am still stuck with the style. Thanks for replying...

[@qndev]

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

[@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!

[@bencipherx]

Thank you for your feedback which I find useful. Please can you highlight what he omitted so I can review them or suggest an alternative prerequisite video. I have never seen or used next before but i learnt its like Django which I am very used to. I also have experience with ExprezsJS and React

[@DaniTochi]

Hi! What do you recommend? This is the first time I'm doing the project. Thanks 😅

[@MrCuteguylol]

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

[@ahmedyasser5058]

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

[@anand_dudi]

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

[@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 😅)

[@themks8452]

this is going to be the best video on this channel

[@Jaco_codeeza]

Thank you Kyle. Much Appreciated. I'm an hour into the tutorial and i must say, "I'm learning some real full stack here".

[@anirudhnomula2942]

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

[@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 👍.

[@shadrackodielo]

ai

[@haikchalian]

Thanks Kyle, you covered everything need for a full site. You even covered sending emails. I can build on everything learned here. Much appreciated.

[@AgustinAstronomy]

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

[@TwinkieHeist]

This video is amazing! I am new (6months) learning and I've been pushing on React, Next.js, Tailwind, and Prisma paired with Supabase. This was exactly what I am looking for! If you're looking for any future topics: I'd like to see how you might use tRPC into the mix. I just started using it, but I know I'm only scratching the surface.

[@7doors847]

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

[@Aerotk]

Took few days to complete it but worth trying it. tysm ♥

[@AliRaza-gr8to]

Wow, wow wow excellect. Mater of Everything, Next, React, Typescript, Tailwind, Css, Sass, ..... and with such a Speed. God Bless You. Very Informative..

[@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!

[@kiwiwiwiwiwiwi2088]

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

[@AlexMarcoDAngelo]

EXCELLENT! 👍 I wish there was a shopping cart so customers can purchase multiple products, but of course, you intended this to be basic! 😊

[@madanmalhotra]

learn a lot, this guy is just next level coder.

[@the__jive]

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

[@WebDevSimplified]

I'm glad I could help!

[@whitewalker19]

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

[@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

[@thabosiphiwemngoma1859]

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

[@Habesha_Today]

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

[@pablom8854]

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

[@codingwithteedeb]

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

[@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 :)

[@phil5293]

Best Next.js tutorial ever. Thank you

[@vali69]

I decided to just download the project because it's been taking too long to write it while following the video and it just doesn't run... great... I love webdevving Edit: nvm I forgot to run prisma migrate to make the database... I'm such a goof. Now I can toy with this like I originally wanted to

[@kisp11]

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.

[@nasa-eemadadam2213]

Awesome tutorial 😁 need more nextjs project 😊😊😊

[@AlexanderBelov-y8o]

You are one of the best on KZbin

[@terrol3164]

Super high quality video, can't believe this is free lmao

[@_hugo_cruz]

Bro, thank you for this. Thanks for taking the time to build this excellent content for us. It's awesome this projetc to start any e-commerce. hugs!

[@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.

[@mrentr3preneur]

most amazing thing, thank you Web Dev Simplified. You deserve that good hair !

[@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!!!

[@andrewtcoder]

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

[@suntienda5749]

I need to do a project for school, and it's important to complete it because the teacher got a real client. The client wants a sales page, but nobody knows how to program a web page.

[@JediMediator]

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

[@justinhoward6384]

Kyle drops another hit

[@Developer-KamranIqbal]

Great course, Learned a lot from this course.

[@crazydevil3090]

did u finish the project?

[@Developer-KamranIqbal]

@@crazydevil3090 yes

[@Developer-KamranIqbal]

@@crazydevil3090 yes

[@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.

[@WebDevSimplified]

Thank you so much for the support! I am glad I could help.

[@nelsonyu4112]

​@WebDevSimplified on top of what you have shown us here, i'd love to see what's the best way to integrate with i18n. The particular part i am exploring is the server side actions where you addProduct or updateProduct, which redirects back to the Product dashboard, wondering what's the cleanest way to retrieve the locale from server side and include in the redirects. Looking forward to your suggestions or another video 😊

[@WebDevSimplified]

Next.js has a bunch of documentation on including i18n in an application. I have considered making a video on i18n, but it is hard since it is something that is very particular to the app you are building.

[@nelsonyu4112]

I tried a few approaches ended up using paraglide.

[@gachecem_yt]

Would be really good if the my orders would be on a login, so the person could have their information such as addresses, see what he previous bought and his orders which are on the way home, etc.

[@adyreacts5976]

Appreciate your granularity, you did not even skip a damn skeleton. Thanks Kyle. A host of topics covered

[@artemonstrick]

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

[@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 ?

[@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.

[@cant_sleeeep]

chad teaches web development

[@AlexanderBelov-y8o]

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

[@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?

[@NinoVid.]

Bro, you are BEAST !

[@alec-dora]

Email service bookmark 2:57:00

[@adam.erweeYT]

Great work! Thank you. Question: Where would you suggest we host our db?

[@Hedonist-p8s]

I hosted mine with Supabase, works great

[@jrom_ai]

AMAZING tutorial!!!

[@RavindraSingh-lp9pl]

We absolutely love this Kyle

[@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

[@henriknasmark]

To bad there wasn't a cart and multiple products to orders. Nice work anyway :-)

[@thiagosullivan]

That white Jackson is awesome 🥰

[@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 ...?

[@programmingjobesch7291]

stuck here as well

[@devrajchatribin]

const fileSchema = (typeof File !== "undefined") ? z.instanceof(File, { message: "Required" }) : z.any(); // Provide a fallback schema or handle appropriately Try this out, worked for me

[@stephanfranz2524]

If you're getting the error, you need to upgrade your version of node to v-20.0.0 or later. I ran into this myself and this solves the issue without having to deviate from Kyle's code or implementing a different schema validation

[@jmgutierrez962]

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

[@joel-rg8xm]

Gem video to bookmark, thx

[@codingjitsu]

This is great, Thanks for Sharing.

[@telur_ramen]

thank you so much for this amazing course!

[@everythingeveryone-t7k]

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

[@kiwiwiwiwiwiwi2088]

no

[@everythingeveryone-t7k]

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

[@evalaviniabucur1789]

@@everythingeveryone-t7k of course you can.

[@MrGunshippilot]

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

[@404-not-found-service]

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

[@biswajitparida6491]

learn nextjs docs then follow this tutorial once .Now you can create anything in next js

[@iammaarccii6111]

Very very helpful tutorial. all well explained and easy to follow. unfortunatly i´m missing the customer authentication. at least it´s missing in the timespamps. i´m currently at 2:11:08. so maybe it´s still coming

[@toghrulzakarya7594]

thanks to you I hate next.js now 😂

[@siehrichmond7693]

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

[@احمدجلاب-ش8خ]

@WebDevSimplified I have a question for if this project can be deployed in AWS Amplify????? Thank you for the awesome project! 💯❤

[@laduniestu]

wish you all the besttt 🔥🔥🔥

[@ryanhotrod5416]

Awesome 👍😎 really insightful

[@yourlinuxguy]

I was thinking of doing this then I thought, It's not for me. I'm doing a Certificate Building project right now.

[@Nodsaibot]

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

[@hoanghailethe1734]

thank you so much, learned a ton

[@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 ?

[@lostinthenarrativve]

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

[@YT-su2sq]

I would love to.

[@NoIngNames]

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

[@femiakinsiku8055]

God bless you Kyle

[@raphauy]

Awesome!!! Thank you very much!!!

[@dodzz.h]

it would be better if you added categories

[@kaspars-b]

This kind of project is exactly what i was looking for, no logins, everything is good. But had an error with addProduct function, tried to find a solution for 2 days, gave up. Guess the updates for the packages is the reason why. If you plan to start this now, this tutorial is outdated

[@X-razcal-X]

Great video. Thank you 🎉

[@floriangogea9712]

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

[@mega_play1237]

i have problems to deploy the project to vercel

[@P.R.RacerX-Studio]

Is processing possible to upload a video playlist?

[@norbusherpa3665]

anyone got this error Unhandled Runtime Error Error: File is not defined

[@norbusherpa3665]

const fileSchema = z.instanceof(File, { message: "Required" })

[@animan6246]

yeah man, did you resolve it?

[@animan6246]

nvm, i got it. Include import { File } from 'buffer' as File isn't directly avaiable on node env where server actions work, its a browswer specific api

[@norbusherpa3665]

@@animan6246 is your image validation working? i was quite bg

[@PranasRokinskas]

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

[@timmunkhtur219]

Can't deploy to vercel because admin/products/download/route.ts has an invalid export. "Promise" is not a valid GET return type: Expected "void | Response | Promise", got "Promise". Expected "Promise", got "Promise". Expected "void | Response", got "NextResponse | { status: number; }". Expected "void | Response", got "{ status: number; }".

[@henriknasmark]

There is a problem trying to deploy the stripe-success page on Vercel because we can't it takes in dynamic data and need to be created at request time. Also, seems to be a problem with stripe when you deploy it to production as well.

[@AlexanderMihailov-tx8pk]

thats amazing! Thank you

[@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?

[@ehsanjaved494]

How would you deploy this on a hosting vps site

[@InekMarcinek]

How did you update purchased products in admin page after successful webhook event? How can I do it automatically without user having to refresh the page?

[@ahmedusama152]

Can you please upload video for PHP, please ❤❤❤