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&
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...
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!
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
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 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 😊
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.
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 😅)
Wow, wow wow excellect. Mater of Everything, Next, React, Typescript, Tailwind, Css, Sass, ..... and with such a Speed. God Bless You. Very Informative..
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 👍.
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.
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
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
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
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
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
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.
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.
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!
at 1:04:01 when submit form i got error with Error: File is not defined which come from z.instanceof(File, {message: "Required"}) which it mean File object is available in the browser environment, not in Node.js (or the server environment where Next.js API routes run) how can i solve plz let me know thanks
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.
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.
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 ...?
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
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
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
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
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?
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
54:01 Has anyone encountered an "Unhandled Runtime Error: File is not defined - "const fileSchema = z.instanceof(File, { message: "Required" });""? I fixed it in the file app/admin/_actions/products.ts by changing the fileSchema definition to "const fileSchema = z.any();". =)
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.
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.
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?
hello kyle and community of kyle, Im having an sql problem when deploying to vercel, I got suggested to switch to firebase instead of prisma client, that would mean all the prisma sql related processes would be needed to be replaced, is there no other way around this? or did I miss out something obvious.?
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`).
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
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&
its free?
@@samoltman It sure is!
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...
I've been looking for this project for a long time. Thank Kyle for awesome project!
Thank GOD. I have a Next JS project in my job and your video came up. Damn.
Thank you very much Kyle! I learned a lot from this video, ❤.
I'm glad I could help!
this is going to be the best video on this channel
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!
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
Hi! What do you recommend? This is the first time I'm doing the project. Thanks 😅
We've been waiting for something like this so long bro thanks for everything you do on the channel ♥
This is most useful tutorial on nextjs i have ever seen as senior react node developer
Some relevant timestamps for me
5:15 price in cents
9:17 restrict
9:40 download verification
12:30 shad config
man mad respect..this is what I was searching for
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.
Thank you so much for the support! I am glad I could help.
@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 😊
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.
I tried a few approaches ended up using paraglide.
Thank you Kyle. Much Appreciated. I'm an hour into the tutorial and i must say, "I'm learning some real full stack here".
Best Next.js tutorial ever. Thank you
You are one of the best on TH-cam
A wholesome project with almost a lot of best practices covered , definetly recommend to watch this ❤
learn a lot, this guy is just next level coder.
thanks for this amazing video. So many key concepts are covered here, like redirects from api route to pages, prisma, server actions. Thanks!
This looks like a fun project. Looking forward to it. Thanks!
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 😅)
Wow, wow wow excellect. Mater of Everything, Next, React, Typescript, Tailwind, Css, Sass, ..... and with such a Speed. God Bless You. Very Informative..
Thanks Kyle, you covered everything need for a full site. You even covered sending emails. I can build on everything learned here. Much appreciated.
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 👍.
ai
Kyle drops another hit
Took few days to complete it but worth trying it. tysm ♥
Super high quality video, can't believe this is free lmao
AMAZING tutorial!!!
Bro, you are BEAST !
Amazing video!!! Thank you so much! You're the best teacher!!!!
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.
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
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
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
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
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
We absolutely love this Kyle
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 :)
Email service bookmark 2:57:00
Awesome tutorial 😁 need more nextjs project 😊😊😊
About time. Thank you for this. Now you should try other backends like python. Your breakdowns are amazing
finished this. You should extend this sample with user login, purchases and cart. PEACE
WOW ALMOST 4 HOURS OF MY FAVORITE WOBBLY HEAD TALKING! WOHOOOOOOOO!1111
most amazing thing, thank you Web Dev Simplified. You deserve that good hair !
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!
Dev please do more videos on Next-js and TypeScript especially on Ecommerce-Site and other complex projects
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!!!
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.
Great course, Learned a lot from this course.
did u finish the project?
@@crazydevil3090 yes
@@crazydevil3090 yes
Gem video to bookmark, thx
Thank You sir..This is really really helpful..
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.
thank you so much for this amazing course!
This is great, Thanks for Sharing.
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!
EXCELLENT! 👍 I wish there was a shopping cart so customers can purchase multiple products, but of course, you intended this to be basic! 😊
Awesome 👍😎 really insightful
That white Jackson is awesome 🥰
at 1:04:01 when submit form i got error with Error: File is not defined which come from z.instanceof(File, {message: "Required"}) which it mean File object is available in the browser environment, not in Node.js (or the server environment where Next.js API routes run) how can i solve plz let me know thanks
Thank you very much for the video, this type of content is appreciated.
wish you all the besttt 🔥🔥🔥
You might think Kyle is ELISA with his robotic head movement and fast-pace speech
thank you so much, learned a ton
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.
chad teaches web development
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.
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 ...?
stuck here as well
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
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
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
Have you considered doing any tutorials on building some kind of shipping integration? I looked into it recently and found it very intimidating.
Fuuuuck me this is what we've all been waiting for in years
I would love to.
Great content!
Thank you very much for doing this.
How would you perform client-side validation, e.g. similar to react-hook-form?
Awesome!!! Thank you very much!!!
Great video. Thank you 🎉
So, am I missing something or upon successful purchase no record is made in Order table of the database?
anyone got this error Unhandled Runtime Error
Error: File is not defined
const fileSchema = z.instanceof(File, { message: "Required" })
yeah man, did you resolve it?
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
@@animan6246 is your image validation working? i was quite bg
thats amazing! Thank you
Great work! Thank you.
Question: Where would you suggest we host our db?
I hosted mine with Supabase, works great
well done, can i re-design and deploy for business use ??
no
@@samoltman why not ??? so how do i get it business ready ??
@@everythingeveryone-t7k of course you can.
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?
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; }".
When I finish this, I'll try adding product attributes, more fields, etc.
God bless you Kyle
thanks to you I hate next.js now 😂
Hi, thanks for this. Stupid question - any particular reason why you aren't using arrow functions for components, i.e. ?
The redirect function at 1:00:16 is not working.. did anyone encounter the same issue?
Yes, did you fix it? and if yes, what did you do?
it's not working for me too, did you find a solution
@@joshnguyen8531 still looking for the solution, please post here if you do.
@@joshnguyen8531 use Get method to extract individual individual fields from formData
same
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
Thanks a lot! You're so kind...
i have problems to deploy the project to vercel
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
@WebDevSimplified
I have a question for if this project can be deployed in AWS Amplify?????
Thank you for the awesome project! 💯❤
54:01 Has anyone encountered an "Unhandled Runtime Error: File is not defined -
"const fileSchema = z.instanceof(File, { message: "Required" });""?
I fixed it in the file app/admin/_actions/products.ts by changing the fileSchema definition to
"const fileSchema = z.any();". =)
or add import { File } from "buffer";
You need at least v20 of node
@@TurtlemanDC Sweet! It worked when I switched to 20.12.0 with NVM. I was on v18 before. Thanks!
@@horikaze0 That's great, it works with this solution as well. Thanks!
y'all saved my hair fallout
Great work, can you do it with mern stack, redux and redux toolkit ?
Appreciate your granularity, you did not even skip a damn skeleton. Thanks Kyle. A host of topics covered
Sounds great
To bad there wasn't a cart and multiple products to orders. Nice work anyway :-)
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.
How would you deploy this on a hosting vps site
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.
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?
thanks for this video.
hello kyle and community of kyle, Im having an sql problem when deploying to vercel, I got suggested to switch to firebase instead of prisma client, that would mean all the prisma sql related processes would be needed to be replaced, is there no other way around this? or did I miss out something obvious.?
Application error: a server-side exception has occurred (see the server logs for more information).
error: Error validating datasource `db`: the URL must start with the protocol `file:`.
--> schema.prisma:11
|
10 | provider = "sqlite"
11 | url = env("DATABASE_URL")
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`).
going to follow along and this scares me
@@samoltman it was my fault. I misspelled "use server" in a component.
@@samoltman but If you're from india you will have to add more fields to the form , to follow indian regulations for online payment.
@@rishawraj i guess this is why i'm still getting unknown error occurred.
@@ajaydeepsinghrajpoot you just need to add an addressElmement in form.
are there alternatives to stripe I could use if it is not supported in my country?
text-muted-forehand is tailwind classes ?
I couldn't find that in tailwind css doc
Didn't find either.
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
@@kyriakosbekas Thank you!!
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.
If you notice it happen when he saves the changes - he has prettier extension enabled to ‘format on save’
The npm run email command is not working in my terminal. Do I need to install any CLI?