Full Stack Restaurant Food Ordering App Tutorial
In this tutorial, we will be building a full stack restaurant food ordering app using Next.js 13, Prisma, PostgreSQL and Stripe. This project will cover the front-end and back-end development, as well as payment processing using Stripe.
Next.js 13
Next.js is a popular React framework that allows for server-side rendering and other modern web features. In this project, we will be using Next.js 13 to build the front-end of our food ordering app. Next.js provides a great developer experience with features like automatic code splitting, fast refresh, static site generation, and server-side rendering.
Prisma and PostgreSQL
Prisma is a modern database toolkit that makes it easy to work with databases in a type-safe and efficient way. We will be using Prisma along with PostgreSQL as our database for storing restaurant and menu data. Prisma’s powerful query builder and schema management tools will allow us to work with our database in a type-safe manner and make it easy to manage our data models.
Stripe
Stripe is a popular payment processing platform that allows for secure and easy payment processing. In our food ordering app, we will be integrating Stripe for handling customer payments. With Stripe, we will be able to securely process payments and handle customer billing information. This will provide a seamless and secure payment experience for our app users.
Conclusion
By the end of this tutorial, you will have a fully functional restaurant food ordering app with a modern front-end built using Next.js 13, a secure and efficient database using Prisma and PostgreSQL, and integrated payment processing using Stripe. This project will cover all aspects of building a full stack app, from front-end design and development to back-end data modeling and payment processing. Stay tuned for the upcoming tutorials!
Many thanks for the tutorial!. on my end, getServerSession does not work in route handlers, but only in server components. Is it ok to check session in a server component, and from there, pass session info through a url query string, to the api route handler ?
im stucked at Starting the Docker Engine…
Docker Engine is the underlying technology that runs containers
please help
Anyone facing issues with payment Intent on the success page generated differently from the one in the Prisma database?
You don't have to write all of this: return new NextResponse(JSON.stringify(categories), { status: 200 });
You can just write: return NextResponse.json(categories, { status: 200 });
The .json() part will take care of the stringify part, no need for the new keyword and also no need for the status: 200 like it's the default.
stripe not working , getting Content Security Policy Errors after integrating stripe plzz help me to fix it, i spend 9hrs to fix it 🥵 , but i cant.. can any help me.
can anyone help with hydration error persisting here please?
at 1:00:14, deleting the .next folder didn't solve the problem.
what I tried:
1. stop server
2. delete .next folder
3. restart server
4. access restaurant homepage
5. click login
6. choose sign in with google
7. choose my google account
8. same error message is displayed 🙁
First of all, thank you for posting such a good lecture. I completed the web page by following the code for a long time.
Please teach with code that executes "npm run build".
Does anyone have 502 error when uploading img ?
having issues with hydration on the cart page, anyone can help or has faced the same issue?
Thank you for great tutorial. I had a problem at 1:00:00 when I used the Google provider. I already did the new migration. The error message shown: "Invalid `prisma.account.findUnique()` invocation:
Operation 'findUnique' for model 'Account' does not match any query."
I tried to google it but did not find the same.
why i get error when i signin my gmail acc in login page?
,I keep getting the same "Try signing in with a different account." error ..I stopped the server, deleted the next folder and rerun ..noting changed..apparently it s a cache issue but could not find it.. I stuck here
at 50:21 as soon as i sign in with google it shows 404: this page could not be found please can someone help
Why do I keep getting an internal server error when trying to fetch the API in PayPage.tsx
How do you make the spacing aligned immediately? What shortcut? 19:41 – 19:43
Please tell me why you call API categories there with fetch and not use useEffect or useQuery . Thank you <3
So if I want to add another login option like sign in via regular email if the user doesn't utilize gmail or facebook how would i go about adding that email credential? do i add it to the auth.ts file as well?
else {
return product
} not item