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

Built with

• 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 pull nithin1729s/pixel-plate-frontend:latest

3. Pull the backend 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