Create an E-Commerce Store using Next.js 15, Kinde-Auth, Neon, Upstash, Prisma, Stripe

[@janmarshalcoding]

🚀 Almost 11 hours of pure content. This video took way too long to create and should have been released two weeks ago, but hey, at least I am now finished. If you want to support me in creating more of these long videos, then you know what buttons to click. Also, if you want to get access to more videos, consider becoming a channel member. Jan Marshal

[@sriramhegde1994]

can you do a tutorial on medusajs cms which is opensource and in high demand

[@sriramhegde1994]

nobody has done it in youtube

[@swarnabhamajumder9561]

Thanks for such great content, one request from my side can you teach us how to make a saas in the next proejct tutorial.

[@shazeemalichishty7322]

Mr. Jan Marshal is a great tutor he has done real hard work with lots of love in this tutorial. hats off to him.

[@senlee325]

Your tutorials are one of the best. I have no experience with Next.js, but I have followed your videos and successfully built these projects. I am ready to give this one a go.

[@NizzyABI]

What a video… can’t wait to watch it all!

[@skverskk]

Absolutely one of the best Next tutorials I have ever encountered!

[@janmarshalcoding]

Thank you 🙏

[@algobuddy]

Great stack to build on. Nice one, Jan!

[@oyepariolaoluwalonimi8185]

Jan, thank you so much for this!! I’ve been enjoying the course not only because it’s an e-commerce store but also because it’s very easy and understandable. Thank you so much bro!

[@janmarshalcoding]

🫶🏻

[@spaceghost166]

What a legend! Thanks Jan! 💪

[@markus_dev_cwb]

Your channel with the best content on KZbin, your didactic is fantastic! Thank you very much to share your videos.

[@Borracho-y-loco]

Great work i follow your projects fot long time

[@waqasalikhan3926]

Jan you are great! if you just create the shipping detail page and sizes variation it will helped a lot.

[@SuperArnie1974]

Hey Jan I love your content and thanks for your hard work. A long way to go yet but learning loads already.😀

[@swarnabhamajumder9561]

Amazing thank you for this wonderful project will learn a lot

[@CarlosTello-h5s]

nice, good work, please more videos of this type

[@markus_dev_cwb]

Omg! Amazing project man.

[@lalitsingh-de1md]

thanks, Jan for this valuable content, I subscribed and liked the video, and I just finished the intro and installation, I will be consistent and finish this project. Love from India.❤

[@omarjbair5808]

thank you so much i will add this project to my cv now

[@janmarshalcoding]

nice one, it will look good on your cv 😁

[@MarosiMate-sq2wm]

Dude, this is the best stack.

[@janmarshalcoding]

🚀

[@codingjitsu]

This is great, Thanks for Sharing.

[@mohammadabbas1623]

This will definitely teach alot

[@smartdriver2990]

Done. Thanks for the tutorial

[@janmarshalcoding]

Nice one 🚀

[@amaynayak7242]

filters for the product categories would be a grt help

[@brajagopalmukherjee1588]

Bro on 🔥,❤ from 🇮🇳

[@joshbleijenberg4000]

Amazing!

[@zainn7336]

Sir create one real time chatting app using this stack plus new tech

[@0xtz_]

yooo wait this was posted ar the right time maan 😂

[@ADNANEELOTMANI-y3i]

Dude, thanks.

[@marufsikder7609]

Make a copy of H&M website Love you videos bro keep making videos I love it

[@CoulibalyCheickMohamed]

Thank u for all man you'r the best, but please bro 8 or 10hours is too much

[@oyepariolaoluwalonimi8185]

Lol, it’s not

[@senlee325]

9:41:59 was working good now get Unhandled Runtime Error: only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.

[@OPGAMER.]

🔥🔥

[@procoding735]

Bro create blog application using MERN stack nextjs with admin panel and filtering option just ❤❤❤

[@marumaru296]

NICE ! But how add the shipping fees in the product page and stripe checkout?

[@janmarshalcoding]

When doing the stripe checkout in the server action you can add what ever you want(taxes, shipping)

[@gtigerbeats]

Hi Jan Marshall, I'm getting an error 500 "something went wrong" when uploading images using uploadThing but I did setup everything correctly .

[@alexg7282]

Thanks !

[@angelvlkk]

I have a questions. Isn't necessary make an relation between orders and products?, to know what products are in each order. For example creating a new entity OrderProduct to make this relationship. Thanks

[@SameerKad-r8v]

Jan 😊, I'm creating multi tenant crm in nextjs, prisma and kinde auth but im stuck in authentication flow so can make video on multi tenant authentication ?

[@WebDev_Insider]

i wish u can create the part two of it cus og getting the user info for shipping the product and then making it look responsive in mobile cus the navbar could not display in mobile view and i don't know how to solve that problem thanks

[@DeveloperTrent]

Hi Jan, Amazing project thank you! If I wanted to use this project to actually sell PDF documents how could I implement that? Through Upload thing? or as a send it via email once a user has made payment?

[@marcc0183]

Hi Jan, could you explain how to make an ai saas, I know you have one but in that video the payments do nothing, it would be good if you implemented subscriptions to plans with different uses of some ai functionality, thank you

[@kotaau]

3:33:45

[@tushar-tech7]

Why is the customer address not being collected? Without a proper address, sellers cannot ensure successful delivery of orders.

[@sanagolzar]

Hey Jan, This tutorial really helped me, Thank you for the effort, I have a question however, Can I just use my local Postgres db instead of Neon for Prisma? does it make a huge difference in the whole project? Also with the authentication do you have any tutorials for creating our own auth system? Or do you recommend kinde and clerk more because of their security ?

[@sanagolzar]

Also, I would love to hear your opinion on a system like MedusaJS , Again thank you for your time and efforts

[@BillalBenzazoua]

Project done, thank you i knew something new, but there is a problem, do you know how we can delete images automatically when we delete the product from dashboard or when we upload images and delete one of them for example, it is still in database

[@emrehanaz2257]

what is your vsc theme name?

[@WebDevNiko]

good tutorial, in my country its kinda standard to be able to buy stuff wihtout registering in this project you need to be authenticated to use shopping cart to do shopping cart wihtout authentication would local storage be used instead of redis?

[@WebDevNiko]

To answer my own question short ansver if no user login then better use local storage and state management like zustand however if cart requires user authentication then redis might be better choise as its data is more persistent based on user login instead local storage

[@DevKiarie]

How to add Pay on delivery option

[@hugomendez7659]

I have a question, this project have pagination ?

[@Hugo-bd7wt]

Hello Has anyone managed to implement a pagination function for the all products page? I really need your help please.

[@cescfabregas0004]

i got error after click signup button "kinde attackers might be trying to steal your information from..."

[@lakers4042]

Just started to follow along and ran into a problem @13:18 you show a public folder during my install it did not create one. how do i get it ?

[@janmarshalcoding]

Hey yeah, sadly Next.js changed its default project directory a bit. You have to now manually create the public folder. But it still works as you expect

[@waleed42ahmad]

I am from pakistan , no option id there in stripe , how can i follow the video ? i also don't have bank account

[@xheladinosmanaj3873]

I cannot see the product model on Prisma studio when I create the product . how's that possible ?

[@iameenalam]

same

[@martineboulanger]

You're selling this as done with next.js 15 (see video title) while it's actually done with next.js 14, please either change your title or upgrade your course.

[@janmarshalcoding]

Well, first of all, I'm not literally selling anything since it's free (I understand you're using the phrase idiomatically). In the intro, I clearly mention that I'm using Next.js 14 for the code, but it's fully compatible with Next.js 15. Whenever I use something that works differently in Next.js 14 versus 15, I always point it out and let the viewers know what they need to do if they're using either version

[@martineboulanger]

@@janmarshalcoding No, I was not using the phrase like that, I was in lack of better wording, I'm not native English so forgive me for it. I was just wondering about it.

[@iancarr3923]

Just started - looks good. The link to Kinde does not work. Thanks

[@janmarshalcoding]

Nice 👍🏻. Was probably an outage with dub.co, because right now everything works for me

[@ddofvideos]

@2:12

[@ddofvideos]

2:14

[@chauquang55]

i feel lack of some things such as the quantity of products,Admin's order approval function

[@janmarshalcoding]

You are right, I forgot quantity selection, but its simple to add... I would not agree though on admin order approval. Why would you want to approve an order...

[@chauquang55]

@@janmarshalcoding I got that part wrong

[@janmarshalcoding]

@@chauquang55 All good mate 🤝

[@chauquang55]

@@janmarshalcoding In my country, when customers buy things online and pay, they have to wait for approval from the store owner. If the store owner is ok, they will send an email and you will receive the goods in 2-3 days.

[@chauquang55]

@@janmarshalcoding As for the number of products, you should add a function to display that quantity for customers to see and if the customer buys too much of the product, it will say that the quantity is not enough and after purchasing, the product number should be displayed. In addition, you should do a search feature by date of price and image

[@suvrajitmondal2325]

Where is source code?

[@gmancodes]

where is the upload thing env part?

[@gmancodes]

there is a typo "uplaodthing" also the file name

[@hhhhhhhhhhhhhhhhhhhhhh]

I will never understand why people want to use 3 paid dependencies, that you could easily self-host/make your self, in their projects that will at some point just skyrocket your operational costs into oblivion.

[@janmarshalcoding]

Could we skip Neon and self-host? Yes. Could we skip upstash and self-host? Yes. Could we skip Uploadthing and do it with R2/S3? Sure! Nevertheless, I will reserve this for paid vids...

[@hhhhhhhhhhhhhhhhhhhhhh]

@@janmarshalcoding I just think it's bad practice to make junior devs think they need all these things to build their small little toy projects and sets them up for false expectations in the future

[@windnoob]

@@hhhhhhhhhhhhhhhhhhhhhh Hello my friend, I am curious to know if you could expand a little more on this topic, what do you mean? Where can you host or use not paid dependencies? Thanks

[@JustinNg26]

Is there a free tier option for all these dependencies? Will I need to pay for anything if I want to complete this project? Thanks project looks great

[@janmarshalcoding]

@@JustinNg26 Everything in this video has a generous free tier. **Nothing** requires a credit card!

[@InekMarcinek]

Are you polish?

[@janmarshalcoding]

I often travel to Poland, but I am German. But Poland is great!

[@erezporat5214]

make js stop please😢

[@WebDev_Insider]

@jan i really need your help, in id folder that is page.tsx i hovered in the data to get my interface iAppProps i go this "const data: { id: string; name: string; description: string; status: $Enums.ProductStatus; price: number; images: string[]; category: $Enums.Category; isFeatured: boolean; createdAt: Date; } | null and i skiped the null and did exactly what u did so in ; the error i got from the data is this Type '{ id: string; name: string; description: string; status: ProductStatus; price: number; images: string[]; category: Category; isFeatured: boolean; createdAt: Date; } | null' is not assignable to type '{ id: string; name: string; description: string; status: ProductStatus; price: number; images: string[]; category: Category; isFeatured: boolean; createdAt: Date; }'. Type 'null' is not assignable to type '{ id: string; name: string; description: string; status: ProductStatus; price: number; images: string[]; category: Category; isFeatured: boolean; createdAt: Date; }'.ts(2322) EditForm.tsx(38, 3): The expected type comes from property 'data' which is declared here on type 'IntrinsicAttributes & iAppProps' (property) iAppProps.data: { id: string; name: string; description: string; status: $Enums.ProductStatus; price: number; images: string[]; category: $Enums.Category; isFeatured: boolean; createdAt: Date; } and the error i got from my terminal is this ⨯ app/components/dashboard/EditForm.tsx (91:36) @ name ⨯ TypeError: Cannot read properties of null (reading 'name') at EditForm (./app/components/dashboard/EditForm.tsx:152:64) digest: "1205680651" 89 | key={fields.name.key} 90 | name={fields.name.name} > 91 | defaultValue={data.name} | ^ 92 | className="w-full" 93 | placeholder="product name" 94 | /> but this is no error in my EditForm.tsx

[@BamigboyeTemitope-t4r]

jan need your help pls my model on prisma model Product { id String @id @default(uuid()) name String description String status ProductStatus price Int images String[] category Category isFeatured Boolean @default(false) createdAt DateTime @default(now()) } my actions.ts file await prisma.product.create({ data: { name: submission.value.name, description: submission.value.description, status: submission.value.status, price: submission.value.price, images: submission.value.images, category: submission.value.category, isFeatured: submission.value.isFeatured, }, }) in my actions file (product is under in red) saying [Property 'product' does not exist on type 'PrismaClient] pls need ur help on it

[@corpsedad7368]

Seems like inspired by @codewithantonio

[@janmarshalcoding]

Just because this is a storefront + admin dashboard? 😂. The inspiration came from shadcnui blocks, which has templates for an ecommerce dashboard.

[@corpsedad7368]

@@janmarshalcoding only one thing to know what features are included here that i cant find in that project . If there is something new i would love to do this project too but with only demo i couldn't find much difference in functionality rather i felt this has less.

[@janmarshalcoding]

@@corpsedad7368 I have not watched his video, therefore I don't know what features his has. All I can say that this is a good project with clean code... But at the end of the day it's your decision. I won't be mad if you won't watch this video, haha. All the best mate!

[@corpsedad7368]

@@janmarshalcoding but can you give me the list of features your project use. And do we write backend in repo. or are using something like convex. And sorry for that at first it looked similar and wrote that comment. 😅

[@janmarshalcoding]

All Good, I take no offense 🤝 For the features you can either open the KZbin description where I have a long list of features, go to my twitter or click on the GitHub repo link. There you will see a list of all features in this video... And for the backend everything is done in this project, no external service is used! I mean besides of course prisma(ORM) and neon(postgres)

[@ddofvideos]

@5:43