Grubbin - The Ultimate Restaurant Experience

Live Demo

Welcome to Grubbin, the groundbreaking full-stack restaurant app that’s revolutionizing the way you dine! Built on the robust PERN stack (PostgreSQL, Express, React, Node.js), Grubbin offers a seamless ordering experience, from exploring a gourmet menu to placing orders with lightning-fast speed. Our app is designed to dazzle both foodies and restaurateurs alike, making every meal an unforgettable event.

Features

• Cutting-Edge User Authentication: Secure sign-up, login, and profile management powered by JWT .
• Mouthwatering Menu: Discover an extensive, visually appealing menu that highlights each delectable dish.
• Real-Time Ordering: Experience real-time order tracking, ensuring your cravings are satisfied without delay.
• Interactive Reviews: Share and read reviews that add a personal touch to every dining experience.
• Secure Payments: Fast and secure transactions powered by Paystack.

Tech Stack

Backend

• Node.js & Express:
• PostgreSQL & Prisma ORM:
• JWT & Cookie Authentication:

Frontend

• React:
• React Router:
• CSS Modules:

Dependencies

• @prisma/client: Prisma for database access and manipulation.
• bcryptjs: Provides password hashing and encryption functionality.
• cloudinary: A library for managing image and media uploads using Cloudinary's powerful API.
• cookie-parser: Middleware for parsing cookies from incoming HTTP requests.
• cors: Enables Cross-Origin Resource Sharing (CORS) to allow your backend to interact with different origins.
• dotenv: Loads environment variables from a .env file into process.env for easy configuration.
• express: A minimalist web framework for Node.js, used to build robust APIs.
• express-validator: Offers a suite of validation and sanitization utilities for Express routes.
• jsonwebtoken: For generating and verifying JSON Web Tokens (JWTs) used in authentication.
• axios: A promise-based HTTP client for making API requests from both the browser and Node.js.
• react-icons: A collection of customizable icons for React applications.
• react-paystack: A React integration that simplifies working with the Paystack payment gateway.
• react-router-dom: A routing library for React that enables navigation among views of various components.
• react-toastify: Displays beautiful and customizable toast notifications in React applications

📸 Screenshots

Here are a few highlights from the app

Home Page

Menu Page

Order Confirmation Page

Profile Page

Paystack Api Page

🔧 Installation & Setup

Backend Setup

1. Clone the Repository:

   git clone https://github.com/your-username/grubbin.git
   cd grubbin/backend
   

2. Install Dependencies:

   npm install
   

3. Configure Environment Variables: Create a .env file in the backend directory and add:

   DATABASE_URL=your_postgresql_database_url
   FRONTEND_PROD_URL=your_frontend_url
   JWT_SECRET=your_secret_key
   NODE_ENV=development
   CLOUDINARY_API_KEY = your_secret_key
   CLOUDINARY_API_SECRET = your_secret
   

4. Run Database Migrations:

   npx prisma migrate dev --name init
   

5. Start the Server:

   node server.js
   

Frontend Setup (Vite)

1. Navigate to the Frontend Directory:

   cd ../frontend
   

2. Install Dependencies:

   npm install
   

3. Start the Vite App::

   npm run dev
   

Contributing

If you would like to contribute to this project:

• Fork the repository.
• Create a new branch for your feature/bugfix.
• Commit your changes and open a pull request.