Want to get mentored by me? Apply at www.codewithantonio.com/mentorship Hello everyone! Thank you for choosing this video! I listened to your requests and tried to create a real engineering challenge for us. We are building a fully-working E-Commerce with Stripe Checkout, but we are also building a separate Admin dashboard that will also serve as our CMS and API!, On top of that our dashboard can handle multiple e-commerce stores at once and supports dark mode! If you have any questions always feel free to popup in my discord channel from the link in the description! Thank you so much for your support ❤
Underrated channel. This guy literally produces content INFINITELY more valuable, rich and simple to understand than most paid courses out there. Subscribed. Hope to see this channel with millions of subs
I'm 10mins in and I can already tell that the quality of this tutorial is insanely above and beyond anything you could even find on UA-cam concerning web dev. The amount of knowledge we can carry out of this is just impressive and I can't believe it's free, I hope you grow to a multimillion channel because your effort deserves to pay off. Thank you so much! Edit: on top of everything it was released just a month ago! You could easily bury Udemy with its outdated courses
I have not watched the video but the almost 10-hour tutorial for free is amazing. Kudos to you Antonio for the work behind all of this. I hope you'll live a long healthy life.
It's gonna be one hell of a ride building this project. This has gotta be one of the most complete full stack projects probably ever created on UA-cam. Dude you must have spent so much time making this, then you would have made the entire project once again just for recording, and then you must have waited a long time for it to be uploaded on YT. This is why hope for humanity still remains. My head bows down to you dude. May you achieve everything you have hoped and dreamt for. Genuinely. Wishing massive success to you🔥🔥💯
Dude, I have no words. The amount of love and effort you put into all of your videos are just unbelievable and this project is fantastic. Thank you so much for all this, it is a incredible source of knowledge and learning for all of us.
I really like the pace of this project, there is a very noticeable improvement in the way you explain things from previous projects. I admire the way you structure your projects and the way you write your code - I'm sure you've become a coding idol to many people, who watch and code along your projects. I'm constantly using some of your tricks in my own projects 😄 Thank you very much for your effort, Antonio - you can't imagine how much you help us learn! 🙏
52:53 maybe you get error with Modal & Dialog, sth like as "Expected server HTML to contain a matching in , Hydration failed because the initial UI does not match what was rendered on the server". First way: set Dialog props open is false by default, then u set to true by using useEffect() hooks: const [open, setOpen] = useState(false) useEffect(() => { setOpen(isOpen) }, [isOpen]) //code Second way: need not to do first way, keep watching video by adding zustand library to fix this =)))
This is best channel i have ever come across. I have so many channels and courses but nothing can be compared to this channel. Damn the delivery is simple and organised. I have never comment a channel before but this one is needed!
I love how you are being more detail in every video you share, keep doing it like that because every time I have new questions you constantly answer them in the own video lol. It's amazing!
Your videos are the most comprehensive and complete tutorials. Never on UA-cam have i ever found such advanced videos. And that too you are so regular in uploading. Amazing efforts and work Buddy😊
6hours in the tutorial, im loving it and will finish it for sure this week. One thing that is pretty cool about vs code is: if you want to rename a variable, instead of ctrl + D, select the variable you want to replace and use F2, this way the names will be replaced in the imports of other files.
Please i am having issues with the dialog. After creating the modal and calling it in the page.tsx, it gives this error. ./node_modules/@radix-ui/react-dialog/dist/index.mjs Attempted import error: 'useFocusGuards' is not exported from '@radix-ui/react-focus-guards' (imported as '$67UHm$useFocusGuards'). please what do i do?
One of the best things about this video is your pace when you code and describe topics, Antonio. You decrease your pace and now it's amazing. Thank you so much for this unique, valuable, and educational content, Antonio.
Dude, I'm speechless. This is the best tutorial that I've ever watched on the internet. AND YOU give it as free, I don't know how to say thank you to people like you, God bless you antonio!
Wow! First of all Antonio, thank you so much for building this project I believe it might be your best one so far! I did 1 hour today and am completely blown away by how easy to use and setup both clerk and shadcn are. And on top of that they have extremely clean designs, huge amount of features and tons of customization. This is a complete game-changer when it comes to developing applications! I'll definitely keep working on this project tomorrow. Have a wonderful day Antonio and keep up the amazing work, you'll be at a million subs in no time.
I have freshly started learning Next for my project. Started Coding after 3 years of break, and jumped upon your videos. I copy all your steps and it teach me a lot. Thanks for everything. You added so much value to my life.
Took me 2 weeks to complete this amazing project and I am here to ask a question. How on earth...... I repeat, how on earth is this tutorial free??? I'm definitely going to start this tutorial afresh, implementing all the concept in my own project. Thank you Antonio. Muchas gracias. Hvala. U have a heart of GOLD❤.
I had to build your Airbnb clone twice for me to really appreciate the quality and efforts you put in your tutorials. I would be working on this once I'm done with the Airbnb clone. Thank you Antonio for always bringing value to your channel
This is awesome. Your projects are very well designed and coded. They provide the foundations for building larger projects while being fully functional. This is by far the most advanced project I seen on any UA-cam tutorial. I think a ChatGPT client is the only thing left to learn to use the OpenAI API.
Honestly, this is the best full stack tutorial video I have ever seen. Not only your instructions on making stuff are clear, you also neatly tell your viewers the best practice to create stuff. Thank you for your efforts and valuable experiences you share with us. Keep making awesome stuff! P.S: It would be amazing if you could develop a full stack discord clone for your next video. Would definitely watch and code it even if it takes me days to complete.
1:06:00 into this , absolute rich content! Not beginner friendly maybe intermediate level. September 4: 1:44:00 September 12: 2:55:00 September 13: 4:30:00
Antonio, you are just absolutely phenomenal! The quality of your content always blows me away, and your attention to detail is unmatched. The way you showcase the best tools and technologies in such a clear and concise manner is truly commendable. Thank you for sharing your expertise and inspiring us all to level up our web development skills. Keep up the incredible work!
You're a legend, who is seriously helping a lot of devs out there who wanna learn, and you are making us learn all this even unconditionally , hats off to you! ❤
Once again this is just a brilliant tutorial. I am going to start this tomorrow. I have built the Spotify app 4 times now and have learned so much. Reason i built it 4 times is because i was waiting for your next tutorial as I only want to go to your tutorials to learn as i like the way you teach. Now i will do this one and I thank you very much for the time and effort that you put into creating these.
I finished this app completely and it worked with no hiccups. This was a very great tutorial and i enjoyed working along and learning from it. Thank you Antonio, your hard work in producing materials such as this is truly appreciated. If you ever come and visit Victoria, BC. Canada, I will ensure you have a place to stay for free. Again thankyou.
'StoreModal' cannot be used as a JSX component. Its type '() => void' is not a valid JSX element type. Type '() => void' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'. Type 'void' is not assignable to type 'ReactNode'.ts(2786) (alias) const StoreModal: () => void import StoreModal @ 53:00 minutes
Finally after 16 days of following up, I have successfully completed this project. Took my sweet time trying to understand some of these insane concepts but thanks to you I was able to pause and return whenever I felt better and I have a lot more confidence than I did before watching this tutorial. Thank you so much Antonio, god bless!
I have been following you since your first video. I am lost for words for the high quality content you put out on a regular basis. Thank you so much. And finally, to quote your own words "AMAZING, AMAZING JOB!"
Really amazing! Thank you so much, I really appreciate the way you guide us in your videos! Thank you for leaving the little mistakes too, makes the process more organic. Greetings from Chile
Good day Sir I know you're probably busy with other projects, but I was wondering if you could consider adding an extension to the ecommerce tutorial. Many people have asked for features like client authentication, color and size selection, and purchase history to be covered in the tutorial. I think it would be a great addition to the tutorial, and I know others would benefit from it as well. Thanks so much for your consideration.
Para las personas que tiene el error en Crear una tienda o en min 2:36:00 lo unico que tiene que hacer es colocar estos datos en Command.tsx, dentro de CommandItem en su classname coloquen esto "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50" y les debe funcionar
I would suggest moving schemas to a root level folder such as /schemas and then reuse it in both the react-hook-form AND in the API endpoint. The data sent in the request body from the onSubmit handler is output from zod anyway, so it can't hurt. But now people can't just do a raw request to the endpoint with invalid data (since the checks only happen on the frontend). Additionally, there's no need to track if a react-hook-form is loading yourself -- there's a property formState.isLoading which is given back from useForm().
As a beginner in web development this complete e-commerce tutorial has given me an incredible confidence boost. I just completed and deployed it and i must say, I have never learnt so much from a single tutorial as I have with yours. Your content is is of the best quality, thank you so much. Also i have been trying to join your discord but the link in the description doesn't seem to work for me.
Words cannot describe how spectacular you're content is , I mean like you're on whole other level Well done , I appreciate the effort and the work 🙏. We all do. 👏👏
@@codewithantonio otherwise Antonio why i'm still getting this warning for decimal object: Only plain objects can be passed to Client Components from Server Components. Decimal objects are not supported
For anyone experiencing difficulties uploading more than one image, I encountered the same issue and managed to resolve it. Here's the solution I implemented: " image.url)} disabled={loading} onChange={(url) => { const newValue = [...field.value, { url }]; field.onChange((field.value = newValue)); }} onRemove={(url) => { const newValue = field.value.filter((current) => current.url !== url); field.onChange(newValue); }} /> "
Wow, Man Your UA-cam channel is a game-changer for coding enthusiasts! Your tutorials are Just amazing, making complex concepts a piece of cake. Highly recommended!
Frontend dev here, Your tutorials are amazing man! Really appreciate all the time you invest in teaching people! One suggestion; eslint and prettier can sort your imports (on save) so you don't have to (check simple-import-sort/imports).
Thank you so much for making this, it's exactly what I needed. I found a solution for your relative imports problem in vs code, just paste the following in your vs code settings.json file: "typescript.preferences.importModuleSpecifier": "non-relative" that way your import suggestions in vscode will always start with '@/' and you won't have to change it manually every time.
This project looks awesome ! I have 1 question, i only looked at the intro so feel free to correct me if i am wrong, but it looks to me that you can purchase a product only once since in the dashboard there is no stock functionality, so when you checkout it archives the product, wouldnt it be better if you could specify stock per product/product size and once you checkout it reduces the stock and when stock gets to 0 of particular size or product it gets archived?
IDK Antonio is the best teacher on YT no doubt! Like the way everything is so structured, the way he explains things....everything is perfect. Thank you so much man! I truly appreciate you!
Hi Antonio, for "NEXT_PUBLIC_API_URL" in the environement variables, the categoryID is hardcoded.....what if I create a new store then in that case NEXT_PUBLIC_API_URL will be manipulated manually.....so how to make this dynamic ??
me too I encounted this problem as well with the billboards. It's also hardcoded. I don't know but then I think you can include them as variables in the env files and the load them from the env files into the project
Hi Antonio, I loved your project but I am having problems with the Image upload I am only able to upload one image, but I can't able to upload multiple images
@@caiooliveira13cs Not yet I started doing something else but I got a problem actually when we upload images we should arrays of strings in the URL object but instead it replaces the initial string with last uploaded strings
you found the solution? i tried this onChange={(url) => field.onChange((prev:{url:string}[])=>[...prev, {url}])} ...but when i try to submit form error appears saying expected array, received function
Hi Antonio, Thanks a lot for all of your efforts putting in your really helpful videos. I have a problem following your tutorial, at about ua-cam.com/video/5miHyP6lExg/v-deo.html when we have to make api routes public. Mine do not want to be public. I always have a 401, even if I copy-paste your middleware.json content in mine... Do you have an idea?
Hi, glad you like my content, have you tried comparing my github package json Clerk to be same as yours? If that is still working, can you try removing the .next file and removing node_modules and reinstalling using npm i and then npm run dev again?
@@codewithantonio i have the same issue , can you prodive clerk package ? i cant continue with frontend part without solving this issue as i cant read data from localhost:3001
Hi Antonio, I just want to say thank you so much for sharing this hard work. It helped me a lot to understand all these technologies working together. You are an amazing coder and after 5 days I finally finished the project! I’m so happy with how it turned out and the flexibility it offers afterwards to customize it. Thanks again, you are awesome! 🤩
I just came here to like the video and to cheer my fav youtube tutor. I can't build this highly functional web app at all. Keep up with the good work man❤❤
Thank you for your kind words! This project is certainly advanced, but i encourage you to try it! Regardless if you get stuck at the first 30 minutes or first 5 hours, you will learn something! And then come back when you are ready for more! Also, there is my discord in the description if you have a specific error you cannot solve yourself
This tutorial is seriously awesome, bunch of new stuff for me to learn. Everything is covered perfectly. And hey, thank bunch of times for also being so helpfull on Discord. Dont know where you are finding time for it, its unreal! 👏👏
I just completed the project. It took me 7 days. Thanks a lot for all the efforts you put into this tutorial. And to all the people having errors on the project and that think it’s a version problem, I completed this tutorial 5 months after is has been released and everything is still working perfectly. So just concentrate and make sure to import all components from the right place and make sure to write the source code as it is in the project.
I just finished the tutorial, and right now my project is in production. First of all, thanks, Antonio, for sharing this tutorial with us. It's amazing how much you can learn by completing an entire project. One suggestion to enhance this tutorial even further is to share a bit about your strategies for approaching the structure, such as how to choose technologies and the architecture of each project. It would be awesome. However, I ended up creating my own sketches to better understand the structure myself. It's important to review the entire project to gain a deeper understanding, both during and after execution. It has greatly helped me in my journey to understand this kind of project. But overall, THANK YOU A LOT.
hey can i know that how this app is running without backend, auth is done by clerk and db is managed by planetscale , but how r u making calls to db , is it also done by planetscale
@Antonio bro: You must be kidding dude, who produces this kinda content in Full HD and in ultra great detail. You rock. Definitely deserve way more Subs nd views.
Thank you so much for this fantastic tutorial on building a full-stack e-commerce application with Next.js 13, React, Tailwind, Prisma, and MySQL! The step-by-step guidance was incredibly helpful. I successfully integrated PayHere instead of Stripe, and it works perfectly. Your video covered everything I needed, and I truly appreciate the effort you put into creating such a comprehensive resource. Thanks again!
@@Ai-professor. yes. i will try. but make sure according to the video. i do the same. i am also get some issues with image uploading part. but I re do again to check what I miss.
Bro said he was going to deliver, and he absolutely did.
Im very happy you like it!
Yes 🙌, at a point i was getting worried but not anymore😀
Can you make it so that if you enter a fake credit card, it says card invalid. You have to put actual credit card.
@@codewithantonioIs knowledge of Next.js is required or we will learn it on the go.
@@akash6895you can follow the tutorial as long as you know react.
Want to get mentored by me? Apply at www.codewithantonio.com/mentorship
Hello everyone! Thank you for choosing this video! I listened to your requests and tried to create a real engineering challenge for us. We are building a fully-working E-Commerce with Stripe Checkout, but we are also building a separate Admin dashboard that will also serve as our CMS and API!, On top of that our dashboard can handle multiple e-commerce stores at once and supports dark mode!
If you have any questions always feel free to popup in my discord channel from the link in the description!
Thank you so much for your support ❤
Thanks you Sir Antoni❤ 🙏🙏🙏.
Awesome video, I love your content sooo much. This is wonderful
❤❤❤
add subtitle please
From where did you got the energy to build this phenomenal application? This is insane ........... I'm dieying
Thank you 😊 Antonio you is best
Underrated channel. This guy literally produces content INFINITELY more valuable, rich and simple to understand than most paid courses out there. Subscribed. Hope to see this channel with millions of subs
Thank you very much for your kind words!
I'm 10mins in and I can already tell that the quality of this tutorial is insanely above and beyond anything you could even find on UA-cam concerning web dev. The amount of knowledge we can carry out of this is just impressive and I can't believe it's free, I hope you grow to a multimillion channel because your effort deserves to pay off. Thank you so much!
Edit: on top of everything it was released just a month ago! You could easily bury Udemy with its outdated courses
Thank you for your nice words, hope you like it :)
Obviously sir
that is true! thanks to the knowledge Antonio Share, I got a job!
Agree, there aren't many channels that create full projects like this one
2:36:06 frame
I don't know why the create store propery in the combobox is disabled for me, I can't click on it, Can you help me please !
I have not watched the video but the almost 10-hour tutorial for free is amazing.
Kudos to you Antonio for the work behind all of this. I hope you'll live a long healthy life.
It's gonna be one hell of a ride building this project. This has gotta be one of the most complete full stack projects probably ever created on UA-cam.
Dude you must have spent so much time making this, then you would have made the entire project once again just for recording, and then you must have waited a long time for it to be uploaded on YT. This is why hope for humanity still remains. My head bows down to you dude.
May you achieve everything you have hoped and dreamt for. Genuinely. Wishing massive success to you🔥🔥💯
Happy you like it, it was a lot of work but worth it for supporters like you!
@@codewithantonio How many hours did it take? If you don't mind me asking
I dont know the exact hours as I built this in my spare time along with my 9-5 but it took around 3/4 weeks
@@codewithantonio respectable grind brother
@@codewithantonioplease I beg you never delete this video
Hands down the best source for full stack development. Thank you so much, Antonio. Looking forward to tackle this project.
Glad you like it!
2:36:06 frame
I don't know why the create store propery in the combobox is disabled for me, I can't click on it, Can you help me please !
@@Berrada-kh Do u find a work around on this?
Dude, I have no words.
The amount of love and effort you put into all of your videos are just unbelievable and this project is fantastic. Thank you so much for all this, it is a incredible source of knowledge and learning for all of us.
Glad you enjoy it! Thank you!
@@codewithantonio Dear Antonio, why you rejected Mongo db and chose mysql and does it matter? May be, storage capacity?
@@TimurIshuov sql just fits this project better
@@codewithantonio Can I know the reason why my underlying divs inside modal are not rendering?
@@codewithantonio Dear Antonio, I am at 30%, and it was tremendous amount of work you have done.
I just love the way you architecture your folders and files. I assume that is best programming practices.
Glad you like it!
I have finished the project with Antonio finally, may Allah reward you
great job!
@@codewithantonio PlanetScale is no longer free unfortunately, any idea of what to replace it with?
@SeForeVers neon dv
@@codewithantonio okay, I'll try and find out how to use that, really wanted to finish the project. Thanks !
I really like the pace of this project, there is a very noticeable improvement in the way you explain things from previous projects. I admire the way you structure your projects and the way you write your code - I'm sure you've become a coding idol to many people, who watch and code along your projects. I'm constantly using some of your tricks in my own projects 😄 Thank you very much for your effort, Antonio - you can't imagine how much you help us learn! 🙏
Thank you very much for the support and feedback!
2:36:06 frame
I don't know why the create store propery in the combobox is disabled for me, I can't click on it, Can you help me please !
BRUH! You are turning yourself into a legend in this UA-cam-streets. Thank you very much for this free and amazing project. God bless you!
I appreciate that!
52:53 maybe you get error with Modal & Dialog, sth like as "Expected server HTML to contain a matching in , Hydration failed because the initial UI does not match what was rendered on the server".
First way:
set Dialog props open is false by default, then u set to true by using useEffect() hooks:
const [open, setOpen] = useState(false)
useEffect(() => {
setOpen(isOpen)
}, [isOpen])
//code
Second way: need not to do first way, keep watching video by adding zustand library to fix this =)))
THANKS !
This is best channel i have ever come across. I have so many channels and courses but nothing can be compared to this channel. Damn the delivery is simple and organised. I have never comment a channel before but this one is needed!
Thank you so much for the kind words, it really means a lot :)
I love how you are being more detail in every video you share, keep doing it like that because every time I have new questions you constantly answer them in the own video lol. It's amazing!
Your videos are the most comprehensive and complete tutorials. Never on UA-cam have i ever found such advanced videos. And that too you are so regular in uploading. Amazing efforts and work Buddy😊
Glad you like them!
6hours in the tutorial, im loving it and will finish it for sure this week. One thing that is pretty cool about vs code is: if you want to rename a variable, instead of ctrl + D, select the variable you want to replace and use F2, this way the names will be replaced in the imports of other files.
Please i am having issues with the dialog. After creating the modal and calling it in the page.tsx, it gives this error. ./node_modules/@radix-ui/react-dialog/dist/index.mjs
Attempted import error: 'useFocusGuards' is not exported from '@radix-ui/react-focus-guards' (imported as '$67UHm$useFocusGuards'). please what do i do?
As an Angular developer, I found building this app even more challenging. Many thanks to you, Antonio!
Glad it helped!
I just finished your project! I started on Tuesday and just finished it! The best tutorial challenge on UA-cam! Once again, congratulations!
Very happy you like it! Thank you for watching!
Is it responsive design web site?
One of the best things about this video is your pace when you code and describe topics, Antonio. You decrease your pace and now it's amazing. Thank you so much for this unique, valuable, and educational content, Antonio.
Happy to hear that!
Dude, I'm speechless.
This is the best tutorial that I've ever watched on the internet. AND YOU give it as free, I don't know how to say thank you to people like you, God bless you antonio!
Wow, thanks!
Wow! First of all Antonio, thank you so much for building this project I believe it might be your best one so far! I did 1 hour today and am completely blown away by how easy to use and setup both clerk and shadcn are. And on top of that they have extremely clean designs, huge amount of features and tons of customization. This is a complete game-changer when it comes to developing applications! I'll definitely keep working on this project tomorrow. Have a wonderful day Antonio and keep up the amazing work, you'll be at a million subs in no time.
Thank you for the nice words!
Now this is the afternoon content I scroll through YT to find. Thank you Antonio keep em coming!
Enjoy!
I have freshly started learning Next for my project. Started Coding after 3 years of break, and jumped upon your videos. I copy all your steps and it teach me a lot. Thanks for everything. You added so much value to my life.
Took me 2 weeks to complete this amazing project and I am here to ask a question.
How on earth......
I repeat, how on earth is this tutorial free???
I'm definitely going to start this tutorial afresh, implementing all the concept in my own project.
Thank you Antonio.
Muchas gracias.
Hvala.
U have a heart of GOLD❤.
Very happy you like it!
From your comment i am confident to go ahead as this still works till now and is not outdated.
I had to build your Airbnb clone twice for me to really appreciate the quality and efforts you put in your tutorials. I would be working on this once I'm done with the Airbnb clone. Thank you Antonio for always bringing value to your channel
Glad I could help!
This is awesome. Your projects are very well designed and coded. They provide the foundations for building larger projects while being fully functional. This is by far the most advanced project I seen on any UA-cam tutorial. I think a ChatGPT client is the only thing left to learn to use the OpenAI API.
Thank you very much!
Honestly, this is the best full stack tutorial video I have ever seen.
Not only your instructions on making stuff are clear, you also neatly tell your viewers the best practice to create stuff.
Thank you for your efforts and valuable experiences you share with us.
Keep making awesome stuff!
P.S: It would be amazing if you could develop a full stack discord clone for your next video. Would definitely watch and code it even if it takes me days to complete.
Glad you liked it! and thanks for the suggestion!
I have never seen this kind of industry-standard project tutorial from scratch Hats of to you my man you are really helping new developers
Happy you like it!
A legend in the game. The greatest of all time. Absolutely phenomenal. Thank you for all you do for the dev community.
Thank you very much
Thank you Antonio!!!!! Wow near 11h for teaching us ! Great teacher ever!
Happy you like it!
1:06:00 into this , absolute rich content!
Not beginner friendly maybe intermediate level.
September 4: 1:44:00
September 12: 2:55:00
September 13: 4:30:00
@@cabbi9 im also stuck i cant get the modal to appear at 1:04:00 thats frustrating i've rewatched and reproduced a lot of times
I can't thank you enough for all the hard work you put into making these videos. Amazing work!
Glad you like them!
I just can't believe such a tutorial could be free. I truly have no words to describe how happy i am. Thank you so much.
Happy to hear that!
@omjaju9251 it is still free forever for 1 DB and they will not charge you, card is required to prevent fraud and abuse
11:13
Intro
16:35
Environment setup (Admin)
Thumbnail image
15:39
Clerk Authentication (Admin)
Thumbnail image
09:26
Modal components (Admin)
Thumbnail image
13:27
maybe you get error with Modal & Dialog, sth like as "Expected server HTML to contain a matching in , Hydration failed because the initial UI does not match what was rendered on the server".
Thumbnail image
15:08
Form components (Admin)
Thumbnail image
23:34
Prisma, PlanetScale, MySQL setup (Admin)
Thumbnail image
18:41
Dashboard setup (Admin)
Thumbnail image
35:14
Navigation bar (Admin)
Thumbnail image
56:04
Settings page (Admin)
Thumbnail image
54:57
Billboards Entity (Admin)
Thumbnail image
48:17
Data Table (Admin)
Thumbnail image
31:58
Categories Entity (Admin)
Thumbnail image
15:05
Sizes Entity (Admin)
Thumbnail image
14:23
Colors Entity (Admin)
Thumbnail image
54:57
Products Entity (Admin)
Thumbnail image
11:37
Orders Entity (Admin)
Thumbnail image
55:59
Environment setup & featured products (Store)
Thumbnail image
23:33
Individual product screen (Store)
Thumbnail image
21:30
Individual category screen (Store)
Thumbnail image
13:12
Product preview modal components (Store)
Thumbnail image
25:45
Add to Cart functionality (Store)
Thumbnail image
21:53
Stripe Setup & Checkout finalization (Admin, Store)
Thumbnail image
19:27
Dashboard page (Admin)
Thumbnail image
02:48
Dark Mode (Admin)
Thumbnail image
11:11
Deployment to Vercel (Admin, Store)
Antonio, you are just absolutely phenomenal! The quality of your content always blows me away, and your attention to detail is unmatched. The way you showcase the best tools and technologies in such a clear and concise manner is truly commendable. Thank you for sharing your expertise and inspiring us all to level up our web development skills. Keep up the incredible work!
Thank you a lot, glad you like it!
You're a legend, who is seriously helping a lot of devs out there who wanna learn, and you are making us learn all this even unconditionally , hats off to you! ❤
Glad you like it!
Once again this is just a brilliant tutorial. I am going to start this tomorrow. I have built the Spotify app 4 times now and have learned so much. Reason i built it 4 times is because i was waiting for your next tutorial as I only want to go to your tutorials to learn as i like the way you teach. Now i will do this one and I thank you very much for the time and effort that you put into creating these.
Very happy you like my tutorials, thank you!
I finished this app completely and it worked with no hiccups. This was a very great tutorial and i enjoyed working along and learning from it. Thank you Antonio, your hard work in producing materials such as this is truly appreciated. If you ever come and visit Victoria, BC. Canada, I will ensure you have a place to stay for free. Again thankyou.
Glad it helped!
'StoreModal' cannot be used as a JSX component.
Its type '() => void' is not a valid JSX element type.
Type '() => void' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
Type 'void' is not assignable to type 'ReactNode'.ts(2786)
(alias) const StoreModal: () => void
import StoreModal @ 53:00 minutes
this is sick! this is so expensive! other people will just make it as expensive course, yet u give this fo free, respect bro
Glad you like it!
Just finished the tutorial ... insane the amount of work you put in and the amount of value / patterns we learn from it . THANK YOU!
Great to hear!
i can't believe this masterclass is free😭😭😭, thank u sir thank u very much
You are most welcome
Damn bro you're really unbelievably amazing. This project is just too good to be given for free. Much love and respect 👏👏
Thank you!
@@codewithantonio the pleasure is all mine
Finally after 16 days of following up, I have successfully completed this project. Took my sweet time trying to understand some of these insane concepts but thanks to you I was able to pause and return whenever I felt better and I have a lot more confidence than I did before watching this tutorial. Thank you so much Antonio, god bless!
Amazing job! Glad I could help!!
Hey can you share your github of e-commerce store
I have been following you since your first video. I am lost for words for the high quality content you put out on a regular basis. Thank you so much. And finally, to quote your own words "AMAZING, AMAZING JOB!"
Really amazing! Thank you so much, I really appreciate the way you guide us in your videos! Thank you for leaving the little mistakes too, makes the process more organic. Greetings from Chile
Glad you like them!
Good day Sir I know you're probably busy with other projects, but I was wondering if you could consider adding an extension to the ecommerce tutorial. Many people have asked for features like client authentication, color and size selection, and purchase history to be covered in the tutorial. I think it would be a great addition to the tutorial, and I know others would benefit from it as well. Thanks so much for your consideration.
Your channel has awesome production-level projects.🔥 I love your project topics.❤
how did you make database on planetscale without purchasing it .????
6 hours and 20minutes in one shot and I'm very happy with this project ❤
I haven't watched this yet, but seeing all the features of the app and also the length of the video, I'm just impressed.
Happy to hear that!
Para las personas que tiene el error en Crear una tienda o en min 2:36:00 lo unico que tiene que hacer es colocar estos datos en Command.tsx, dentro de CommandItem en su classname coloquen esto "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50" y les debe funcionar
You are a friend, my friend 🤝
@@luizsouza690 I spent 2 hours reviewing Antonio's code, and seeing his comment that I was able to see. Thank you friend
what does this mean, what exactly I need to do please help
@@luizsouza690 what does this mean, what exactly I need to do please help
@@AgroboyTFT what does this mean, what exactly I need to do please help
I would suggest moving schemas to a root level folder such as /schemas and then reuse it in both the react-hook-form AND in the API endpoint. The data sent in the request body from the onSubmit handler is output from zod anyway, so it can't hurt. But now people can't just do a raw request to the endpoint with invalid data (since the checks only happen on the frontend).
Additionally, there's no need to track if a react-hook-form is loading yourself -- there's a property formState.isLoading which is given back from useForm().
Thank you for those tips, I will try to usr them for the next tutorial!
Im so fking guilty that im consuming this content for free. This is too good to be free.
Happy you like it!
Znao sam da si nas. Pa mi balkanci smo mozgovi nema sta. Svaka cast prijatelju na ovom poucnom videu 🍻
Craziest project i have done so far in my tech journey, but boy was it worth it! Thanks so much Antonio
Great job!!
Did you use the latest next14 of stick to his version?😊 cus I'm about to start but I'm worried about the versions
Yes. also my stripe api version was different but it all worked out
@@temitopedavid9508
Thanks man
bro planetscale is not giving free plan now . how u did it or did u found any alternative
As a beginner in web development this complete e-commerce tutorial has given me an incredible confidence boost. I just completed and deployed it and i must say, I have never learnt so much from a single tutorial as I have with yours. Your content is is of the best quality, thank you so much. Also i have been trying to join your discord but the link in the description doesn't seem to work for me.
Happy you like the project. Does the link in the description redirect you to my personal website?
@@codewithantonio Yes it does, and I subscribed to your newsletter.
Hey. I need some help please
Words cannot describe how spectacular you're content is , I mean like you're on whole other level
Well done , I appreciate the effort and the work 🙏. We all do. 👏👏
Thank you so much 😀
@@codewithantonio you're welcome mate 🙏
@@codewithantonio otherwise Antonio why i'm still getting this warning for decimal object: Only plain objects can be passed to Client Components from Server Components. Decimal objects are not supported
For anyone experiencing difficulties uploading more than one image, I encountered the same issue and managed to resolve it. Here's the solution I implemented:
"
image.url)}
disabled={loading}
onChange={(url) => {
const newValue = [...field.value, { url }];
field.onChange((field.value = newValue));
}}
onRemove={(url) => {
const newValue = field.value.filter((current) => current.url !== url);
field.onChange(newValue);
}}
/>
"
thanks bro it's work for me
thanks it's work for me too
Thanks brother!
Tq Brother i am ddebugging this since 2 days tq
You are not only give us a tutorial, also you teach us how to build it. Thank you so much Antonio 🎉
Happy to hear that!
Wow, Man Your UA-cam channel is a game-changer for coding enthusiasts! Your tutorials are Just amazing, making complex concepts a piece of cake. Highly recommended!
Glad you like them!
Sensational!
I'm now delving into typescript and React and this project is amazing!
What type of architecture is used in this application?
You don't have 1mil subs too? and you have the greatest tutorial too? Damn.
hahaha glad you like the content!
4:09:41 for anyone get error and file upload doesn't appear use onSuccess={onUpload} instead onUpload={onUpload}
Frontend dev here, Your tutorials are amazing man! Really appreciate all the time you invest in teaching people! One suggestion; eslint and prettier can sort your imports (on save) so you don't have to (check simple-import-sort/imports).
Finally completed the project. Took me 15 days but totally worth it. Thank you Antonio!!!
Heyy , bro can you please send me the GitHub repo of your project?
Actually I have to submit an e-commerce project in my college. I try my best to make it but errors are not resolved.
Issue at 6:56:41 seems to be fixed. No need to add the @ts-ignore
Thanks for noting that!
Thank you so much for making this, it's exactly what I needed.
I found a solution for your relative imports problem in vs code, just paste the following in your vs code settings.json file:
"typescript.preferences.importModuleSpecifier": "non-relative"
that way your import suggestions in vscode will always start with '@/' and you won't have to change it manually every time.
Thank you for that tip!!
This project looks awesome !
I have 1 question, i only looked at the intro so feel free to correct me if i am wrong, but it looks to me that you can purchase a product only once since in the dashboard there is no stock functionality, so when you checkout it archives the product, wouldnt it be better if you could specify stock per product/product size and once you checkout it reduces the stock and when stock gets to 0 of particular size or product it gets archived?
I noticed this as well.
It's actually not usable as a shop due to this bug without a TON of un-archiving.
Once i complete my AWS certification i am going balls deep on this tutorial.... this looks bloody amazing. Antonio you're the man!
IDK Antonio is the best teacher on YT no doubt! Like the way everything is so structured, the way he explains things....everything is perfect. Thank you so much man! I truly appreciate you!
Hi Antonio, for "NEXT_PUBLIC_API_URL" in the environement variables, the categoryID is hardcoded.....what if I create a new store then in that case NEXT_PUBLIC_API_URL
will be manipulated manually.....so how to make this dynamic ??
Same question, if you found any solution please help me
me too I encounted this problem as well with the billboards. It's also hardcoded. I don't know but then I think you can include them as variables in the env files and the load them from the env files into the project
By the way, this course MUST be premium not free on UA-cam! No one have created this kind of project even on the entire internet at this time!
Thank you for the kind words!
Hi Antonio, I loved your project but I am having problems with the Image upload I am only able to upload one image, but I can't able to upload multiple images
Did you find any workaround for this? I'm having the same problem
@@caiooliveira13cs Not yet I started doing something else but I got a problem actually when we upload images we should arrays of strings in the URL object but instead it replaces the initial string with last uploaded strings
you found the solution? i tried this onChange={(url) => field.onChange((prev:{url:string}[])=>[...prev, {url}])} ...but when i try to submit form error appears saying expected array, received function
i am having same issue got any solution?
@@udm27 did you resolve it?
I am actually short of word on how much remarkable insights is packed in this tutorial. Wow
Thank you!
You could have sold this on Udemy but you chose to post it here on UA-cam for free. What a legend. Thank you so much!!
hey i am having 3 errors hydration errors at time stamp 52:43 can you help me with it ??
me too
its because of the extensions in your browser disable them
@@AbbaUmar-m8w thank you
Planet Scale is not free anymore
Your project is really good. However, the explanation is not good. Many complex things you dont explain while a lot of simple thing you repeatedly did
Man, that's insane quality of content! You're LEGEND! Please don't stop!
Thank you!
You've just taken 11 hours of my life. Well done and thank you for sharing ❤
I think you might have just dropped a nuclear bomb in the dev community on UA-cam
Thank you!
Hi Antonio,
Thanks a lot for all of your efforts putting in your really helpful videos.
I have a problem following your tutorial, at about ua-cam.com/video/5miHyP6lExg/v-deo.html when we have to make api routes public.
Mine do not want to be public. I always have a 401, even if I copy-paste your middleware.json content in mine...
Do you have an idea?
Hi, glad you like my content, have you tried comparing my github package json Clerk to be same as yours? If that is still working, can you try removing the .next file and removing node_modules and reinstalling using npm i and then npm run dev again?
@@codewithantonio i have the same issue , can you prodive clerk package ? i cant continue with frontend part without solving this issue as i cant read data from localhost:3001
Hi Antonio, I just want to say thank you so much for sharing this hard work. It helped me a lot to understand all these technologies working together. You are an amazing coder and after 5 days I finally finished the project! I’m so happy with how it turned out and the flexibility it offers afterwards to customize it. Thanks again, you are awesome! 🤩
I just discovered your channel. You deserve millions of subs dude. Paid for the workshop as well. ABSOLUTELY LOVE THE VIDEOS!!!!
Thank you so much!
Best project I've ever seen. Thanks Antonio so much.
I like the way he represents the command line. It just straight forward
Glad you like it
It took me 2 months to complete this project thanks Antonio.
Happy you made it! Great job!
Svaka čast Antonio! Lots of love from Maribor
Hvala!
Humanity is blessed to have you, dear Anonio. You are great.
I just came here to like the video and to cheer my fav youtube tutor.
I can't build this highly functional web app at all.
Keep up with the good work man❤❤
Thank you for your kind words! This project is certainly advanced, but i encourage you to try it! Regardless if you get stuck at the first 30 minutes or first 5 hours, you will learn something! And then come back when you are ready for more! Also, there is my discord in the description if you have a specific error you cannot solve yourself
Wow dude
not many awe worthy E-Commerce tutorials out there but this takes the cake 🍰
Thank you a lot!
by far the best fullstack course that i watched on youtube🙌
This tutorial is seriously awesome, bunch of new stuff for me to learn. Everything is covered perfectly. And hey, thank bunch of times for also being so helpfull on Discord. Dont know where you are finding time for it, its unreal! 👏👏
I just completed the project. It took me 7 days. Thanks a lot for all the efforts you put into this tutorial.
And to all the people having errors on the project and that think it’s a version problem, I completed this tutorial 5 months after is has been released and everything is still working perfectly. So just concentrate and make sure to import all components from the right place and make sure to write the source code as it is in the project.
Hi , can you send me the frontend, i have tried all day yesterday but I just cant connect the webpage with the api of cms ,
Dude, I have no words this project!!! My Props!!!
Glad you like it!
I just finished the tutorial, and right now my project is in production. First of all, thanks, Antonio, for sharing this tutorial with us. It's amazing how much you can learn by completing an entire project. One suggestion to enhance this tutorial even further is to share a bit about your strategies for approaching the structure, such as how to choose technologies and the architecture of each project. It would be awesome. However, I ended up creating my own sketches to better understand the structure myself. It's important to review the entire project to gain a deeper understanding, both during and after execution. It has greatly helped me in my journey to understand this kind of project. But overall, THANK YOU A LOT.
hey can i know that how this app is running without backend, auth is done by clerk and db is managed by planetscale , but how r u making calls to db , is it also done by planetscale
@Antonio bro: You must be kidding dude, who produces this kinda content in Full HD and in ultra great detail. You rock. Definitely deserve way more Subs nd views.
Thank you!
Best video.
I played complete ads to support this content without skipping.
Great Job ! Svaka Cast !
Thanks for the quality and the work you put into this projects for us. 👏👏👏👏
Thank you very much!
Thank you so much for this fantastic tutorial on building a full-stack e-commerce application with Next.js 13, React, Tailwind, Prisma, and MySQL! The step-by-step guidance was incredibly helpful. I successfully integrated PayHere instead of Stripe, and it works perfectly. Your video covered everything I needed, and I truly appreciate the effort you put into creating such a comprehensive resource. Thanks again!
@@Ai-professor. yes. i will try. but make sure according to the video. i do the same. i am also get some issues with image uploading part. but I re do again to check what I miss.
@@Ai-professor. hey bro planet scale is planetscale is paid what are you using it neon