Build even more comprehensive, modern applications such as an AI-Powered Movie App and an NFT Marketplace application - Check it out now - www.jsmastery.pro 🔥 I asked Sanity to hook up some free stuff for this video... They made a custom boosted free plan 👉 www.sanity.io/javascriptmastery2022
Please make full stack blog application with dark feature & infinite scroll & full responsive and support google ads . I request you please make it with your ♥️
I think it is not considered good practice to send sensitive information, such as cart items, directly from the client side to Stripe. This is because a malicious user could modify the prices in the line_items array before the request is sent. To mitigate this risk, it would be more secure to use the Product ID's in the line items instead of the price itself. This way, on the server-side, you can fetch the correct price for each line item. Also, making the Stripe Secret key publicly available can be very dangerous. I just wanted to give some feedback, I hope you don't take it the wrong way. Thanks for the great tutorial!
Thanks for your advice, I recently learn backend and your way to do the process is the right way for secure the data. Maybe this tutorial is a good way to practice the basics of React but is mandatory have in mind the security factor.
Is he making the stripe secret key publicly available? The only key he’s using on the client side is the publishable key, which is meant to be used on the client side. The secret key is being used in the api folder which is code next.js makes sure does not end up on the client-side. At least, this is what I understood from what I’ve learn from next.js. Am I thinking incorrectly? Regarding the cart items, I also agree. Using the price sent from the client-side is not a good idea, since it can be easily manipulated.
I'm from rural Nigeria and I'm about to start watching and learning. To give such great content for free is a blessing to humanity. This world is a better place because of people like you. God bless you. I hope to learn a lot.
It is one of the best tutorials that I have ever seen in my web dev career. A very clean step by step process with each logic beautifully explained and in very polite way. Hats Off 🔥. I finished it in one and half day. At first I didn't get what's going on , I just followed him and created the entire website. After finishing I started studying the whole project and I concluded some points: First simply we set up the Sanity. We created two database schemas one for products and other for our banner for homepage. After setting up the schemas we created the front page of the website. Now it's on you how you wanna design the pages. The main thing he teach us that how to fetch the data from Sanity Schemas and how to display them. If you know this then you can implement the logic in any kind of website and I love that part. So we created a home page with a hero banner, products listing and footer. Also a navbar. Then we created products detailed page logic. We just need to fetch the specific product from the sanity products schemas. Before we were fetching the all products to display on the home page but now we only need the specific product to render dynamically on a specific page. So this can be done easily in Next JS. Again you can design that product detail page whatever you want but we learned how to fetch the specific data. After that we created a context using React Context hook. If you know even the basics of this hook then this part would feel like piece of cake. We created some states and then passed into the context so we can use them anywhere. We could also create those states in our slug or other pages but that's what the beauty of Context Hook that we stored all the states and functions in a single Context. And then the cart logic was the lil bit difficult for me but still I'm learning and experimenting on it. I think instead of using "prevQty" we can just increment the qty by using setQty(qty +1); It's very simple we don't even need that "prev" logic cuz that's bit confusing. And then that stripe logic was game changer for me . That filled the entire website with life. Thank you so much bro. I got a great opportunity to learn a lot from this tutorial. Just keep it up. Looking forward.😁
incredible project, as react developer i can tell everyone trying to learn just follow the steps, try to understand every task and if you feel you are struggling with something pause the video and do some research to understand it very well till you feel comfortable with it and keep going, at the end you will able to build project on your own and get a job. good job my friend you are always the best
hello, please there is a part of the video i didn't understand. when creating the Project, there is a stage where he talks about overwriting dependencies. i did not understand what he did at that stage because he was going quite fast. Please wound you mind explaining what he did there?
I have never commented on any CZcams video before but this one got me overwhelmed with how detail and simple to understand. Kudos 👌👍👍👌 you are an amazing teacher
Adrian you’re just a gift from God the way you explain the concepts is just phenomenal…..Thanks again for another amazing project that I can code along and learn new web technology and add on my portfolio. Please keep doing a good work. You’re blessing a lot of people out here and inspiring 🙏🏼🙏🏼🙌🏽❤️🔥🙌🏽❤️🔥
I would have loved to follow this step by step process, but this needs to be updated. I ran into so many compatibility issues and prompts I didn't know how to deal with. When running the commands the same way as the video, I got prompts I wasn't sure about how to proceed with. I also got files and folders that appeared, that when I compared to the video/github it wasn't the same. I had additional folders like "app" that got created, and in the video, it never got created, so things became confusing. I spent more time trying to figure out these issues, than actually writing code and following along. All this stuff is new to me and ended up being frustrating. There really aren't many videos out there that show a step by step guide on how to use these specific technologies together, so an update for 2023 would be perfect.
@@ulenund9867 I also ran into the same issues but I decided to find my way around it and I'm smooth sailing. The only thing is to find the updated equivalent of the deprecated functions and refactor some of the components to render on the client. NextJS components are now server components by default so button interactions and stuff don't work till you make them client components. That's all
What I like the most is the pronunciation, I'm improving my English while I'm learning to become a developer. And with you I don't need subtitles, it's great. But by far the best thing is your content and the professional approach you give it. Thank you very, very much 😀😀
@@billalfarabi5589 yes man i suggest building a site that would showcase your projects. In that case employers would see what technologies u got under your belt. This method works for me best.i got alot of messages on linkedIn after I posted my portfolio.
I'm glad everyone else is having great results from this tutorial. I am unable to get sanity working? I wasn't prompted to setup an account or name the project. I tried installing TLS 1.2.. not sure what I'm doing wrong.
bro you are an angel for real the amount of effort you put on you videos shows that you not doing it for money you just love what you doing and we love you keep up the good work my G
hello, please there is a part of the video i didn't understand. when creating the Project, there is a stage where he talks about overwriting dependencies. i did not understand what he did at that stage because he was going quite fast. Please wound you mind explaining what he did there?
Your courses are even more better than some Udemy paid courses. Thank u so much for sharing this great tutorial. Indeed u make learning easier for people like me.
This is incredible! Thank you for all you do! You have the most intricate projects and the best tutorials. My only fear is that you'll become so popular that employers will begin seeing your impressive projects on everyone's portfolios and I won't be able to stand out as much haha. But seriously thanks for all these awesome and well put together videos, you're great at teaching and I've learned a lot
This tutorial is really great man, learned a lot and even the small stuff like ctrl+clicking a component to open it, ctrl+shift+r for a hard reset, and ctrl+space for easily importing components are really great tips that save time
hello, please there is a part of the video i didn't understand. when creating the Project, there is a stage where he talks about overwriting dependencies. i did not understand what he did at that stage because he was going quite fast. Please wound you mind explaining what he did there?
Wow. I requested this project on Discord and you did it! You were probably working on this long before I made that post but still amazing. I cannot tell you enough how thankful I am that you create such useful content.
hi I am from South Korea. I watch your videos every day. Thank you so much for always uploading great videos. your video is cool and the content is cool!! And I'm not good at English, but I can understand you, so this is a perfect video. Thank you for always.
Thank you so much for being a loyal subscriber and for your kind words! I'm glad you enjoy the videos and that you can understand them. :) Keep watching and thanks for your support!
Extraordinary content, thanks to you I have managed to materialize my dream of being a developer, I have learned a lot from your videos. Immensely grateful. I admire you incredibly.
Sou brasileiro, e esse tutorial é de longe o melhor que já vi, mesmo tendo que ler a legenda e fazer ao mesmo tempo, obrigado por disponibilizar esse conteúdo gratuitamente!!
Hands down this is the best channel that brakes everything down for you!! At 56:15 do we really need to specify "slug.current" rather than just "slug"?! For each product component its own unique slug will be it received from the parent.
You again won my heart! Incredibly a great topic. I would like you to request to kindly include some entities like stock number and automatically update the stock whenever a product is bought by someone. Assumr that our company is a large one and If we receive 1000 of new product in a single day, say, then how can we manage uploading those huge amount of images (1000 × 4 = 4000 images in a single day) in SANITY and also update its stocks. This features would enhance the app more, so I request you to kindly take care of the above points.
Thank you SO MUCH for your effort to make such an incredible, comprohensive tutorial, and sharing your knowledge/experience with us I wonder if you also could make a video (part 2) to cover the integration of a Commerce API to view in a dashboard the inventory management, orders, sales, emails, etc. (with platforms as commerce layer, snipcart, shopizer, others)? Greetings from the Netherlands!
I feel so happy when I see you post a new video ❤️, your project based tutorials are priceless literally. So thank you, if i may just suggest to make one day a full functional bug tracker web app.
Thank you so much for your kind words! I'm glad you enjoy my videos and find them helpful. I'll definitely keep your suggestion in mind for future projects. :)
@@javascriptmastery wow you've replayed, thank you so much, we really should appreciate what you're doing for us with this quality content 🔥 you're making for free, that's huuuge man. Keep up. And we'll try to support u the way we can. Thanks for keeping the suggestion in mind 😉, love u.
For vercel if you have problems for not loading the website like in your local host just follow all the commands for git in the video and will work fine . for me it worked 100% . Awesome project now it's live finally !
anyone who have problem with that error import sanity/base or something like that at the point when you create a schema.js , you need to rename index.js first with schema and vs code will automatically update and do where need to be replaced if still don't update then you need to change in sanity.config.js the import like this import { schemaTypes } from './schemas/schema' . Also to not have that error like up you need to put this in schema.js file : import product from "./product" import banner from "./banner" export const schemaTypes = [product, banner]
@@alinionutraileanu7887 also, did u not faced errors with client.js file and those exports? im getting this error n im stuck './lib/client.js:1:0 Module not found: Can't resolve '@/sanity/client''
Great tutorial, helped a tremendous amount in understanding Next.js and ecommerce stores in general. If I had to pick out some cons, you never implemented the local storage like you promised, and the website wasn't perfectly responsive, but that's just knit picking!
Exactly what I just noticed. I followed the tutorial to build the app but I noticed no localstorage integration, but he used localSorage.clear() 😅. Have you implemented it?
Thank you so much for the great course! I enjoyed the most part of it. However, there are 2 major bugs😟😟 in this project which will make people hesitate to really use this in their portfolio. The first major bug is, if you add ItemA to cart, then add ItemB to cart, then you add ItemA to cart again, everything will be broken once you click the cart icon in the top right corner on the page. The error reads: "TypeError: Cannot read properties of undefined (reading '_id'). The second bug is, when you increment ItemA quantity to 3 on its page, without clicking add to cart button, then you go to ItemB page, the quantity of ItemB will be 3 as default, which should be 1 instead. The first bug is really a deal breaker for those who are eager to put this project on their portfolio. I spent almost a day to code along and build the project, yet in the end I found out this critical bug. It will be super appreciated if you can provide the solution to the bugs, especially the first one. Thank you!
in StateContext.js, end cartItems.map with an else statement that just returns cartProduct. const updatedCartItems = cartItems.map((cartProduct) => { if (cartProduct._id === product._id) { return { ...cartProduct, quantity: cartProduct.quantity + quantity, }; } else { return cartProduct; } }); When it maps through cartItems, if (cartProduct._id !== product._id), it returns undefined. This fixes that issue.
By the way, the second bug I mentioned in this comment can be fixed by adding a useEffect hook in the ProductDetails Component in pages/product/[slug].js file. Inside the ProductDetails component, add below: useEffect(()=>{ setQty(1) }, [product.slug]) This way, whenever the product's slug changes, the qty to be rendered will change to 1. Good luck everyone!
If by any chance you run into an issue with the javascript mastery coupon saying "cannot load scripts because running scripts is disabled " then clear your console and input this first "set-ExecutionPolicy RemoteSigned -Scope CurrentUser" click enter and then type "Get-ExecutionPolicy" click enter, then lastly enter "Get-ExecutionPolicy -list" and thats all. I hope this helps. God bless PS. God bless you Mr. Adrian
thank you so much for this video, please in your next ecommerce course, please add products with multiple variations, no e-commerce tutorial online covers that, all have single product style.
Thank you so much Adrian, even almost a year after your tutorials are still so high quality, I just finished the project, though I could not use Stripe because of my country, I was able to use paystack to handle the payments. Really appreciate you Bro
Words cant explain the extraordinary quality of the course "Strongly Recommended" I am learning development on different platforms like youtube,udemy,coursera .. since 2 years , But believe me this channel is perfect! Real JS Master ... Keep it up - God bless you~
I think one of the best resources Adrian has is to leave the typos as much as he can so we can't help with our OCD and must watch the entire tutorial until he fixes them all.
Amazing Video! But I have one thing: It would be really cool to see you code the CSS and explain it. I know it would lead to a longer video but it could be really useful for the viewers as web design "unfortunately" includes styling :D
Thats a good point. CSS is so far from what is interesting when trying to learn the inner workings of everything. Styling obviously is a major component, and the master does well with not bringing in multiple conflicting files that do more harm than good when just wanting to get things rolling, but I would also like to painfully get a better grasp on exactly what the styles are doing. Ive been the last 6 hours messing around with the footer banner for shits and giggles, and I always arrive at the same conclusion "WE GOTTA KEEP EM SEPERATED"
@@javascriptmastery I would suggest getting further into query language GROQ that can be tested in vision - sanity, where we get to connect data for the potential client. I am mainly using tailwindcss, benefits are endless.
When I say that I learn much more with youtube videos I'm talking about this. Sincerily one of the best contents that I have seen on youtube. I'm from Brazil and I'm so thankful about all your videos teaching us how to improve our habilities. Thank you so much.
Adrian This is so dope !! I always look forward for your next project. I was just wondering if you could make a video about building a youtube like project with the MERN Stack. Thank you Keep up the good work
I must say, you really work very hard to provide newie learner for getting their hands on such Tech. I pray after getting a dignified job I could buy you a coffee.
3:04:10 to onward. You might face issue with bad error 500 req.body is not a function that is because we are passing stringified JSON and then applying map on string body .. Change " req.body.map((item)=>{} " to " JSON.parse(req.body).map((item)=>{ } "
You're just a ninja :D Thank you for your work Adrian! Btw. guys if you have any problems while adding multiple products "again" then make sure you always return an item in map methods: const onAdd = (product, quantity) => { const checkProductInCart = cartItems.find( (item) => item._id === product._id ) setTotalPrice((prev) => prev + product.price * quantity) setTotalQuantities((prev) => prev + quantity) if (checkProductInCart) { const updatedCartItems = cartItems.map((cartProduct) => { if (cartProduct._id === product._id) return { ...cartProduct, quantity: cartProduct.quantity + quantity, } return cartProduct //
thanks for this ! please i try implement local storage but i was not able to persist my total and total quantity since is not in the cart. do you have any sudgestion?
@@kayub007 You have access to all the necessary data in StateContext.js. Try to update localStorage once you add or remove items from the cart, using localStorage method setItem. Note that if it is an object, first you will have to use JSON.stringify(obj) on this.
i would really love to see the updated version on this course, i love jsMastry but this course is now outdated, dependencies do not install, pages folder is missing, stripe is a real pain and its asking too much to install when i run npm command that is not covered in this couse.
I was just relaxing watching the video until I saw that you added a marquee. I couldn't find a way to get it working on my project, so that was a miraculous coincidence I found it in your video. Huge thanks for all the knowledge you provide in this and all your videos
As usual, great content. Do you think for one project you could show how you came up with the CSS file? The JS and logic is super helpful, but understanding how you decided to lay out various CSS components would be really useful!
@@javascriptmastery I'd be so happy if you do! It's the only aspect of web development that I need to watch other CZcams channels to get a grasp on (since you don't cover it). Maybe make a part 1 video showing how you took a Figma design and translated it to actual CSS, with part 2 being the rest of the coding logic?
But he does say the focus is not CSS. This is why he does not show us how he styles it. He wanted us to focus on the core functionality which more important in this case. However I do understand your point in that it's good to understand where they are coming from design wise.
I have to be frank Adrian, your conceptual teaching makes me very comfortable to understand tricky technical concepts. I do also have to tell you that sometimes I can quickly find out many helpful solutions from your GitHub codes to certain problems and your daily newsletter definitely helped me save time to focus mainly on the most recommended tools and technologies. Can't wait for the new NextJs project, you are really the superstar ⭐
I buy React course from Maximilian from Udemy, really bro you are life saver for him. If anybody read this comment trust me, when you come to lection FOOD APP in Maximilian course, when you see explanation with useContext you will destroy your PC.
This video is great no doubt about that. It would be great if you could show how to create customer account where order tracking and purchase information can be shown. Great stuff keep up the good work
JSM, Adrian, I would like to take this time to thank you ever so much, for providing us this unbelievable content, with your well-prepared calm professional delivery, always seems to take the complexity out of what we are doing. Amazing Stuff H
THANKS ADRIAN!!!...This is a great course. I made did twice. I learned a lot!!!...and I also worked fixing some bugs which is a part of the learning process as well. For the future, I would like to see this same project with log in feature and localStorage implementation...
Thanks alot for your amazing content, you are a guide to my personal and practice projects, realy Thanks. You are awesome.🥳👌🏼 Can you make another project with GraphCMS please? Maybe a courses platform with login for profesors and students it should be awesome. Greating from México City 🇲🇽!! Thanks for your work.
🙌 Thank you so much for making this great content and teach us for free 🙌. I have to say the way you structure and put out your content is absolutely perfect ✨. Incredible helpful. I have just 1 week of react so I will wait before dive into this proyect but I already watched the intro and got me very excited and motivated me to continue learning. Your web developer roadmap is incredible clear and helpful. I started with your crash course on React and I will go through all your videos. I know this will help me to get a tech job. Thank you so much. Keep going 👏👏👏
hello, please there is a part of the video i didn't understand. when creating the Project, there is a stage where he talks about overwriting dependencies. i did not understand what he did at that stage because he was going quite fast. Please wound you mind explaining what he did there?
Attention! For anyone who has trouble with getStaticProps around 1:28:00. Getting null as product is due to the uppercase issue. Code this const query = `*[_type == "product" && slug.current == '${slug.toLowerCase()}'][0]`; instead of slug.current == '${slug}'][0]`... toLowerCase() will FIX this problem and get your project alone.
if you're having problems with the parsing error after creating the .babelrc file. do this instead: { "presets": ["next/babel"], "plugins": [] } and do not forget to update the eslintrc as well
You make my dream come true, sir. Thankful for all of your kind and wonderful open source projects. I truely appriciate all of your efforts from the core of my heart. Take 💙💙🖤🖤 sir
hello, please there is a part of the video i didn't understand. when creating the Project, there is a stage where he talks about overwriting dependencies. i did not understand what he did at that stage because he was going quite fast. Please wound you mind explaining what he did there?
Build even more comprehensive, modern applications such as an AI-Powered Movie App and an NFT Marketplace application - Check it out now - www.jsmastery.pro 🔥
I asked Sanity to hook up some free stuff for this video... They made a custom boosted free plan 👉 www.sanity.io/javascriptmastery2022
Please release the nft marketplace built fast
🎉This channel will reach 1 mil this year no doubt about it
@@banasthalividyapithevents coming in mid May!
@@Alex-bc3xe let's hope so! 🎉
Please make full stack blog application with dark feature & infinite scroll & full responsive and support google ads . I request you please make it with your ♥️
I think it is not considered good practice to send sensitive information, such as cart items, directly from the client side to Stripe. This is because a malicious user could modify the prices in the line_items array before the request is sent. To mitigate this risk, it would be more secure to use the Product ID's in the line items instead of the price itself. This way, on the server-side, you can fetch the correct price for each line item. Also, making the Stripe Secret key publicly available can be very dangerous. I just wanted to give some feedback, I hope you don't take it the wrong way. Thanks for the great tutorial!
Thanks for your advice, I recently learn backend and your way to do the process is the right way for secure the data. Maybe this tutorial is a good way to practice the basics of React but is mandatory have in mind the security factor.
Thank u ❤❤❤❤
Hey can you provide some tutorials which provide all the information which you describe
Is he making the stripe secret key publicly available? The only key he’s using on the client side is the publishable key, which is meant to be used on the client side. The secret key is being used in the api folder which is code next.js makes sure does not end up on the client-side. At least, this is what I understood from what I’ve learn from next.js. Am I thinking incorrectly?
Regarding the cart items, I also agree. Using the price sent from the client-side is not a good idea, since it can be easily manipulated.
Who are u? An engineer? Why I have to trust u?
I'm from rural Nigeria and I'm about to start watching and learning. To give such great content for free is a blessing to humanity. This world is a better place because of people like you. God bless you. I hope to learn a lot.
It is one of the best tutorials that I have ever seen in my web dev career. A very clean step by step process with each logic beautifully explained and in very polite way. Hats Off 🔥.
I finished it in one and half day. At first I didn't get what's going on , I just followed him and created the entire website. After finishing I started studying the whole project and I concluded some points:
First simply we set up the Sanity. We created two database schemas one for products and other for our banner for homepage. After setting up the schemas we created the front page of the website. Now it's on you how you wanna design the pages. The main thing he teach us that how to fetch the data from Sanity Schemas and how to display them. If you know this then you can implement the logic in any kind of website and I love that part. So we created a home page with a hero banner, products listing and footer. Also a navbar.
Then we created products detailed page logic. We just need to fetch the specific product from the sanity products schemas. Before we were fetching the all products to display on the home page but now we only need the specific product to render dynamically on a specific page. So this can be done easily in Next JS. Again you can design that product detail page whatever you want but we learned how to fetch the specific data.
After that we created a context using React Context hook. If you know even the basics of this hook then this part would feel like piece of cake. We created some states and then passed into the context so we can use them anywhere. We could also create those states in our slug or other pages but that's what the beauty of Context Hook that we stored all the states and functions in a single Context.
And then the cart logic was the lil bit difficult for me but still I'm learning and experimenting on it. I think instead of using "prevQty" we can just increment the qty by using setQty(qty +1); It's very simple we don't even need that "prev" logic cuz that's bit confusing.
And then that stripe logic was game changer for me . That filled the entire website with life.
Thank you so much bro. I got a great opportunity to learn a lot from this tutorial. Just keep it up. Looking forward.😁
i am getting error in setup of sanity could you help me
@@PANDEYAYUSHPRAKASH what kind of error it is
How can I reach @salman Haider. Need to talk to u
@@aquibjameelkhan1118 yes bro
Is next js a prerequisite for this project ?
incredible project, as react developer i can tell everyone trying to learn just follow the steps, try to understand every task and if you feel you are struggling with something pause the video and do some research to understand it very well till you feel comfortable with it and keep going, at the end you will able to build project on your own and get a job.
good job my friend you are always the best
This man teaches in a very easy to understand way. Udemy teachers should emulate him. Kudos Adrian
The best code teacher I’ve ever heard. Calm and patient no background music, no ADHD. Like your style :)
hello, please there is a part of the video i didn't understand. when creating the Project, there is a stage where he talks about overwriting dependencies. i did not understand what he did at that stage because he was going quite fast. Please wound you mind explaining what he did there?
I have never commented on any CZcams video before but this one got me overwhelmed with how detail and simple to understand. Kudos 👌👍👍👌 you are an amazing teacher
When he says "This is the best project video that you can currently find on the youtube", I BELIEVE THAT 🔥❤
Thank you so much for your support!
@@javascriptmastery You deserve more than that Adrian
hey @Developer Junaid I am facing little problem while following this Tutorial , can you please Help Me to solve this ?
@@shubiie Yes sure, how may I help you?
Can anyone send the DFD diagram and ER diagram of this project?
Adrian you’re just a gift from God the way you explain the concepts is just phenomenal…..Thanks again for another amazing project that I can code along and learn new web technology and add on my portfolio.
Please keep doing a good work. You’re blessing a lot of people out here and inspiring 🙏🏼🙏🏼🙌🏽❤️🔥🙌🏽❤️🔥
I so much agree
Thanks so much for the kind words! I'm glad you're enjoying the projects and learning new things. :)
Pay With Stripe is just redirecting, works sometimes only. What to do ??
I would have loved to follow this step by step process, but this needs to be updated. I ran into so many compatibility issues and prompts I didn't know how to deal with. When running the commands the same way as the video, I got prompts I wasn't sure about how to proceed with. I also got files and folders that appeared, that when I compared to the video/github it wasn't the same. I had additional folders like "app" that got created, and in the video, it never got created, so things became confusing.
I spent more time trying to figure out these issues, than actually writing code and following along. All this stuff is new to me and ended up being frustrating. There really aren't many videos out there that show a step by step guide on how to use these specific technologies together, so an update for 2023 would be perfect.
agreed, I think the sanity cli he uses is why we cant get it to work
Ya I'm experiencing the same issue after putting the project on hold
@@davidrubianocripto4452
I am currently facing the same issues on my end.I followed the whole process but came up with bugs & became frustrated.
@@ulenund9867 I also ran into the same issues but I decided to find my way around it and I'm smooth sailing. The only thing is to find the updated equivalent of the deprecated functions and refactor some of the components to render on the client. NextJS components are now server components by default so button interactions and stuff don't work till you make them client components.
That's all
What I like the most is the pronunciation, I'm improving my English while I'm learning to become a developer. And with you I don't need subtitles, it's great. But by far the best thing is your content and the professional approach you give it. Thank you very, very much 😀😀
This man!! I have no words to just thank you! ♥️ only God can express my gratitude towards you!
I'm glad I could help!
I got my first interview for frontend dev next week because of you. Hopefully i pass it. Thank you man 🥹
Which job site you got it?
@@billalfarabi5589 posted by portfolio on linkedin.
@paradox, i am also junior frontend developer, i am job seeker. I have LinkedIn account. Whose will be perfect connection for my job or interview?
You're welcome! Best of luck to you!
@@billalfarabi5589 yes man i suggest building a site that would showcase your projects. In that case employers would see what technologies u got under your belt. This method works for me best.i got alot of messages on linkedIn after I posted my portfolio.
I'm glad everyone else is having great results from this tutorial. I am unable to get sanity working? I wasn't prompted to setup an account or name the project. I tried installing TLS 1.2.. not sure what I'm doing wrong.
bro you are an angel for real the amount of effort you put on you videos shows that you not doing it for money you just love what you doing and we love you keep up the good work my G
You’ve made some amazing videos Adrian but I think this is your BEST one yet. Truly remarkable. This is a game changer. Thank you
I'm so glad you think so Joseph! Enjoy!
Does this deployment in vercel, does it free or not?
@@mohamaddarwish3765 100% free
@@stephan3199 tqsm
hello, please there is a part of the video i didn't understand. when creating the Project, there is a stage where he talks about overwriting dependencies. i did not understand what he did at that stage because he was going quite fast. Please wound you mind explaining what he did there?
I've never thought I'll see a video la this for free on youtube. You're a legend man
Thank you!
Each your project is individual... It's just incredible amazing Adrian. Gratitude ... It's a lot of efforts
Thank you so much for your kind words, I really appreciate it! :)
Your courses are even more better than some Udemy paid courses. Thank u so much for sharing this great tutorial. Indeed u make learning easier for people like me.
Thanks so much for the kind words! I'm glad you're enjoying the courses. :)
Tomorrow I've to start my first paid project! And guess what, it's a ecommerce site! What a timing!
That's fricking perfect! :D
This is incredible! Thank you for all you do! You have the most intricate projects and the best tutorials. My only fear is that you'll become so popular that employers will begin seeing your impressive projects on everyone's portfolios and I won't be able to stand out as much haha. But seriously thanks for all these awesome and well put together videos, you're great at teaching and I've learned a lot
Thanks so much, I really appreciate it! :D
I've been thinking about this for months man!!! All the employers are going to catch on to Adrian's phenomenal work hahahah! shoooooot!
I am currently wacthing your other e commerce web shop tutorial video. Loving it! But now you came out with another BANGER🤩
Thanks so much!
This tutorial is really great man, learned a lot and even the small stuff like ctrl+clicking a component to open it, ctrl+shift+r for a hard reset, and ctrl+space for easily importing components are really great tips that save time
Please how do I overwrite for dependencies, can’t find my way
hello, please there is a part of the video i didn't understand. when creating the Project, there is a stage where he talks about overwriting dependencies. i did not understand what he did at that stage because he was going quite fast. Please wound you mind explaining what he did there?
Wow. I requested this project on Discord and you did it! You were probably working on this long before I made that post but still amazing. I cannot tell you enough how thankful I am that you create such useful content.
You're welcome, glad I could help!
I was hoping tailwindcss was used, also a carousel & video as a bg of about section as clients enjoy more visual presentation of their stores.
The absolute best! Making content like this literally changes lives.
Thank you so much for the kind words! I'm glad my videos are helping you out. :)
hi I am from South Korea. I watch your videos every day. Thank you so much for always uploading great videos. your video is cool and the content is cool!! And I'm not good at English, but I can understand you, so this is a perfect video. Thank you for always.
Thank you so much for being a loyal subscriber and for your kind words! I'm glad you enjoy the videos and that you can understand them. :) Keep watching and thanks for your support!
Amazing project! As an undergraduate student, I usually learn react from your videos. Thanks for your contribution!
Thank you!
bro you are the best teacher I've ever seen. love your contents. KEEP GOING PLEASE!!!
Thanks a lot, for this valuable course. I was waiting for many days.
You're welcome! I'm glad you like it.
This project is 10 times better than the bootcamp projects. Thank you adrian.
Extraordinary content, thanks to you I have managed to materialize my dream of being a developer, I have learned a lot from your videos.
Immensely grateful. I admire you incredibly.
Thank you so much for your kind words! I'm glad I could help you achieve your dreams.
Sou brasileiro, e esse tutorial é de longe o melhor que já vi, mesmo tendo que ler a legenda e fazer ao mesmo tempo, obrigado por disponibilizar esse conteúdo gratuitamente!!
O gateway de pagamento vc utilizou o stripe mesmo?
@@fumalyson Eu acabei modificando todo o projeto, para vender regatas da NBA, mas continuei usando o stripe
Amigos vcs adaptaram para typescript ou seguiram em javascript mesmo?
@@enriquesantosdeoliveira5798 depende da proposta amigo, nao vejo pq n fzr com TS! Eh uma boa.
Esse canal é incrível
Your all videos is amazing! Never stop! Thank you!
Thanks for the support!
Definitely this is the Best E-commerce Application video on CZcams
THANK YOU!
letss goooo finally I will learn how to use sanity for a commerce shop thank you so much
Thank you so much for your support! I'm excited to help you learn how to use Sanity for a commerce shop. Thanks for being a great subscriber!
Always serving us amazing contents for nothing. Man, you are one of kind. Thank you very much!.
Thank you, I'm glad you enjoy the videos!
I do with full satisfaction. Thank you.
Really enjoyed this project overall, particularly the exposure to Sanity. Looking forward to more tutorials!
Hands down this is the best channel that brakes everything down for you!! At 56:15 do we really need to specify "slug.current" rather than just "slug"?! For each product component its own unique slug will be it received from the parent.
It's giving error on both what to do now please help
This tutorial was extremely clear, concise, and easy to follow. I'm sure I'm going to buy one of the pro courses now. Bravo!
Pay With Stripe is just redirecting, works sometimes only what to do ?
considering the content this should be a paid course. Thank you on behalf of every struggling developer out there
I'm glad you think the course is worth paid, but it will always be free. Thanks for the support!
I needed this tutorial. Thank you so much! I have been following you from a while now. You are doing an amazing job Adrian! So so grateful!!
Thanks so much! I'm happy to help :)
You again won my heart! Incredibly a great topic. I would like you to request to kindly include some entities like stock number and automatically update the stock whenever a product is bought by someone. Assumr that our company is a large one and If we receive 1000 of new product in a single day, say, then how can we manage uploading those huge amount of images (1000 × 4 = 4000 images in a single day) in SANITY and also update its stocks.
This features would enhance the app more, so I request you to kindly take care of the above points.
Thank you SO MUCH for your effort to make such an incredible, comprohensive tutorial, and sharing your knowledge/experience with us I wonder if you also could make a video (part 2) to cover the integration of a Commerce API to view in a dashboard the inventory management, orders, sales, emails, etc. (with platforms as commerce layer, snipcart, shopizer, others)? Greetings from the Netherlands!
i like ur accent when u explain over entire video, easy to understand for me who aren't native speakers
I feel so happy when I see you post a new video ❤️, your project based tutorials are priceless literally. So thank you, if i may just suggest to make one day a full functional bug tracker web app.
Thank you so much for your kind words! I'm glad you enjoy my videos and find them helpful. I'll definitely keep your suggestion in mind for future projects. :)
@@javascriptmastery wow you've replayed, thank you so much, we really should appreciate what you're doing for us with this quality content 🔥 you're making for free, that's huuuge man. Keep up. And we'll try to support u the way we can.
Thanks for keeping the suggestion in mind 😉, love u.
For vercel if you have problems for not loading the website like in your local host just follow all the commands for git in the video and will work fine . for me it worked 100% . Awesome project now it's live finally !
Bro this project is free api
@@asbaqq yes yes , just explaining for those who get some errors.
anyone who have problem with that error import sanity/base or something like that at the point when you create a schema.js , you need to rename index.js first with schema and vs code will automatically update and do where need to be replaced if still don't update then you need to change in sanity.config.js the import like this import { schemaTypes } from './schemas/schema' . Also to not have that error like up you need to put this in schema.js file :
import product from "./product"
import banner from "./banner"
export const schemaTypes = [product, banner]
Thanks bro
@@muhammadazeem7444 you're welcome !
much thanks, helped a lot
@@alinionutraileanu7887 also, did u not faced errors with client.js file and those exports? im getting this error n im stuck
'./lib/client.js:1:0
Module not found: Can't resolve '@/sanity/client''
Great tutorial, helped a tremendous amount in understanding Next.js and ecommerce stores in general. If I had to pick out some cons, you never implemented the local storage like you promised, and the website wasn't perfectly responsive, but that's just knit picking!
Exactly what I just noticed. I followed the tutorial to build the app but I noticed no localstorage integration, but he used localSorage.clear() 😅. Have you implemented it?
Thank you so much for the great course! I enjoyed the most part of it. However, there are 2 major bugs😟😟 in this project which will make people hesitate to really use this in their portfolio. The first major bug is, if you add ItemA to cart, then add ItemB to cart, then you add ItemA to cart again, everything will be broken once you click the cart icon in the top right corner on the page. The error reads: "TypeError: Cannot read properties of undefined (reading '_id'). The second bug is, when you increment ItemA quantity to 3 on its page, without clicking add to cart button, then you go to ItemB page, the quantity of ItemB will be 3 as default, which should be 1 instead. The first bug is really a deal breaker for those who are eager to put this project on their portfolio. I spent almost a day to code along and build the project, yet in the end I found out this critical bug. It will be super appreciated if you can provide the solution to the bugs, especially the first one. Thank you!
have u found a solution to it ,im facing the same issue
in StateContext.js, end cartItems.map with an else statement that just returns cartProduct.
const updatedCartItems = cartItems.map((cartProduct) => {
if (cartProduct._id === product._id) {
return {
...cartProduct,
quantity: cartProduct.quantity + quantity,
};
} else {
return cartProduct;
}
});
When it maps through cartItems, if (cartProduct._id !== product._id), it returns undefined. This fixes that issue.
@@fullmetalnun Thank you Brent! You are the best!
@@shakirkamal4958 Hey bro. See the correct solution Brent provided in the thread.
By the way, the second bug I mentioned in this comment can be fixed by adding a useEffect hook in the ProductDetails Component in pages/product/[slug].js file. Inside the ProductDetails component, add below:
useEffect(()=>{
setQty(1)
}, [product.slug])
This way, whenever the product's slug changes, the qty to be rendered will change to 1. Good luck everyone!
If by any chance you run into an issue with the javascript mastery coupon saying "cannot load scripts because running scripts is disabled " then clear your console and input this first "set-ExecutionPolicy RemoteSigned -Scope CurrentUser" click enter and then type "Get-ExecutionPolicy" click enter, then lastly enter "Get-ExecutionPolicy -list" and thats all. I hope this helps. God bless
PS. God bless you Mr. Adrian
thank you so much for this video, please in your next ecommerce course, please add products with multiple variations, no e-commerce tutorial online covers that, all have single product style.
Will do!
Thank you so much Adrian, even almost a year after your tutorials are still so high quality, I just finished the project, though I could not use Stripe because of my country, I was able to use paystack to handle the payments. Really appreciate you Bro
Hi Israel, I am also from a country where I can't use stripe. How did you integrate paystack. That would really be helpful.
@@yesayajones3725 They had a very good documentation with examples, the link is on their website
@@israelbosun4032 Please I had dependency issues while trying to spin up the app, can you please be of help,I'll appreciate it greatly!!!
You're a blessing man, just what I was looking for
You're welcome!
Sure! Number One Js Provider is this Chanel. That's my point of #View and this is why I #Type This #Script to #React. Thanks again @JavaScript Mastery
Thanks for watching!
Thank you sir I'm biggest fan of your teaching skills.
Thanks! I appreciate it.
Dude I did your last tutorial as well. You are the best teacher by far! Thank you for what you do and look forward to more videos!
Words cant explain the extraordinary quality of the course "Strongly Recommended"
I am learning development on different platforms like youtube,udemy,coursera .. since 2 years ,
But believe me this channel is perfect! Real JS Master ... Keep it up - God bless you~
I think one of the best resources Adrian has is to leave the typos as much as he can so we can't help with our OCD and must watch the entire tutorial until he fixes them all.
as usual MrHajdin making everything special and different Thanks Boss
Amazing Video! But I have one thing: It would be really cool to see you code the CSS and explain it. I know it would lead to a longer video but it could be really useful for the viewers as web design "unfortunately" includes styling :D
You're right, it would be cool to see the CSS too. I'll try to include it in future videos. Thanks for the suggestion!
Thats a good point. CSS is so far from what is interesting when trying to learn the inner workings of everything. Styling obviously is a major component, and the master does well with not bringing in multiple conflicting files that do more harm than good when just wanting to get things rolling, but I would also like to painfully get a better grasp on exactly what the styles are doing. Ive been the last 6 hours messing around with the footer banner for shits and giggles, and I always arrive at the same conclusion "WE GOTTA KEEP EM SEPERATED"
I mean, even just looking at the separate CSS file and referring to the corresponding class works just as fine as long as you know css
@@javascriptmastery I would suggest getting further into query language GROQ that can be tested in vision - sanity, where we get to connect data for the potential client. I am mainly using tailwindcss, benefits are endless.
When I say that I learn much more with youtube videos I'm talking about this. Sincerily one of the best contents that I have seen on youtube. I'm from Brazil and I'm so thankful about all your videos teaching us how to improve our habilities. Thank you so much.
Adrian This is so dope !! I always look forward for your next project. I was just wondering if you could make a video about building a youtube like project with the MERN Stack. Thank you Keep up the good work
I'll definitely consider it! Thanks for the suggestion.
dude became the only youtube channel i got to for up to date react content. Always coming in clutch
amazing course. thanks for keeping my tutorial hell so much entertaining 😍😂
Thanks!
I must say, you really work very hard to provide newie learner for getting their hands on such Tech. I pray after getting a dignified job I could buy you a coffee.
Just discovered your channel. This is absolutely amazing. Keep it up!
Thank you so much for your support!
I just finished HTML CSS and Basic JS
This is probably a bit of a stretch but since my focus on making money is through e-commerce, WE GOTTA LEARN IT!
10:22 - Day 1
I have fallen in love with your contents. Man you are a alpha human
Thanks, I appreciate it!
@@javascriptmastery you are welcome
You really deserve an award for the best react tutorials. Love to see more react native videos too 💯💯
Thanks! I really appreciate it.
3:04:10 to onward. You might face issue with bad error 500 req.body is not a function that is because we are passing stringified JSON and then applying map on string body .. Change " req.body.map((item)=>{} " to " JSON.parse(req.body).map((item)=>{ } "
You're just a ninja :D Thank you for your work Adrian!
Btw. guys if you have any problems while adding multiple products "again" then make sure you always return an item in map methods:
const onAdd = (product, quantity) => {
const checkProductInCart = cartItems.find(
(item) => item._id === product._id
)
setTotalPrice((prev) => prev + product.price * quantity)
setTotalQuantities((prev) => prev + quantity)
if (checkProductInCart) {
const updatedCartItems = cartItems.map((cartProduct) => {
if (cartProduct._id === product._id)
return {
...cartProduct,
quantity: cartProduct.quantity + quantity,
}
return cartProduct //
Nice!
thanks for this ! please i try implement local storage but i was not able to persist my total and total quantity since is not in the cart.
do you have any sudgestion?
@@kayub007 You have access to all the necessary data in StateContext.js. Try to update localStorage once you add or remove items from the cart, using localStorage method setItem. Note that if it is an object, first you will have to use JSON.stringify(obj) on this.
@@adriantworek1057 thanks figured it out already
i would really love to see the updated version on this course, i love jsMastry but this course is now outdated, dependencies do not install, pages folder is missing, stripe is a real pain and its asking too much to install when i run npm command that is not covered in this couse.
being able to fix broken dependencies is a core skill for a professional dev
I was just relaxing watching the video until I saw that you added a marquee. I couldn't find a way to get it working on my project, so that was a miraculous coincidence I found it in your video. Huge thanks for all the knowledge you provide in this and all your videos
this is truly a quality content.
I hope this channel get the attention it deserve very soon
Two minutes into this *immediate subscribe*✨
As usual, great content. Do you think for one project you could show how you came up with the CSS file? The JS and logic is super helpful, but understanding how you decided to lay out various CSS components would be really useful!
I'll try to do that in my next video! Thanks for the suggestion.
@@javascriptmastery I'd be so happy if you do! It's the only aspect of web development that I need to watch other CZcams channels to get a grasp on (since you don't cover it). Maybe make a part 1 video showing how you took a Figma design and translated it to actual CSS, with part 2 being the rest of the coding logic?
But he does say the focus is not CSS. This is why he does not show us how he styles it. He wanted us to focus on the core functionality which more important in this case. However I do understand your point in that it's good to understand where they are coming from design wise.
@@javascriptmastery but the glitch of cart items getting updated with below line is not yet solved , can you please resolve it sir.
Pay With Stripe is just redirecting, works sometimes only what to do ?
Love Sanity with Next. Now You r showing best practising. Many thank You Adrian.
More to come!
I have to be frank Adrian, your conceptual teaching makes me very comfortable to understand tricky technical concepts. I do also have to tell you that sometimes I can quickly find out many helpful solutions from your GitHub codes to certain problems and your daily newsletter definitely helped me save time to focus mainly on the most recommended tools and technologies. Can't wait for the new NextJs project, you are really the superstar ⭐
If you like the teaching, check out jsmastery.pro 👌
is this project responsive?
The brand you used BOAT is an Indian Brand , great to see it in your video 👍
Thanks for letting me know!
Thanks, Adrian! You are an inspiration! The content is amazing!
Thank you so much! I'm glad you're enjoying it!
I buy React course from Maximilian from Udemy, really bro you are life saver for him. If anybody read this comment trust me, when you come to lection FOOD APP in Maximilian course, when you see explanation with useContext you will destroy your PC.
I can't explain my feelings when seeing a new project video from you. 👌 Thank you so much for everything, Adrian.
You're welcome, thank you for watching!
I don't know how this guy does this so specific in every step. Te amo viejo!
No words for your efforts Thank you so much
Most welcome 😊
After finishing your Portfolio website project , which was amazing. Now starting this, I love your contents.
This video is great no doubt about that. It would be great if you could show how to create customer account where order tracking and purchase information can be shown. Great stuff keep up the good work
Thank you so much!
ANOTHER BANGER! Thanks man I really appreciate the time you take to post these.
Everything for you Mathias! 😊
After over a year, trying to create this project is a nightmare :p
JSM, Adrian, I would like to take this time to thank you ever so much, for providing us this unbelievable content, with your well-prepared calm professional delivery, always seems to take the complexity out of what we are doing. Amazing Stuff H
THANKS ADRIAN!!!...This is a great course. I made did twice. I learned a lot!!!...and I also worked fixing some bugs which is a part of the learning process as well. For the future, I would like to see this same project with log in feature and localStorage implementation...
Thanks alot for your amazing content, you are a guide to my personal and practice projects, realy Thanks. You are awesome.🥳👌🏼
Can you make another project with GraphCMS please? Maybe a courses platform with login for profesors and students it should be awesome.
Greating from México City 🇲🇽!! Thanks for your work.
You're welcome, and thank you! I'll see what I can do. :)
we are using crog here which is an alternative to grapql and sanity use it to form shema
Your courses are so good. As soon i get a job i will definitely buy your paid courses.
🙌 Thank you so much for making this great content and teach us for free 🙌. I have to say the way you structure and put out your content is absolutely perfect ✨. Incredible helpful. I have just 1 week of react so I will wait before dive into this proyect but I already watched the intro and got me very excited and motivated me to continue learning. Your web developer roadmap is incredible clear and helpful. I started with your crash course on React and I will go through all your videos. I know this will help me to get a tech job. Thank you so much. Keep going 👏👏👏
Thank you so much for your kind words! I'm glad you're enjoying the content and finding it helpful. Best of luck with your learning journey!
What are the prerequisites 🥲
How's your progress going
hello, please there is a part of the video i didn't understand. when creating the Project, there is a stage where he talks about overwriting dependencies. i did not understand what he did at that stage because he was going quite fast. Please wound you mind explaining what he did there?
Feels great to have an ecommerce store of mine...thanks to JavaScript Mastery
Attention! For anyone who has trouble with getStaticProps around 1:28:00. Getting null as product is due to the uppercase issue. Code this const query = `*[_type == "product" && slug.current == '${slug.toLowerCase()}'][0]`; instead of slug.current == '${slug}'][0]`... toLowerCase() will FIX this problem and get your project alone.
i'm still facing Problem with that .. can you help me to fix it .. please ?
Thank you Xiaonan. It fixed my problem.
Thank you. Upvoting for reach.
Jus amazing class.. I finish 'to copy', now time to modidy and style to my own company and products.. thank you so much
if you're having problems with the parsing error after creating the .babelrc file. do this instead:
{
"presets": ["next/babel"],
"plugins": []
}
and do not forget to update the eslintrc as well
Bro can you plz tell me how to update eslintrc
@@025_h_mohitkumardora5 {
"extends": ["next/babel","next/core-web-vitals"]
}
Another great video! You're the greatest man! Keep up the good work. Thank you lots. Love from Ghana😊
Thanks!
You make my dream come true, sir. Thankful for all of your kind and wonderful open source projects. I truely appriciate all of your efforts from the core of my heart. Take 💙💙🖤🖤 sir
hello, please there is a part of the video i didn't understand. when creating the Project, there is a stage where he talks about overwriting dependencies. i did not understand what he did at that stage because he was going quite fast. Please wound you mind explaining what he did there?