Skip to content

Latest commit

聽

History

History
147 lines (114 loc) 路 3.48 KB

README.md

File metadata and controls

147 lines (114 loc) 路 3.48 KB
Raw

MioZio

This is a Next.js 14 (App Router) application for a food delivery service.
Users can authenticate using Google or a magic link (powered by Brevo), order food, and make secure payments through Stripe.
The app is written in TypeScript with a responsive design using Tailwind CSS.
The backend uses Prisma as the ORM with a PostgreSQL database.

Table of Contents

Prerequisites

Before you begin, ensure you have met the following requirements:

  • Node.js
  • PostgreSQL database provider (e.g., hosted by neon.com)
  • Stripe account for payment processing
  • Brevo account for magic link authentication
  • Cloudinary account for image hosting

Installation

  1. Clone the repository:
git clone [email protected]:SiegfriedBz/next_app__restaurant.git
cd next_app__restaurant
  1. Install dependencies:
npm install
  1. Set up environment variables:

Create a .env file in the root directory and add the following environment variables

# Contact Information
PHONE_NUMBER=
MAIL_CONTACT=

# Database Configuration
# PostgreSQL database connection string
DATABASE_URL="postgresql://..."

# NextAuth Configuration
NEXT_PUBLIC_NEXTAUTH_URL=
NEXTAUTH_SECRET=

# NextAuth - Google Provider
# Google OAuth client ID and secret
GOOGLE_CLIENT_ID=
GOOGLE_SECRET_ID=

# Cloudinary Configuration
# Cloudinary cloud name
CLOUDINARY_CLOUD_NAME=
# Cloudinary application name for seeding images
CLOUDINARY_APP_NAME="MyApp"
# Cloudinary API key and secret
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=

# Stripe Configuration
# Stripe API keys (get them from https://dashboard.stripe.com/apikeys)
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=

# Brevo Mail API
# API key for Brevo email service
BREVO_API_KEY=

Upload Images to Cloudinary

  • Ensure you have images in the ./seed/data/images folder.
  • Run the following command to upload the images:
npm run seed:cloudinary

Set up Prisma & Seed the database

Initialize Prisma:

npx prisma init

Generate Prisma Client:

npx prisma generate

Seed the database:

npm run seed:db

Running the Development Server

To start the development server, run:

npm run dev

Building for Production

To build the project for production, run:

npm run build

Running the Production Server

After building the project, you can start the production server with:

npm start

Technologies Used

  • Framework: React, Next.js 14 (App Router)
  • TypeScript: Provides type safety and improved development experience.
  • Cloudinary: : Image hosting service.

Frontend:

  • react-query: Library for managing server-state in React applications
  • Styling: Tailwind CSS, responsive design

Backend:

  • ORM: Prisma
  • DB: PostgreSQL
  • Authentication: NextAuth.js with Google Provider and Brevo for magic link.

Payment Processing:

  • Stripe

Live Demo

Visit the live demo of MioZio deployed on Vercel PostgreSQL DB hosted on neon.com