i really love daisyui, it is very underated tailwind library, different from other that use client function. it does not need extra setup to work in both server-component or client-component, theming customization is amazing, great color combination, easy to override the style ❤
For the first 1 hour. I would say that this is one of a very few tutorials that explains most (if not all) of the tools very well. Kudos to you!!!!! Ps. once I have time to learn more on this, I will surely update on how I feel about this video!!!
Loved the content you produce for the nextjs community. Thanks to you, I have learned so much about project structure, database implementation and design skills. You are an amazing teacher, and you take time to explain concepts, which I am immensely grateful. Please make more projects with TypeScript, TailwindCSS, MongoDB and the PrismaORM, with Clerk authentication and nextAuth. I'm really enjoying these technologies, would love watching more
I finally follow up to the end of Cart page. So far, everything is very informative. I would say that I have been watching a few other tutorials, but the way you teach is the best (in my opinion). One thing I couldn't understand, with this high quality and detail oriented, how come only below 500 likes. Something must be wrong with people!!! You deserve much more than this!!! One of the things that made yours better is that you always (I think so) work on validations and make sure that there should not be any issue in various scenarios. I wish you create more of this type of video tutorial.
Hey Florian Thankyou for the great contents. I was wondering if Next Js + Shopify would be a great real world production grade web app. Please do a tutorial on that.
Great stuff! Just finished deploying this app, really enjoying the content, looking forward to start on the whatsapp clone next, would love to see a continuation of this project with Stripe, thanks a bunch!
Thank you for this tutorial so much. I struggled with the creation of the search bar but your implementation works perfectly. Even if I wanted to follow a tutorial it was almost impossible with all the changes in nextjs :D
Finally done with the tutorial!! Awesome as always. Wonder if you would make a second part of this application where the users who create the items may edit and delete their items
the functionality of creating and editing is almost the same - when editing an item, you send a post request with the updated information, you just have to match the item using its id/slug
Thanks for the perfect Tutorial :) Love your vids! I just wanted to give a small hint: There is a really solid mongodb extension for vscode, so you can see your mongodb in vscode without the need to leave the editor.
Im building this Project next and I would love to see the Stripe implimentation because Im interested to build Businesses E-commerce websites and this Tutorial will be my gateway to building a lot of projects for clients Till everything clicks
Nice video. Adding stripe would have made it perfect :-). Trying to add it, but with anonynomous cart has me stumped for the moment. Thanks for sharing your knowlegde.
2:56:36 when i try to add existing product to cart it didn't increment the value instead it shows me error Unknown argument `quantity`. Available options are marked with ?. in my prisma quantity is Integer. How can i solve this issue
I'm getting the error in lib/db/cart.ts: Error: Invalid `prisma.cart.findUnique()` invocation: Error converting field "updatedAt" of expected non-nullable type "DateTime", found incompatible value of "null". Anyone have any solutions?
Great tutorial.Thank you.i am still surprised how possible backend is simple and easy with server components like this...also really wondering where Nextjs is heading to..
Hello. I have a problem> my vscode is not suggesting autoimport for cookies() method which was introduced at 2:30:40 . I searched and tried many suggestions but still no luck. Autoimport for other modules work, except for next/dist/components/headers and react-icons as well. For cookies() method it suggests other methods or constants from next/dist/server/api... Any help is appreciated. Thanks
@@codinginflow the nextauth SessioinProvider is giving me a runtime error. any advice because its frustrating for no reason. i even switched to nextjs 13-4-7 like you but it didnt work
Very well explained! The best Project using Next server action on YT so far, and one of the best Next13 project I've ever followed! There is one thing I didn't quite understand though. In 1:18:00 you mentioned that we have to use type here so that we can extend ComponentProps. From my understanding, we can still use interface by: ``` interface FormSubmitButtonProps extends ComponentProps { // ... my own prop interface} ``` Are there any difference here?
Thank you for this video. I'm new to Nextjs. How to take a build for this website?. I'm getting error while taking build like this Export encountered errors on following paths: /_not-found (all routes). Thanks in advance.
Amazing course! Also it's crazy to me how fast nextjs updates. I tried watching your nextjs tutorials from january and february 2023 and today in july everything is so much different, the entire structure so it's hard to follow along. I constantly have to keep watching your newest and latest tutorials. I'd like to see a Stripe integration tutorial as well as a real-time chat app, what do you think?
I think revalidation of path is not efficient for a complex UI. At 02:46:40 , you have revalidated the entire product page when you add that to cart. What if you have a complex UI with 50+ components ? Is there any better way ? Like in react client components using context or redux, when we have a state change only that one particular component updates or re-renders. Now in next js server comps we revalidate entire page . I dont like it.
Does server actions replace the route handlers, if not when to use which one. Also this approach has both the frontend and backend code intermixed which contradicts the earlier idea that we should keep both code separate, a little thoughts on that would be helpful as well
one more question, im connected to my android phone's hotspot that uses 4g internet, so im not connected to my home wifi. when i try to login via google sign in it keeps throwing an error callback saying "try signing in with a different account". No errors in console. Just forbids me for signing in with google. I guess this has something to do with me being connected on a hotspot network? do you have any idea what could it be? what can i try to fix this?
Thanks for this tutorial. I got a popup in my IDE to update my Prisma and Prisma client from 4.16.1 to 5.0.0. Will this not affect the way we integrate with mango database and other things?
wellDone, this is great, you are wonderful; i guess the serverActions are no more in Alpha again...i guess all the bugs are fixed now...like this? "await new Promise(r => setTimeout(r, 3000)) "
i am facing issue. when i add one product to cart and goto cart page it shows that product. again if i go back to home page and add another product and then go to cart, that second product didnt show up until i refresh cart page.
alright i completed the tutorial successfully now. great code quality and explanation! now this is my first time working with prisma and in depth of nextjs. i usually built backend with aws. and i saw no backend being built here, everything was used "as a backend" with prisma ORM? how does this work? have we just built the backend entirely.. on the frontend? no need for aws, cloud services etc?
Basically, yes. Next.js is a full-stack framework that includes both the frontend and backend. Server components and server actions are executed on the server :)
Really enjoy your videos. Still unclear why did you use Prisma instead of native libraries and tools? Just curious. Also, everyone talks about caching issues with new Next Js 13.4 Would you add more on this if you were to shoot this video now?
The native MongoDB driver is not very popular. Calling revalidatePath in a server action invalidates the local client cache and should fix the caching issue. There are some situations where caching is still a problem but they shouldn't apply to our project here.
Hey Florian, one issue, very nice tutorial but the /cart/page.tsx is not triggering the const cart = await getCart(), somehow that line is not being read. Can you please give some light about this? Thanks in advance!
@@codinginflow There is no error message, it’s just not being triggered. It is only being executed the first time, the second time is not being executed, somehow looks like it’s cached or something, like I would need a useEffect…
@@codinginflow yes, I arrived to the part where the cart page is ready, so we read the cookie to get the cart from mongo, the thing is when you add an item in the product page and you click view cart, the cart page somehow doesn’t shows the new added item/items, when you reload the page then it appears.
Why not use postgres over mongodb? SQL should be used for structured data like ecommerce stores where products belong to a store, orders to a user, etc.
@@codinginflowYes, I started by following your tutorial. On the add product page, the "use server" error was reported and I copied the code. It may be that I did not install any other supported features, so I will look back again.
@@codinginflow The prompt is: x To use Server Actions, please enable the feature flag in your Next. Then I read the document and it was only possible to use it together with the form action. I used shadcn/ui and changed the form to a form, but it didn't work.。
in schema.prisma, what is the difference between annotating specific fields with @unique and on top of that at the bottom of table include @@unique([token]) on the same field that was already annotated with @unique?
@@codinginflow 😅 it's quite complex, the whole data flow structure, but it's sinking in thanks to your concise explanations. When I'm done I will try to redo it by building my own 🤞.
@@codinginflow Also, w/ my beginner struggles aside. I gotta admit, I'm highly impressed by how simplified the whole process was, thanks to the new NextJS 13 and Prisma, not to mention Tailwind CSS and DaisyUI.. It's going to be a lot of fun building websites with these. Such a good time to be returning to web development.
I am stuck with the UserMenuButton component getting this error : ⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". ^^^^^^^^^^ I am not finidng help with fixing this errrot
in Navbar.tsx where u called await getCart(). what if there is no cart id exist in cookies. the whole code broke. and if we use createCart in Navbar.tsx it throws "cookies can only be modified in server actions"
Yes, a stripe tutorial will be 🔥🔥🔥
i really love daisyui, it is very underated tailwind library, different from other that use client function. it does not need extra setup to work in both server-component or client-component, theming customization is amazing, great color combination, easy to override the style ❤
I agree with all of these points 👌🏻
For the first 1 hour. I would say that this is one of a very few tutorials that explains most (if not all) of the tools very well. Kudos to you!!!!!
Ps. once I have time to learn more on this, I will surely update on how I feel about this video!!!
Glad it helped!
Would love to see the implementation with stripe
Thank you for the tutorial! That's exactly what I've been looking for! I'm sure a Stripe tutorial would be great addition to your channel.
Glad you like it!
Please Make a video of stripe integration, really loved this video learned a lot from this .
your explanation is very easy to understand. Thank you
Best Next.js tutorial I've ever seen. Very well explained. Thanks.
Thank you very much 💚
Loved the content you produce for the nextjs community. Thanks to you, I have learned so much about project structure, database implementation and design skills. You are an amazing teacher, and you take time to explain concepts, which I am immensely grateful. Please make more projects with TypeScript, TailwindCSS, MongoDB and the PrismaORM, with Clerk authentication and nextAuth. I'm really enjoying these technologies, would love watching more
Thank you for the kind words! Check out my latest tutorial, it uses these technologies!
I finally follow up to the end of Cart page. So far, everything is very informative. I would say that I have been watching a few other tutorials, but the way you teach is the best (in my opinion).
One thing I couldn't understand, with this high quality and detail oriented, how come only below 500 likes. Something must be wrong with people!!! You deserve much more than this!!!
One of the things that made yours better is that you always (I think so) work on validations and make sure that there should not be any issue in various scenarios.
I wish you create more of this type of video tutorial.
Thank you for the kind words!
Hey Florian Thankyou for the great contents. I was wondering if Next Js + Shopify would be a great real world production grade web app. Please do a tutorial on that.
@@brancode404 I'll keep it mind
Great stuff! Just finished deploying this app, really enjoying the content, looking forward to start on the whatsapp clone next, would love to see a continuation of this project with Stripe, thanks a bunch!
Thank you very much 😊
Thank you for this tutorial so much. I struggled with the creation of the search bar but your implementation works perfectly. Even if I wanted to follow a tutorial it was almost impossible with all the changes in nextjs :D
Glad you liked the tutorial!
Thank you for your hard work making this video! It is very well explained, structured and performed!
Glad it was helpful!
I was searching this kind of tutorial. Huge thanks for providing this mate
I hope you like it 😎
@@codinginflow definitely
Finally done with the tutorial!! Awesome as always.
Wonder if you would make a second part of this application where the users who create the items may edit and delete their items
the functionality of creating and editing is almost the same - when editing an item, you send a post request with the updated information, you just have to match the item using its id/slug
@@Vancelott Thank you, will need to try that. It also should be a good practice as well
You can do it with a server action
Thanks for the perfect Tutorial :) Love your vids!
I just wanted to give a small hint: There is a really solid mongodb extension for vscode, so you can see your mongodb in vscode without the need to leave the editor.
Thank you for the tip!
This is really a great video on NextJS 14 and the updated server actions
Thanks brother
Im building this Project next and I would love to see the Stripe implimentation because Im interested to build Businesses E-commerce websites and this Tutorial will be my gateway to building a lot of projects for clients
Till everything clicks
@Coding in Flow thank you for putting in so much time and for all your hard work!!!
Thanks for watching bro
Wow! All the way through to production!! Man this is awesome I’m looking forward to this. Nice
Glad you liked it 👌🏻
Nice video. Adding stripe would have made it perfect :-). Trying to add it, but with anonynomous cart has me stumped for the moment. Thanks for sharing your knowlegde.
It's on my list!
Thank you so much for this tutorial!!! Perfect timing!!!! And finally tailwindcss🥳
Haha yea I think I remember your last comment
2:56:36 when i try to add existing product to cart it didn't increment the value instead it shows me error Unknown argument `quantity`. Available options are marked with ?. in my prisma quantity is Integer. How can i solve this issue
Yo bro! please also make a video on integrating stripe in this project. This really was a good project, enjoyed every bit of it.
Great project, I've learnt a lot from this project ❤
Really love it pls we waiting for the stripe tutorial love it ❤❤
Thank you 💚
this video is very very excellent
Thank you very much 💚
I have a question. how do you enable field level encryption with MongoDB such that only the user can see the notes but the administrator cant?
Please make an update to this tutorial about how to use Stripe.
I'm getting the error in lib/db/cart.ts:
Error:
Invalid `prisma.cart.findUnique()` invocation:
Error converting field "updatedAt" of expected non-nullable type "DateTime", found incompatible value of "null".
Anyone have any solutions?
Great tutorial.Thank you.i am still surprised how possible backend is simple and easy with server components like this...also really wondering where Nextjs is heading to..
Yup, it's amazing
Hello. I have a problem> my vscode is not suggesting autoimport for cookies() method which was introduced at 2:30:40 . I searched and tried many suggestions but still no luck. Autoimport for other modules work, except for next/dist/components/headers and react-icons as well. For cookies() method it suggests other methods or constants from next/dist/server/api... Any help is appreciated. Thanks
Import it manually
@@codinginflow yeah I eventually did that 🤣.
beyond amazing more and more comments as i follow through to the end
thank you so much 😍
@@codinginflow the nextauth SessioinProvider is giving me a runtime error. any advice because its frustrating for no reason. i even switched to nextjs 13-4-7 like you but it didnt work
@@psyferinc.3573 what's the error message?
Error: React Context is unavailable in Server Components
@@codinginflow
@@psyferinc.3573 Your code must be different to mine somewhere. Double check.
Very well explained! The best Project using Next server action on YT so far, and one of the best Next13 project I've ever followed!
There is one thing I didn't quite understand though. In 1:18:00 you mentioned that we have to use type here so that we can extend ComponentProps.
From my understanding, we can still use interface by:
```
interface FormSubmitButtonProps extends ComponentProps { // ... my own prop interface}
```
Are there any difference here?
Thank you for the compliment! I'm not sure about the interface right now. If it works, it works 👍
Thank you for this video. I'm new to Nextjs. How to take a build for this website?. I'm getting error while taking build like this Export encountered errors on following paths: /_not-found (all routes). Thanks in advance.
Amazing course! Also it's crazy to me how fast nextjs updates. I tried watching your nextjs tutorials from january and february 2023 and today in july everything is so much different, the entire structure so it's hard to follow along. I constantly have to keep watching your newest and latest tutorials.
I'd like to see a Stripe integration tutorial as well as a real-time chat app, what do you think?
Thank you! I am actually working on a real-time chat app tutorial right now!
I would love to see the stripe tutorial as well
@omjaju9251 No but I'll make one soon
I feel so bad watching such quality content tutorial for free :(
You can pay it back by sharing it with someone 😁
thanks you so much for this tutorial. and please can you explain how we can add Cron jobs to delete pending cart? thanks again
Lol😂 ola muchachos was great to start the project ! Thanks for the hard work as well
😆 I wanted to add some variation to my intros
Add checkout / stripe functionality in same project
Can you add stripe integrations too? Thanks
I think revalidation of path is not efficient for a complex UI. At 02:46:40 , you have revalidated the entire product page when you add that to cart. What if you have a complex UI with 50+ components ? Is there any better way ? Like in react client components using context or redux, when we have a state change only that one particular component updates or re-renders. Now in next js server comps we revalidate entire page . I dont like it.
Revalidating the data doesn't have any impact on rendering. It doesn't matter how complex your UI is. React always rerenders efficiently.
@@codinginflow thank you. I thought revalidating is like refreshing the page.
Great and I'll vote for adding cart-checkout and stripe or PayPal. 🙏❤
noted
@@codinginflowplease add categories page and quantity on individual product as well brother
Damn, you are strong 💪
Years of Android development toughened me up 😎
thank you very much man
you really set things up for us
You're welcome!
Stripe tutorial please and thank you! :D
always, Thank you so much. server action is interesting
yes they are super useful
Does server actions replace the route handlers, if not when to use which one. Also this approach has both the frontend and backend code intermixed which contradicts the earlier idea that we should keep both code separate, a little thoughts on that would be helpful as well
Yes, it replaces route handlers. And your doubt is true. I guess it depends on the size of the project.
one more question, im connected to my android phone's hotspot that uses 4g internet, so im not connected to my home wifi. when i try to login via google sign in it keeps throwing an error callback saying "try signing in with a different account". No errors in console. Just forbids me for signing in with google. I guess this has something to do with me being connected on a hotspot network?
do you have any idea what could it be? what can i try to fix this?
Check the logs in VS Code to see if there is an error
1:10:54 any way to bring zod with the html form
Yes. You can make the form a client component and then use anything you like (like React hook form with Zod)
Can you please extend it further to multi vendor app
Every time I see a new video from you I think... "damn! Much respect for him for escaping the Android hell cage"
Programming is always hard 😆
When I try to add a product I get this error message
Invalid `prisma.product.create()` invocation.
Please help
Did you generate the prisma client?
Awesome! Thank you
Enjoy!
Thanks for this tutorial. I got a popup in my IDE to update my Prisma and Prisma client from 4.16.1 to 5.0.0. Will this not affect the way we integrate with mango database and other things?
I haven't read the release notes on Prisma 5.0 yet but I assume there won't be much change necessary
wellDone, this is great, you are wonderful; i guess the serverActions are no more in Alpha again...i guess all the bugs are fixed now...like this? "await new Promise(r => setTimeout(r, 3000)) "
does it make sense to make as little client components as possible? wont incur in higher costs?
Yea, I think that's a good practice. But one shouldn't worry about it too much. Before the app router, all components were client components.
i am facing issue. when i add one product to cart and goto cart page it shows that product. again if i go back to home page and add another product and then go to cart, that second product didnt show up until i refresh cart page.
I am experiencing the same issue
That's weird because revalidatePath should invalidate the router cache 🤔
alright i completed the tutorial successfully now. great code quality and explanation! now this is my first time working with prisma and in depth of nextjs. i usually built backend with aws. and i saw no backend being built here, everything was used "as a backend" with prisma ORM? how does this work? have we just built the backend entirely.. on the frontend? no need for aws, cloud services etc?
Basically, yes. Next.js is a full-stack framework that includes both the frontend and backend. Server components and server actions are executed on the server :)
Really enjoy your videos. Still unclear why did you use Prisma instead of native libraries and tools? Just curious. Also, everyone talks about caching issues with new Next Js 13.4 Would you add more on this if you were to shoot this video now?
The native MongoDB driver is not very popular. Calling revalidatePath in a server action invalidates the local client cache and should fix the caching issue. There are some situations where caching is still a problem but they shouldn't apply to our project here.
love your videos, any chance you livestream a game making session on unity or some other platform?
I don't do game dev, sorry
Hey Florian, one issue, very nice tutorial but the /cart/page.tsx is not triggering the const cart = await getCart(), somehow that line is not being read. Can you please give some light about this? Thanks in advance!
You need to read the error message
@@codinginflow There is no error message, it’s just not being triggered. It is only being executed the first time, the second time is not being executed, somehow looks like it’s cached or something, like I would need a useEffect…
@@leunamvon2565 Did you implement the part where we read from the cookie or the auth state?
@@codinginflow yes, I arrived to the part where the cart page is ready, so we read the cookie to get the cart from mongo, the thing is when you add an item in the product page and you click view cart, the cart page somehow doesn’t shows the new added item/items, when you reload the page then it appears.
@@leunamvon2565 That's weird. Are you using the same Nextjs version as I do?
BIG THANKS!
My pleasure!
Do I need any previous working experience in prisma or anything to start?
No. You just need to watch my Next.js 13 beginner tutorial first.
Why not use postgres over mongodb? SQL should be used for structured data like ecommerce stores where products belong to a store, orders to a user, etc.
What problems did you run into with MongoDB here?
i would like to see a Stripe implementation video thanks
noted
Hola muchachos hahahaha nice, i'm native spanish, that was funny xd
I actually meant Hola amigos 🤣
@@codinginflow pero tambien esta bien dicho
Copy your code, but for some reason, my 'use server' reported an error，At add-product
Don't copy the code, follow the tutorial
@@codinginflowYes, I started by following your tutorial. On the add product page, the "use server" error was reported and I copied the code. It may be that I did not install any other supported features, so I will look back again.
@@Maifumei What error message are you getting?
@@codinginflow The prompt is: x To use Server Actions, please enable the feature flag in your Next.
Then I read the document and it was only possible to use it together with the form action. I used shadcn/ui and changed the form to a form, but it didn't work.。
Huge request to make projects of Jetpack compose android apps from beginner
There will be no more Android tutorials on this channel, please stop requesting them.
@@codinginflow okay then we are unsubscribing okay and disliking too
I want to see a stripe tutorial.
Nice work. Where is the payments. PayPal or anything else
Please make a complete course on Nextauth and Supabase with a real life project.
Supabase has its own auth solution so you don't need next-auth
please add prisma as well in the title .
That's a good idea. I'll do that 👍
yass you did it @@codinginflow
nice!!
Hope you like it!
Stripe tutorial please.
noted 👍
stripe tutorial video please 🙏🏾
following this and yes please make an update for adding stripe
Need Stripe tutorial!
noted! But only if you leave a like on the video
Please Integrate with Stripe I m quite interested to watch it ... @Coding in Flow
Ok noted
in schema.prisma, what is the difference between annotating specific fields with @unique and on top of that at the bottom of table include @@unique([token]) on the same field that was already annotated with @unique?
Good question. I don't know, I copied that snippet from the Next-auth docs. But you're right, the unique token should be enough.
Where is final code?
In the description
and now the second part: Payment Gateaway!
🙏👍👍
the github link thanks
It's in the description
Brain is on smokes here
why 😆
@@codinginflow 😅 it's quite complex, the whole data flow structure, but it's sinking in thanks to your concise explanations. When I'm done I will try to redo it by building my own 🤞.
@@zeus433 nice 👌
@@codinginflow Also, w/ my beginner struggles aside. I gotta admit, I'm highly impressed by how simplified the whole process was, thanks to the new NextJS 13 and Prisma, not to mention Tailwind CSS and DaisyUI.. It's going to be a lot of fun building websites with these. Such a good time to be returning to web development.
@@zeus433 I agree. That's why I have several side projects 😃
Stripe it bro 🥹
Pls smile
Ok
If you like the video
Sure anyway i need this video
omg
I hope you like it!
Look at dem muscles. Dude prolly eatin good from the 💰 he earned from his full stack course 😂
Nah I'm always hungry 😂
Full stack muscles
I am stuck with the UserMenuButton component getting this error :
⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
^^^^^^^^^^
I am not finidng help with fixing this errrot
onlyfans when
I could use the money
in Navbar.tsx where u called await getCart(). what if there is no cart id exist in cookies. the whole code broke. and if we use createCart in Navbar.tsx it throws "cookies can only be modified in server actions"
We create the cart when we add an item, not in the navbar.
thanks you so much for this tutorial. and please can you explain how we can add Cron jobs to delete pending cart? thanks again
Stripe tutorial please