Every web developer needs to know how to build an ECommerce website using React. Learn how to build the best and most modern one simply by watching this course. Our e-commerce application will include modern design and animations, the ability to add and edit products on the go using a Sanity, all advanced cart, and checkout functionalities, and most importantly, the complete integration with Stripe so that you can cover real payments.
💻JS Mastery Pro –
✅ A special YOUTUBE discount code is automatically applied!
Build even more comprehensive, modern applications such as an AI-Powered Movie App and an NFT Marketplace application – Check it out now – 🔥
⭐Sanity JSM Subscribers Special –
⭐Sanity Content Platform –
⭐Get help with Sanity on their Slack Channel –
This video may contain code snippets or concepts specific to a previous version of Sanity Studio. In most cases, you can find the information needed to adapt the material to the latest Studio version by exploring Sanity docs:
📙Ultimate Frontend Development Roadmap –
📙Ultimate Backend Development Roadmap –
📚 Materials/References:
GitHub Code (give it a star ⭐):
Styles & Other Code:
Assets:
In this course, you’ll learn:
– Advanced React Best Practices such as folder and file structure, hooks, and refs
– Advanced State Management of the entire application using React Context API
– Next.js Best Practices such as file-based routing and data using server-side rendering and static generation
– You’ll learn how to integrate Stripe to manage payments, products, shipping rates, and the entire checkout process
Most importantly, you’ll learn how to manage the entire content of your app using Sanity. Sanity is the unified content platform that’ll make the making of our entire app possible
💻 Master JavaScript:
Use the unique promo code “YOUTUBE” on checkout to save $60!
📙 Get the Ultimate Frontend & Backend Development Roadmaps, a Complete JavaScript Cheatsheet, Portfolio Tips, and more –
💻 Join our Discord Community –
🐦 Follow us on Twitter:
🖼️ Follow us on Instagram:
💼 Business Inquiries: contact@jsmasterypro.com
Time Stamps 👇
00:00:00 Intro & Setup
00:10:20 Sanity Setup
00:24:33 Homepage
00:40:37 Hook up Sanity
00:54:13 Products
01:06:33 Layout
01:16:24 Product Details
01:42:10 Context Logic
02:02:52 Cart Logic
02:36:52 Stripe
03:09:48 Success Page
03:26:36 Deployment
Build even more comprehensive, modern applications such as an AI-Powered Movie App and an NFT Marketplace application – Check it out now – https://www.jsmastery.pro 🔥
I asked Sanity to hook up some free stuff for this video… They made a custom boosted free plan 👉 https://www.sanity.io/javascriptmastery2022
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
Anyone else run into the problem with Stripe? I got this error "Uncaught (in promise) IntegrationError: Please call Stripe() with your publishable key. You used an empty string."
I checked my .env file multiple times to make sure the keys are correct. I'm so close to finishing the tutorial 🙁
How difficult would it be to implement a user login and sign up for this?
Hello, I have an error in the console here when fetching with Stripe. although I did the same as in the video.
My 'const data' is also undefined.
Errormessage: 'Uncaught (in promise) IntegrationError: stripe.redirectToCheckout: You must provide one of lineItems, items, or sessionId.'
At this point from the video: 2:51:50
Does anyone have the same problem and a solution for it?
Could I do this project after the release of Next.JS version 13? :''
03:02:08 Refering to nextjs "In order to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_", so I think you shoudn't do that to your secret key?
And by the way, using the price from the cartItems coming from the frontend and configuring stripe in the backend with this price, isn't it really unsecure? Someone could catch the request and change it and send a price of 0$ for example?
But all in all great course, I could learn a lot, thank you very much ☺
I am getting error when i type sanity init —coupon javascriptmastery2022
I have one doubt- how the head icon will come where it's coded
Can someone help me with how to delete a product in sanity?
I'm having an error while deploying to vercel …plz someone help
Can someone pls help me with this error ( IntegrationError: Please call Stripe() with your publishable key. You used an empty string. )
how to get api version in sanity?
The toast success message is not displaying
You forgot the implementation of localStorage. Does anyone have a solution for this?
Other than that, great tutorial.
Thanks for the tutorial. I have a Mac and trying to get visual studio running. With the code. I keep getting error that I don’t have a page directory when trying to load nextjs. Can anyone help
Please rep me! How can I create a custom field that can add multiple subfields. For example, I make a travel application where a tour will have schedules that are different locations. So I want to be able to add new schedules when I create a post
A site like blazingboost or overgear would be cool to code along with!
im your student in the javascript course and this is what i was looking for wonder why its not sold
Fantastic video…….. but i have buillt my schemma but they are not showing up on my sanity desk. help out please
peace for your heart
HI 🙂 Can anyone help me with getStaticProps around 1:23: 00 Error: getStaticPaths is required for dynamic SSG pages and is missing for '/product/[slug]'.
Hello @javascriptmastery, I like the way you did the website and I want to create a website for my family bussiness with homemade clothes. Could you please answer my question: How could I implement the number of products available? Thank you!
I only wish that the design was using Material-UI
Thank you for the Tutorial! Am I allowed to use this commercially? or do it need a special sanity licence for that?
Does anyone figured it out how to keep the position the cart items and not just move to la bottom of the list?