Food Ordering System

A full-stack food ordering application built with the MERN stack (MongoDB, Express, React, Node.js).

Features

• 🔐 User Authentication: Sign up, login, protected routes
• 🍽️ Menu Browsing: View food items with details and images
• 🛒 Shopping Cart: Add items, adjust quantities, place orders
• 📦 Order Tracking: View order history and status updates

Tech Stack

Frontend

• React (with Vite)
• React Router for navigation
• Context API for state management
• Tailwind CSS for styling
• Axios for API requests

Backend

• Node.js with Express
• MongoDB database
• JWT for authentication
• RESTful API design

Getting Started

Prerequisites

• Node.js (v14+)
• MongoDB installed locally or a MongoDB Atlas account

Installation

1. Clone the repository:

   git clone <repository-url>
   

2. Install frontend dependencies:

   cd react_template
   pnpm install
   

3. Install backend dependencies:

   cd backend
   npm install
   

4. Set up environment variables:

   • Create a .env file in the backend folder following the example in .env.example

5. Seed the database with sample menu items (optional):

   cd backend
   node src/seeds/menuSeeder.js
   

Running the Application

1. Start the backend server:

   cd backend
   npm run dev
   

2. Start the frontend development server:

   cd ..
   pnpm run dev
   

3. Open your browser and navigate to http://localhost:5173

Project Structure

/
├── backend/               # Backend code
│   ├── src/
│   │   ├── config/        # Configuration files
│   │   ├── controllers/   # Request handlers
│   │   ├── middleware/    # Express middleware
│   │   ├── models/        # MongoDB models
│   │   ├── routes/        # API routes
│   │   └── utils/         # Utility functions
│   └── package.json
│
├── public/                # Static assets
│   └── assets/
│       └── images/        # Food images
│
├── src/                   # Frontend code
│   ├── components/        # React components
│   │   ├── auth/          # Authentication components
│   │   ├── cart/          # Cart components
│   │   ├── layout/        # Layout components
│   │   ├── menu/          # Menu components
│   │   └── orders/        # Order components
│   │
│   ├── context/           # React context providers
│   ├── hooks/             # Custom React hooks
│   ├── pages/             # Page components
│   ├── utils/             # Utility functions
│   ├── App.jsx            # Main App component
│   └── main.jsx           # Entry point
│
└── package.json