Next.js Food ordering App

A food ordering app has built with Next.js framework. The app allows users to log in with previously registered credentials or with Google provider in order to order foods. After the checkout, stripe payment test mode let to test the payment process. New category and food can be add dynamically into the database with admin role. User profile can be updated. Filtering option is available for foods.

Demo: Link

Demo account:

Email: admin@demo.com
Password: 1234

Features

• Allow user to register, log in and log out
• Login can be done with previosly registered account or with google account
• Only logged in users have rights to order foods
• Basic user can update the the own profile and order food
• Admin rights let to create, update or remove categories and menus
• Stripe payment is used with webhook to retrive information about the status of the payment
• Order history with each induvidual order can be check under Order page
• MongoDB database used to store data
• Prisma ORM used to retrive data from database
• Next.js used for CSR and SSR
• Bcrypt used to hash the user password
• React Hook form used to create forms
• Zod used for validation
• Zustand used for state management
• Resend use to send email
• Shadcn UI component library use to built beautiful design
• Toast notification use to improve UX
• Render-as-you-fetch approach is used for Loading screen
• Hosted on Vercel
• Responsive design

How to run from local repository

1. Clone the repository
2. Run npm install command in your terminal
3. Set up MongoDB database, Google provider config, Resend, Stripe with webhook
4. Create .env file and add enviromental variables: open ssl key should generate to NEXTAUTH_SECRET DATABASE_URL=
NEXTAUTH_SECRET=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
RESEND_API_KEY=
STRIPE_PUBLIC_KEY=
STRIPE_SECRET_KEY=
STRIPE_SIGNATURE_SECRET=
NEXT_SERVER_URL=http://localhost:3000
DELIVERY_FEE=2
5. Run npx prisma generate
6. Setup Stripe webhook: link
7. Setup Google auth: link
8. Run npm run dev command in your terminal
9. Server running at http://localhost:3000/

Useful links and informations

• Open SSL key generation:
  • You can use the following link to create open ssl key: https://www.cryptool.org/en/cto/openssl or you can install open ssl and generate key from terminal. To generate code you should run: openssl rand -base64 32
• Google Provider config page:
  • Google
• React Hook Form usage with UI component needs to has ref={null} property to avoid ref warning:
  • Stackoverflow
  • GitHub
• Loading screen approaches (Fetch-than-render, Render-as-you-fetch, Suspense, ):
  • Medium.com
  • Linkedin.com
• Stripe, checkout session, webhook:
  • GitHub #1
  • GitHub #2
  • Linkedin.com
  • Dev.to
  • Medium.com
• Stripe Test cards:
  • Stripe.com

Dependencies

• React
• React DOM
• React Icons
• Lucide Icons
• Typescript
• Tailwind CSS
• Next.js
• Next Auth
• Next Themes
• Prisma
• Prisma Adapter
• bcrypt
• React Hook Form
• @hookform/resolvers
• Zod
• Sonner toaster
• Shadcn ui
• date-fns
• Resend
• Stripe
• Zustand

Layout

Assets

Home page picture from Flo Dahm on Pexels
About page picture from Mat Brown on Pexels
Contact page picture from Igor Starkov on Pexels
Menu items from All Recipes