TOMATO - Food Ordering Website

This repository hosts the source code for TOMATO, a dynamic food ordering website built with the MERN Stack. It offers a user-friendly platform for seamless online food ordering.

Demo

• User Panel: https://food-delivery-frontend-s2l9.onrender.com/
• Admin Panel: https://food-delivery-admin-wrme.onrender.com/

Features

• User Panel
• Admin Panel
• JWT Authentication
• Password Hashing with Bcrypt
• Stripe Payment Integration
• Login/Signup
• Logout
• Add to Cart
• Place Order
• Order Management
• Products Management
• Filter Food Products
• Login/Signup
• Authenticated APIs
• REST APIs
• Role-Based Identification
• Beautiful Alerts

Screenshots

• Hero Section

• Products Section

• Cart Page

• Login Popup

Run Locally

Clone the project

    git clone https://github.com/Mshandev/Food-Delivery

Go to the project directory

    cd Food-Delivery

Install dependencies (frontend)

    cd frontend
    npm install

Install dependencies (admin)

    cd admin
    npm install

Install dependencies (backend)

    cd backend
    npm install

Setup Environment Vaiables

  JWT_SECRET=YOUR_SECRET_TEXT
  SALT=YOUR_SALT_VALUE
  MONGO_URL=YOUR_DATABASE_URL
  STRIPE_SECRET_KEY=YOUR_KEY

Setup the Frontend and Backend URL

• App.jsx in Admin folder const url = YOUR_BACKEND_URL

• StoreContext.js in Frontend folder const url = YOUR_BACKEND_URL

• orderController in Backend folder const frontend_url = YOUR_FRONTEND_URL

Start the Backend server

    nodemon server.js

Start the Frontend server

    npm start

Start the Backend server

    npm start

Tech Stack

• React
• Node.js
• Express.js
• Mongodb
• Stripe
• JWT-Authentication
• Multer

Deployment

The application is deployed on Render.

Contributing

Contributions are always welcome! Just raise an issue, and we will discuss it.

Feedback

If you have any feedback, please reach out to me here

==============================================================================================================================================================================================================================================================================

=>How to dockerize this project

=>Clone the project git clone https://github.com/Mshandev/Food-Delivery

=>Create a .env file in /backend folder and put these credential inside it JWT_SECRET=YOUR_SECRET_TEXT SALT=YOUR_SALT_VALUE MONGO_URI=YOUR_DATABASE_URI STRIPE_SECRET_KEY=YOUR_KEY

EXAMPLE: PORT=5000 MONGO_URI=mongodb:localhost:27017/tomato STRIPE_SECRET_KEY=sk_test_51D9ybx... JWT_SECRET=gE8QVTK5zWmx6sp72WH9Gx9PBJIFwjc7z5GIT16MT+k= SALT_VALUE=10

=>Setup the Frontend and Backend URL as mentioned bellow

• Add bellow line in App.jsx file in Admin folder const url = YOUR_BACKEND_URL or Your Ec2 instance public IP(http://13.232.197.66:5000)

• Add bellow line in StoreContext.js file in Frontend folder const url = YOUR_BACKEND_URL or Your Ec2 instance public IP(http://13.232.197.66:5000)

• orderController in Backend folder const frontend_url = YOUR_FRONTEND_URL or Your Ec2 instance public IP(https://13.232.197.66:5173)

=>Go inside /admin folder & create a Dockerfile & add these codes in this file and save it

---------------- Stage 1: Build the Admin Frontend ----------------

FROM node:18-slim as build

Set working directory inside container

WORKDIR /app

Copy package.json and package-lock.json first (better caching)

COPY package*.json ./

Install dependencies

RUN npm install

Copy rest of the source code

COPY . .

Build the Vite app (output will go to "dist")

RUN npm run build

---------------- Stage 2: Serve with Nginx ----------------

FROM nginx:alpine

Copy build output from previous stage to nginx html directory

COPY --from=build /app/dist /usr/share/nginx/html

Expose nginx default port

EXPOSE 80

Start nginx

CMD ["nginx", "-g", "daemon off;"]

=>Go inside /frontend folder & create a Dockerfile & add these codes in this file and save it

Step 1: Build the frontend

FROM node:18-slim as build

WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build

Step 2: Serve with Nginx

FROM nginx:alpine

Copy build output to Nginx html dir

COPY --from=build /app/dist /usr/share/nginx/html

Expose frontend port (Nginx default 80)

EXPOSE 80

Start Nginx

CMD ["nginx", "-g", "daemon off;"]

=>Go inside /backend folder & create a Dockerfile & add these codes in this file and save it

Use Node.js LTS

FROM node:18-slim

Set working directory

WORKDIR /app

Copy package files first (for caching)

COPY package*.json ./

Install dependencies

RUN npm install

Copy rest of the backend code

COPY . .

Expose backend port

EXPOSE 5000

Start backend server

CMD ["npm", "start"]

=>Now create a docker-compose.yaml file in /Food-Delivery app folder and paste the codes bellow

version: '3.9'

services: mongo: image: mongo:6 container_name: mongo restart: always ports: - "27017:27017" volumes: - mongo_data:/data/db

backend: build: ./backend container_name: backend restart: always ports: - "5000:5000" environment: - MONGO_URL=mongodb://mongo:27017/tomoto depends_on: - mongo

frontend: build: ./frontend container_name: frontend restart: always ports: - "3000:80" depends_on: - backend

admin: build: ./admin container_name: admin restart: always ports: - "4000:80" # admin app accessible on http://<EC2_IP>:4000 depends_on: - backend

volumes: mongo_data:

=>Now run this command to start and stop the docker-compose docker-compose up -d --build docker-compose down

=>Access the ports Admin Page: http://your_instance_public_ip:4000/ Frontend Page: http://your_instance_public_ip:4000/ Backend Page: http://your_instance_public_ip:5000/

=>To access the database run the commands inside the mongo container

1. mongosh
2. show dbs
3. use <db_name>
4. show collections
5. db.<collection_name).find()

==============================================================================================================================================================================================================================================================================