🚀 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
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.
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!
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.❤
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.
well i debugged it ... just change your page.tsx of dashboard/product/createproduct add "use client" on top and add api token instead of api id and secret !.
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
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 ?
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
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?
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
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?
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
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
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
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 ?
Really good video but i feel like some thing like the switch case for the category was really unnecessary. Hard coding all the categories is bad and you shouldve made it dynamic.
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...
@@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.
@@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
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.
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...
@@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
@@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
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.
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
@@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.
@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
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
@@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.
@@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!
@@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. 😅
All Good, I take no offense 🤝 For the features you can either open the RUclips 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)
🚀 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
can you do a tutorial on medusajs cms which is opensource and in high demand
nobody has done it in youtube
Thanks for such great content, one request from my side can you teach us how to make a saas in the next proejct tutorial.
Mr. Jan Marshal is a great tutor he has done real hard work with lots of love in this tutorial. hats off to him.
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.
What a video… can’t wait to watch it all!
Absolutely one of the best Next tutorials I have ever encountered!
Thank you 🙏
Great stack to build on. Nice one, Jan!
What a legend! Thanks Jan! 💪
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!
🫶🏻
Your channel with the best content on RUclips, your didactic is fantastic!
Thank you very much to share your videos.
Great work i follow your projects fot long time
Omg! Amazing project man.
Hey Jan I love your content and thanks for your hard work. A long way to go yet but learning loads already.😀
Dude, this is the best stack.
🚀
Amazing thank you for this wonderful project will learn a lot
nice, good work, please more videos of this type
Jan you are great! if you just create the shipping detail page and sizes variation it will helped a lot.
This will definitely teach alot
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.❤
Done. Thanks for the tutorial
Nice one 🚀
thank you so much
i will add this project to my cv now
nice one, it will look good on your cv 😁
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.
Bro on 🔥,❤ from 🇮🇳
This is great, Thanks for Sharing.
Amazing!
yooo wait this was posted ar the right time maan 😂
filters for the product categories would be a grt help
Thank you for the video, I want to ask, if the user makes an order, can the store manage the order? such as the item being processed etc.?
Hi Jan Marshall, I'm getting an error 500 "something went wrong" when uploading images using uploadThing but I did setup everything correctly .
same here!! did it got resolved then let me know
well i debugged it ... just change your page.tsx of dashboard/product/createproduct add "use client" on top and add api token instead of api id and secret !.
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 ?
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
Dude, thanks.
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 ?
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
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?
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
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?
NICE !
But how add the shipping fees in the product page and stripe checkout?
When doing the stripe checkout in the server action you can add what ever you want(taxes, shipping)
Sir create one real time chatting app using this stack plus new tech
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
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
Make a copy of H&M website
Love you videos bro keep making videos I love it
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
Thank u for all man you'r the best, but please bro 8 or 10hours is too much
Lol, it’s not
Thanks !
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 ?
Also, I would love to hear your opinion on a system like MedusaJS , Again thank you for your time and efforts
Hello
Has anyone managed to implement a pagination function for the all products page?
I really need your help please.
what is your vsc theme name?
i got error after click signup button "kinde attackers might be trying to steal your information from..."
Why is the customer address not being collected? Without a proper address, sellers cannot ensure successful delivery of orders.
3:33:45
I have a question, this project have pagination ?
How to add Pay on delivery option
Really good video but i feel like some thing like the switch case for the category was really unnecessary. Hard coding all the categories is bad and you shouldve made it dynamic.
Bro create blog application using MERN stack nextjs with admin panel and filtering option just ❤❤❤
I cannot see the product model on Prisma studio when I create the product . how's that possible ?
same
🔥🔥
I am from pakistan , no option id there in stripe , how can i follow the video ? i also don't have bank account
Just started - looks good. The link to Kinde does not work. Thanks
Nice 👍🏻. Was probably an outage with dub.co, because right now everything works for me
26:14
i feel lack of some things such as the quantity of products,Admin's order approval function
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...
@@janmarshalcoding I got that part wrong
@@chauquang55 All good mate 🤝
@@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.
@@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
where is the upload thing env part?
there is a typo "uplaodthing" also the file name
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.
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...
@@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
@@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
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
@@JustinNg26 Everything in this video has a generous free tier. **Nothing** requires a credit card!
@2:12
2:14
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.
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
@@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.
Where is source code?
👍🏻
Are you polish?
I often travel to Poland, but I am German. But Poland is great!
make js stop please😢
@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
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
Seems like inspired by @codewithantonio
Just because this is a storefront + admin dashboard? 😂. The inspiration came from shadcnui blocks, which has templates for an ecommerce dashboard.
@@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.
@@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!
@@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. 😅
All Good, I take no offense 🤝 For the features you can either open the RUclips 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)
@5:43