Next.js 14 E-Commerce Website with Stripe, and Sanity.io | Full Stack Tutorial | 2023

[@ElNicopewpew]

Sweet! If you would like to expand on this tutorial, I think we the people would love to see you implement a dynamic navbar, so the user can add new categories from sanity, and perhaps a search function?

[@MrMrkram18]

Just deployed to Vercel with stripe & sanity great video.

[@janmarshalcoding]

Thanks ✌🏻

[@fexzi4074]

Just deployed to vercel and its working. Thanks. Can you make another tutorial to explain react crash course.

[@janmarshalcoding]

Great! I will probably do it at some point...

[@DevVibes9863]

Nice Project! Helped me to increase my Website Development skills from basic to very high level. Best project ever in my life.

[@tommytanti1776]

Thanks brother, you have been a life savior.

[@CHEF_ALMERIA]

The first ecommerce ever without sizing functionality...

[@SatyamChaturvedi-ej9zk]

Great tutorial Jan btw anyone facing issues while fetching data in sanity, I am getting drafts as well when fetching products

[@hamidmalik8720]

Hey Jan Marshal, Your videos are really outstanding. I have learned a lot from you. I wanna give you a big bundle of thanks to you. I'm also follow the current video and building e commerce website but the problem that I'm facing is that check out button is not working. When I click on the checkout button nothing happen. I have followed all your steps. Also watched the video 3 to 4 times

[@syedahafsadeveloper]

Amazing website

[@petrzajkas337]

Great tutorial, thanks for what you doing! It's well explained in detail and an easy-to-follow tutorial. You just earned yourself a subscriber. :) More tutorials like this, please. Stay safe.

[@user786-d4w]

Such a Great Tutorial..👏👏💙

[@paulreidy8131]

Hi Jan, scratch that last question, I'd named the Newest.tsx as a .jsx file.

[@CptJuke]

Great Tutorial! You make everything look so easy…

[@janmarshalcoding]

I wish haha

[@CptJuke]

@@janmarshalcoding yeah i wish it was that easy aswell! haha

[@bijendernagar15]

Thanks for your efforts best tutor on youtube you explain every thing in detail and simple words for begainers understand properly thanks again Subscribed you Love From India

[@janmarshalcoding]

Thank you ✌🏻

[@Schick3r]

Thank you! i subscribed to you directly. i also use the aura theme in vs code :)

[@omarzaeda]

I made it : ), thanks bro

[@syedahafsadeveloper]

you earned a subscriber

[@ahmedyarkhan7006]

ver nice tutorial can u add clerk auth

[@yantaosong]

thanks Jan , it is a wonderful vedio about e-commerce site , hope adding the paypal of payment .

[@thatguydave_01]

Thank you so much for this video, I've learnt a lot but when i add a second product to the cart, it just increases the quantity of the previously added product. I can only seem to add one product, every other thing i add just increases the quantity of the product that's already there

[@sergioafanadorbayona2043]

I was getting the same bug, double check if you are adding "key={data._id}" into " " tag in "app>product>[slug]>page.tsx " that worked for me

[@fexzi4074]

hmm this didnt work though@@sergioafanadorbayona2043

[@anjumraza8003]

Hello Jan Marshal, Nice Job, Thank you so much for such wonderful tutorial build.

[@harunalrd]

First, and it was 4.55 AM in my country 😂

[@tenr01]

@20:42 to make a reference from one document to another. Super important, when you are using numerous documents!

[@neerajverma9226]

Can you update this course add authentication? and manage orders?

[@yoann-philippewilson4791]

thank you bro you are the best

[@davelyashuk7979]

Спасибо!

[@janmarshalcoding]

🙏🏻

[@MarosiMate-sq2wm]

Great video! Also, you look like someone I know irl.

[@ShahnawazSayyad]

This is nice.. request you to do more of Remix tuts

[@fiimble]

Hello Jan, Thanks so much for such wonderful tutorial build. Thanks again!

[@janmarshalcoding]

Thanks 😀

[@fiimble]

Hey @@janmarshalcoding I implemented the 'clearCart()' method upon a successful payment on localhost. It works and the cart is emptied when I return to the store. But when I use the live server -vercel- for testing the cart still shows the items in it, even after a successful test transaction. Do I have to be on "LIVE" mode and NOT on "TEST" on Stripe for it to work? Best regards, Jorge

[@janmarshalcoding]

Hey Gorge, I haven't tried clearCart, but will try to reproduce it later tonight and will come back with my results. So cool that you try to tackle problems you face yourself, most just complain 🤌🏻👍🏻. Also to clarify, you mean emptying the cart works on localhost with clearCart() but not in production using vercel?

[@AnupomRoy-is3pc]

Just one thing. In 1080p it's hard to read the code. Please consider zooming a little bit next time.

[@janmarshalcoding]

Hey, sorry for that. When I created this video, I was still learning this whole KZbin thing haha. If you look at the intro it's funny enough shot in 720p, but I thought it was 4k hahaha. All my new videos are produced 10x better.

[@wowgaming2663]

Its functional add to card etc where you implemented please time stemp

[@sanagolzar]

Hey bro , Thank you for the awesome tutorial , I'm a beginner in JS and I'm starting using your tutorials, however in this one , when I wanted to config sanity I noticed that they completely changed their project in their latest update and made a standalone studio and whatnot, How can I continue? Can this project be done without sanity ? I am more keen to create my own admin dashboard and database for the project.

[@janmarshalcoding]

Well, then I have great news for you, because I will release an ecommerce tut this week with all the thing you just mentioned. Stay tuned.

[@sanagolzar]

@@janmarshalcoding ​ Wow, that's awesome! I'll be waiting for it. Thanks!

[@TKTBC777]

Thanks!

[@janmarshalcoding]

Thank you

[@OrganicDevelopment-t3s]

Please, how do I modify the stripe checkout page and collect the customer's address?

[@theintjengineer]

Second, and it's 01:05 a.m in my country 😂

[@DezloperShopify]

Thanks for this great tutorial man. i am just having this one issue export const dynamic = "force-dynamic"; its updating in local server from live studio but it is not updating the live website. and my head hurts now seriously help me out

[@emenikedaniel]

Tried following this but use-shopping-cart dependencies are not well managed. I used pnpm for this project, it kept complaining about that package. Thanks a lot for this tutorial. Appreciate

[@webunveilers]

it's just a warning. because it is outdated

[@snowin_jj]

The explanation and the contents are good. But imagine if you're building an application for a client. Creating the price ID from Stripe and adding it to the sanity is a bit annoying.

[@janmarshalcoding]

You could always listen to a webhook and do it that way. But that's to overkill for this free vid.

[@omererkul1669]

@@janmarshalcoding Do you mean whenever you create a new product in Sanity, you will add this through the Stripe api in the Stripe dashbooard?

[@marumaru296]

Nah its not annoying at all im agree with u if u have hundreds of item bu t for small businesses it is okay

[@zunnoorainrafi5985]

Will you please make an e-commerce website using Remix which includes pagination, infinite scrolling، image optimization, uploading images , authentication with credentials and also with Google.

[@Pikachu-cj9he]

nice project. Can you please specify that in this project you use reactJs or typescript only.

[@janmarshalcoding]

At the end of the day typescript is still JavaScript. So when you follow the project just don’t create any types (interfaces etc.)

[@jeffqseid2169]

Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server. for both CheckNow and AddToBag :(

[@UAng-ro9kt]

nice UI

[@mahendranath2504]

nice thank you so much, liked and subscribed 😍😍🎉🎉🎊🎊👍👍👌👌🙌🙌

[@sitheekmohamedarsath]

Great work.

[@carsoundsintheworld]

Can i install Mollie payments as the same method for the payment provider?

[@kazimwrites5030]

Hello Jan I hev error cannot ready property of undefined ('reading' 'disptach') how to solve this guide mr

[@sergioafanadorbayona2043]

I'm having the same issue right now "TypeError: Cannot read properties of undefined (reading 'dispatch')" it shows that the error is coming from the "const {cartCount}= useShoppingCart();" part

[@sergioafanadorbayona2043]

solved, i was importing {CartProvider} from "use-shopping-cart" insted of import CartProvider from "./components/Providers" into Layout.tsx

[@AoseiOK]

Were you able to solve it? The same thing happens to me in Navbar.tsx ' ⨯ node_modules eact-redux\es\hooks\useDispatch.js (18:0) @ useDispatch ⨯ TypeError: Cannot read properties of undefined (reading 'dispatch') in the navigation bar (./app/components/NavBar.tsx:38:99) zero

[@randerins]

Great project! There's just a problem, you Vercel link to the project is not working...

[@janmarshalcoding]

Because I don't have unlimited bandwidth 😂 and therefore I deleted the deployment.

[@NeillWhite]

Hi Jan any idea how to remove the old images i have been following the tutorial up to 1.04 however when i try to replace the images the old ones stay. Please help..

[@ayushsonone4772]

i want to integrate upi payment gateway instead of stripe any suggestions

[@rootbindev]

Error: Cannot read properties of null (reading 'image1')

[@MrMrkram18]

if you add export const dynamic = "force-dynamic"; to the root page it will work, had same problem

[@loveoner]

@@MrMrkram18 even after adding the export above, it didn't fix the issue for me

[@Imam.Mehdi_]

​@@loveonerif you selected html element using js... Then correct them

[@barmejtech]

check the const query = " here spells"

[@isaevallahverdi]

​@@MrMrkram18 can u explain more detailly pls

[@davidGeorge-eo1yl]

Pls when I try to run the image gallery and page.tsx it always gives me a runtime error of the data.image property is null Pls what should I do 🙏

[@davidt510]

Nice video! Could this be deployed for real world use? I'm just thinking about how it would work if you had customers - there isn't a register/login/user account area so would they be able to see previous orders etc?

[@janmarshalcoding]

Thanks, well, it can be deployed for real world use, but I would definitely NOT recommend it. This ecommerce store is very "basic" and as you already mentioned features like account are not implemented. Also, I would not really recommend using stripe for Ecommerce for various reasons. Therefore, my recommendation is either you invest a lot of time and create a custom ecommerce storefront or just use Shopify, which makes it like 1000x easier.

[@webunveilers]

why stripe isn't a good option and what is alternative@@janmarshalcoding

[@anasahmed3480]

Can I ask please? Why stripe isn't recommended for real life use?@@janmarshalcoding

[@yantaosong]

@@janmarshalcoding add next-auth for login and user information , or any other ?

[@adelekeadeyemo9672]

Thanks for this project Mr Jan. Please I'm getting an error whenever i try to fetch my hero images @58.40 minutes. the error says: Error: Dataset not found - Dataset "production" not found for project ID. kindly help because I'm stuck. Thank you

[@alexiizz1222]

I got an error at 1:20:30 TypeError: Cannot read properties of null (reading 'default'), maybe i did something wrong but if you are getting the same error i solved it adding a 5 instead of a 4 to [_type == "product"][0...5]

[@Kmkn308]

Hey Jan Marshall Bro . Hope you are fine Brother dynamic page images you didn't discuss which api you use to get images i am stuck there ..

[@tattooedvl]

Thanks for ur video. Can u help me: why I can't see the price including sale percent inside my shopping cart? for example, newest page have sale price, when I click category - same, but when inside my cart can c only normal price without sale. How I can fix it ? Thanks

[@neerajverma9226]

ur vs code theme name?

[@JDUDEadventure]

Hi Jan, On the global.css tailwind imports how do you fix the error underline? I keep getting that and its annoying.

[@piyushshrestha3651]

Is it practically applicable

[@user786-d4w]

hi my checkout button still not working after change the button what the issue can anyone guide me??

[@ahmedrafi7463]

How will the owner of the e-commerce website knows what all order has been made and who did it?

[@janmarshalcoding]

Stripe Dashboard

[@ahmedrafi7463]

@@janmarshalcodingokay great, but I cannot get the user delivery address, how can I have that

[@abodfta6159]

how to get dynamic product id from stripe?

[@MERCEDES_AMG_F1]

How show all iteam in see all can somone help?

[@nested9301]

is sanity scalable for a e-commerce app?

[@janmarshalcoding]

Absolutely

[@vineetjadhav1785]

When i treid to checkout its says in my console log no such plans does anyone know this fix of error

[@rootbindev]

Awesome

[@lastspoil5547]

i can't get the source code to work. i dont understand how to install source code.

[@umersiddiqui4530]

Can you make an e-commerce applications using next js 14 and mongodb

[@janmarshalcoding]

I dont like MongoDB

[@lordsonmateleddi5481]

great work ❤

[@janmarshalcoding]

Thanks 😄

[@lordsonmateleddi5481]

@@janmarshalcoding there aren't so much course on sanity on youtube so keep up the good work

[@MarosiMate-sq2wm]

@@lordsonmateleddi5481 meh, throw the Sanity part. There are probably no videos on Next 14, right now.

[@rootbindev]

actually he doesnt even use next 14 in this one @@MarosiMate-sq2wm

[@victoriousinsight]

After setting up my sanity studio with the initial data it worked, but whenever i make a change and publish it, it still shows me my previous data in my next app. I even had to delete some data in the studio but the changes are not reflected in the next app

[@janmarshalcoding]

Did you add revalidate tags ?

[@victoriousinsight]

@@janmarshalcoding Where should I add it? I didn't see that in the video. If it's in the video please paste the timestamp

[@janmarshalcoding]

Well it’s at the end of the vid, 3 hours mark or so

[@victoriousinsight]

Thank you

[@Isticsek]

Hello Jan! First of all, great tutorial, thank you! Great explanations on every aspect. Subscribed! However I'm facing hydration error when I wrap my entire DOM with the CartProvider: Error: Hydration failed because the initial UI does not match what was rendered on the server. I don't see this happening on the video while following you along. Could you help me fix this? Thanks!

[@janmarshalcoding]

Hey Pasztor 👋, I appreciate it, thank you. So to clarify when you don't add the cart provider you get the hydration warning but if you don't, you don't get one? Could you also test if you get a hydration warning in the incognito tab?

[@Isticsek]

@@janmarshalcoding Thanks for the quick response! Yes, I've already tested in incognito, but the issue seems to come after the fact that we are trying to embed a server component inside a Client component which CartProvider is.

[@janmarshalcoding]

So without seeing your code, I can't definitely say where the error comes from. I personally dont think that there is a error with the cartprovider since i did not have any problems with hydration but rather with html element nesting or not closing tags. Now there to things we can do, you can check your code against my in my GitHub and learn how to debug code (the preferable way...) Or even tough I don't like offering this, you can send me your code by email, and I will try to look at it when I have the time.

[@abhishekgiri013]

@@Isticsek is your issue resolved ?

[@Isticsek]

@@abhishekgiri013 unfortunately nope. But I guess the issue was that we try to use a server component inside a client component.

[@tonihaq5576]

when clicking the checkout button not directed to the stripe link I see the console server not responded 404 how do I fix it

[@muktarayodeji7257]

hi. Have you resolved this? i'm also experiencing a similar issue myself

[@MERCEDES_AMG_F1]

Hello Jan first amazing project and tutorial but I have a error can you help me to fix : Unhandled Runtime Error Error: Cannot read properties of null (reading images') Source app \product\[slug]\page.tsx (39:37) @ images 37. 38 39 ‹div className="mx-auto max-w-screen-xl px-4 md:px-8"> ‹div className="grid gap-8 md:grid-cols-2"> «ImageGallery images={data. images} /> C 40 4.1 42 Show collapsed frames ‹div className="md:py-8".› ‹div className="mb-2 md: mb-3">

[@tommytanti1776]

Is it fixed getting the same error?

[@nomxxn]

how do you create the logic for the see all? how come you didnt go through it?

[@nomxxn]

nvm I got it to work

[@janmarshalcoding]

✅🚀

[@nomxxn]

@@janmarshalcoding literally realised we done it twice during the project 😂 love the video mate

[@ltwoz9]

1:25:00

[@paulreidy8131]

Hope you can help Jan. At 1:14 when the interface.ts file is created and the line const data = await getData(); changes to const data: simplifiedProduct[ ] = await getData(); I get an error 'const' declarations must be initialized. Do you know whats going on here?

[@muktarayodeji7257]

Are you still experiencing this issue? if so try declaring 'const data = client.fetch(query)' in the getData function

[@paulreidy8131]

@@muktarayodeji7257 Thanks for replying, my problem was with a jsx file extension that should have been tsx.

[@spiriteddave]

Can you help? I can't the hero images from sanity. Its "null" after I console.log

[@sIate9]

i have the same problem have you found a solution?

[@muktarayodeji7257]

Are you still experiencing this issue? you can try referencing the image as a url in your groq query e.g "image": image.asset -> url or you can access the first image url if you set it as an array in sanity e.g "image": image.asset[0].url

[@liu-river]

Do you know how I can use revalidatePath with sanity webhook instead of force-dynamic all the ssg pages? I can't find an example online with app router

[@janmarshalcoding]

Well, you could do that, but I surely would not do that... I would rather delete force-dynamic and add the following: export const revalidate = 3600 // revalidate the data at most every hour then change the seconds to what ever you prefer...

[@liu-river]

@@janmarshalcoding But what if I need almost instant revalidation but have thousands of routes. What is the actual cost of this data refetching, say if I have 1000 dynamic routes, it gets rebuilt 1000 times every minute, do you know if there is a limit on Vercel?

[@luiscarlosdelorenzicantero7379]

how do you do yo make your build so fast when you type 'npm run dev' without taking so an eternity to compile???

[@janmarshalcoding]

The power of video edits... 😂. But yeah, the dev startup can take a few secs

[@tundejames_20]

Thanks, Jan for this wonderful video tutorial, I have learned a lot. However I am getting this error message when I click on the checkout button in the console: "IntegrationError: No such plan: '4c2f6f9d-31dd.......'". I have checked online to resolve the error but haven't gotten an answer yet. Please can you help?

[@janmarshalcoding]

Hey, please check two things: have you enabled the client only integration and did you use the price Id? In stripe there are two id’s and you need the price id

[@tundejames_20]

Yes, the client only is set and I used the price id generated for each product. the price id starts with price_ right?@@janmarshalcoding

[@janmarshalcoding]

Yes... Can you go into stripe dashboard and check the logs and tell me what is says when you try to check out

[@tundejames_20]

@@janmarshalcoding This is the response from the log: resource_missing - items No such plan: '4c2f6f9d-31dd-4ab4-ad5a-4e075f70c14e' Status: 400 ERR

[@janmarshalcoding]

Ok so the error tells you that such ID does not exist, this is also correct since as you already mentioned the stripe id starts with price_. So going from that I'm pretty sure you are passing the wrong id to your AddToBag component. It seems to me that instead of the price_id you are passing the id of the product to stripe, which is generated by sanity. Thats why stripe is throwing a error since id that you pass is not equivalent to the stripe price_id. Based on this, Please check your props

[@lordsonmateleddi5481]

I don't know, can sanity work with user authentication tools like auth.js or clerk

[@MarosiMate-sq2wm]

It works with NextAuth, there's a plugin: npm i next-auth-sanity

[@lordsonmateleddi5481]

@@MarosiMate-sq2wm alright. will surely check that out ☺

[@streamclips011]

51:49

[@KingPacavision]

Do you know why I cant query into my sanity studio? its saying "Cannot read properties of null (reading 'image1')". When I console log it out its saying that my query is null like its just not returning any data my code looks the same as yours. Thank you

[@KingPacavision]

nvm I just had to update my projectID in the lib/sanity.ts I guess my project was never connected to my sanity server.

[@tommytanti1776]

​@@KingPacavisionhow did you fix it? I'm getting the same error, and project id is already updated.

[@tommytanti1776]

Got it resolved. First check the query if it has any value reflected as "null" on the vision page. Update the sanity content page with valid value. Then go to lib folder, sanity.ts change the useCdn as false.

[@LifeGlitch9292]

​@@tommytanti1776 please give a detailed guide please

[@xtreem057]

I am getting this issue : github.com/shadcn-ui/ui/issues/1129 Can you help please?

[@available2574]

is it responsive?

[@janmarshalcoding]

yeah

[@Lokaoxisde1]

I'm getting this error on my lib/sanity.ts file: Value of type 'typeof ImageUrlBuilder' is not callable. Did you mean to include 'new'?ts(2348), the line is const builder = ImageUrlBuilder(client); can someone help me?

[@loveoner]

You are importing the type, you need to import the function with lowercase imageUrlBuilder

[@barmejtech]

use this code. it will fix your mentioned issue. ========================================= import imageUrlBuilder from '@sanity/image-url' const builder = imageUrlBuilder(client)

[@taketwochickens2888]

Really cool, but what's the incentive for developers to build e-commerce websites (or people with no coding experience who want to set up a ecommerce website) when you have sites like Shopify and Squarespace thay have this already?

[@janmarshalcoding]

Well, the question is what do you need… Something not all too complex with groundbreaking design, then Shopify and its alternatives are fully ok. I mean, Gymshark scaled with Shopify to a multi Billion Company. But if you want 100% control over your store or can't use Shopify (certain Countries are Sanctioned/Banned), you don't really have a choice but to build the store manually.

[@thanks_man1268]

Is the website responsive on mobile?

[@janmarshalcoding]

yeah

[@jeanpierreayala5324]

vscode theme pleaseeee?!!!

[@janmarshalcoding]

Aura Theme

[@andreiamariei655]

MAFIA

[@streamclips011]

Why i can't deploy I follow all steps deploying failed but its working in localhost

[@janmarshalcoding]

whats the error?

[@streamclips011]

@@janmarshalcoding Type error: Cannot find module '@sanity/vision' or its corresponding type declarations.

[@streamclips011]

Error: Command "npm run build" exited with 1

[@janmarshalcoding]

You forgot to add the .vercelignore, i talk about it in the vid

[@streamclips011]

@@janmarshalcoding i already have it and I put sanity there

[@joshuayevu]

Is this project responsive

[@janmarshalcoding]

yeah

[@NateTron99]

at 53:06 u just go back to sanity my sanity wont even open anymore its so Infurating

[@janmarshalcoding]

Cd into sanity and run npm run dev

[@karacan2469]

it the 8th minutes of video, I find this is another kind of tutorials watching from second monitor and coding in first monitor to show like I am a developer, I think better to try record a video that shows real development life, it is not realistic at all. by the way All my respect to what you are going to do and teach what you can but it's not really the way

[@janmarshalcoding]

With all my respect, this is a free tutorial... I understand your concern, but at the end of the day, KZbin is not my job and i don't get any money from this. Anyway... I think it's great if there is more content on KZbin, so i highly encourage you to create your own videos, so others can learn. Thanks and good luck

[@karacan2469]

@janmarshalcoding Think about it, what you do is respectable, I just said my opinion.

[@lastspoil5547]

your github is down

[@janmarshalcoding]

Mind trying it out again, because for me everything works

[@lastspoil5547]

The link in the description for your GitHub repository takes me to a 404 page not found. Tried on mobile and desktop. 🖥️

[@janmarshalcoding]

@@lastspoil5547 ahh yeah i see the problem, changed a few things and therefore the slug is incorrect... This is the link, will update the description: janmarshal.com/courses/next-js-14-e-commerce-website-with-stripe-and-sanity-io-full-stack-tutorial-2023

[@lastspoil5547]

@@janmarshalcodingthank you. Do you think you can make a short video for your channel showing us the proper way to download, install, and run this source for beginners? I don’t understand if source code is the completed code base or more of a starter template for tutorials.

[@Jankee187]

are you german?

[@janmarshalcoding]

ja...

[@shanulhaq1670]

What a great project!! I have created it. Kindly share your Linkedin id then tag it.