Skip to content

A Full Stack Food Ordering Web Application built using the MERN stack and TypeScript allows users to order food and manage their restaurants. The frontend is styled using Tailwind CSS and ShadCN.

Notifications You must be signed in to change notification settings

Nithin1729S/Pixel-Plate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pixel Plate

A Full Stack Food Ordering Web Application build using MERN stack

Live

The Web Application is hosted on render

Live Website

Demo Video

captioned.mp4

Watch the Demo Video on YouTube

Screenshots

Screenshot from 2024-06-26 10-50-06

Screenshot from 2024-06-26 10-50-11

Screenshot from 2024-06-26 10-50-26

Screenshot from 2024-06-26 10-50-48

Screenshot from 2024-06-26 10-51-07

Screenshot from 2024-06-26 10-51-15

Screenshot from 2024-06-26 16-00-01

Screenshot from 2024-06-26 16-00-13

Screenshot from 2024-06-26 16-01-10

Screenshot from 2024-06-26 16-02-35

Screenshot from 2024-06-26 16-03-08

Screenshot from 2024-06-26 16-04-31

Screenshot from 2024-06-26 16-05-54

Screenshot from 2024-06-26 16-06-02

Screenshot from 2024-06-26 16-06-13

Built with

TypeScriptReact JSTailwindCSSExpressJSMongoDBCloudinaryJSON WebtokensReduxNodeJSNodemonStripeViteZodRender

  • Frontend: ReactJS, TailwindCSS, ShadCN
  • Server/Hosting: Render
  • ODM: Mongoose
  • Backend: ExpressJS, MongoDB, Cloudinary
  • Misc: Stripe, Auth0, React Redux Toolkit, React Router DOM, JSON Web Tokens, React Query, Lucide React, Nodemon, Dotenv, Webhook, Zod, Vite

Features

  • User Authentication using Auth0
  • Stripe Payments Integration
  • Search, Sort & Filter Functionality
  • Mobile Responsive
  • Hosted on Render
  • Toast Notifications
  • Cloudinary Database to store images
  • MongoDB to store textual Information
  • Add to cart option
  • Stripe Webhook Implemented
  • Frontend Backend Completely Decoupled
  • Real Time Order Status Update

Prerequisites

  • Node.js and npm installed.
  • MongoDB installed and running locally
  • Cloudinary Configured.
  • Stripe Configured.

Getting Started

To get started with this project, follow these steps:

  1. Clone the repository:

    git clone https://github.com/Nithin1729S/Pixel-Plate.git
  2. Change .env files:

    Update the details in the .env files located in the frontend directory and the backend directory.

    In the frontend directory .env file, set the following variables:

    VITE_AUTH0_DOMAIN='<YOUR VITE AUTH0 DOMAIN NAME>'
    VITE_AUTH0_CLIENT_ID='<YOUR VITE AUTH0 CLIENT ID>'
    VITE_AUTH0_CALLBACK_URL='<URL OF YOUR FRONTEND SITE>'
    VITE_API_BASE_URL='<URL OF YOUR BACKEND SITE>'
    VITE_AUTH0_AUDIENCE='<VITE AUTH0 AUDIENCE>'
    

    In the backend directory .env file, set the following variable:

    MONGODB_CONNECTION_STRING="<YOUR MONGODB CONNECTION STRING>"
    AUTH0_AUDIENCE='<YOUR AUTH0 AUDIENCE>'
    CLOUDINARY_CLOUD_NAME='<YOUR CLOUDINARY CLOUD NAME>'
    CLOUDINARY_API_KEY='<YOUR CLOUDINARY API KEY>'
    CLOUDINARY_API_SECRET='<YOUR CLOUDINARY API SECRET>'
    FRONTEND_URL='<FRONTEND SITE URL>'
    STRIPE_API_KEY='<YOUR STRIPE API KEY>'
    STRIPE_WEBHOOK_SECRET='<YOUR STRIPE WEBHOOK SECRET>'
    
    
  3. Install dependencies:

    First, navigate to the backend folder and install dependencies:

    npm install

    Then, navigate to the backend folder and install its dependencies:

    npm install
  4. Run the development servers:

    In one terminal window, run the backend development server:

    npm run dev

    In another terminal window, run the frontend development server:

    npm run dev

Getting Started with Docker

To get started with this project, follow these steps:

Prerequisites

  • Docker
  • Docker Compose
  1. Clone the repository:

    git clone https://github.com/Nithin1729S/Pixel-Plate.git
  2. Pull the frontend Image: Docker Image

    docker pull nithin1729s/pixel-plate-frontend:latest
  3. Pull the backend Image: Docker Image

    docker pull nithin1729s/pixel-plate-backend:latest
  4. Change .env files:

    Update the details in the .env files located in the root directory.

    VITE_AUTH0_DOMAIN='<YOUR VITE AUTH0 DOMAIN NAME>'
    VITE_AUTH0_CLIENT_ID='<YOUR VITE AUTH0 CLIENT ID>'
    VITE_AUTH0_CALLBACK_URL='<URL OF YOUR FRONTEND SITE>'
    VITE_API_BASE_URL='<URL OF YOUR BACKEND SITE>'
    VITE_AUTH0_AUDIENCE='<VITE AUTH0 AUDIENCE>'
    MONGODB_CONNECTION_STRING="<YOUR MONGODB CONNECTION STRING>"
    AUTH0_AUDIENCE='<YOUR AUTH0 AUDIENCE>'
    CLOUDINARY_CLOUD_NAME='<YOUR CLOUDINARY CLOUD NAME>'
    CLOUDINARY_API_KEY='<YOUR CLOUDINARY API KEY>'
    CLOUDINARY_API_SECRET='<YOUR CLOUDINARY API SECRET>'
    FRONTEND_URL='<FRONTEND SITE URL>'
    STRIPE_API_KEY='<YOUR STRIPE API KEY>'
    STRIPE_WEBHOOK_SECRET='<YOUR STRIPE WEBHOOK SECRET>'
    

    Update the details in the .env files located in the frontend directory and the backend directory.

    In the frontend directory .env file, set the following variables:

    VITE_AUTH0_DOMAIN='<YOUR VITE AUTH0 DOMAIN NAME>'
    VITE_AUTH0_CLIENT_ID='<YOUR VITE AUTH0 CLIENT ID>'
    VITE_AUTH0_CALLBACK_URL='<URL OF YOUR FRONTEND SITE>'
    VITE_API_BASE_URL='<URL OF YOUR BACKEND SITE>'
    VITE_AUTH0_AUDIENCE='<VITE AUTH0 AUDIENCE>'
    

    In the backend directory .env file, set the following variable:

    MONGODB_CONNECTION_STRING="<YOUR MONGODB CONNECTION STRING>"
    AUTH0_AUDIENCE='<YOUR AUTH0 AUDIENCE>'
    CLOUDINARY_CLOUD_NAME='<YOUR CLOUDINARY CLOUD NAME>'
    CLOUDINARY_API_KEY='<YOUR CLOUDINARY API KEY>'
    CLOUDINARY_API_SECRET='<YOUR CLOUDINARY API SECRET>'
    FRONTEND_URL='<FRONTEND SITE URL>'
    STRIPE_API_KEY='<YOUR STRIPE API KEY>'
    STRIPE_WEBHOOK_SECRET='<YOUR STRIPE WEBHOOK SECRET>'
    
    
  5. Run the Services:

    docker-compose up
    
  6. Access the services: Frontend: The frontend service will be available at http://localhost:3000. Backend: The backend service will be available at http://localhost:5000.

  7. Stopping the services:

      docker-compose down

About

A Full Stack Food Ordering Web Application built using the MERN stack and TypeScript allows users to order food and manage their restaurants. The frontend is styled using Tailwind CSS and ShadCN.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published