Online Food Ordering System

A complete full-stack food ordering application built with React (frontend), Node.js/Express (backend), MongoDB, and Stripe for payments.

Features

✅ User Features

• User authentication (Register/Login)
• Browse restaurants and menus
• Add items to shopping cart
• Place orders with delivery address
• Secure payment processing with Stripe
• View order history and status tracking
• User profile management

✅ Admin Features

• Create and manage restaurants
• Add/edit menu items
• Update order status
• User and order management

✅ Technical Features

• JWT authentication
• Responsive design
• Context API for state management
• Cart management system
• Real-time order updates
• Secure payment integration

Project Structure

food-ordering-system/
├── backend/
│   ├── models/          # MongoDB schemas
│   ├── routes/          # API routes
│   ├── middleware/      # Auth & validation
│   ├── index.js         # Express server
│   ├── seed.js          # Database seeding
│   ├── package.json
│   └── .env.example
│
├── frontend/
│   ├── src/
│   │   ├── components/  # React components
│   │   ├── pages/       # Page components
│   │   ├── services/    # API calls
│   │   ├── context/     # Context providers
│   │   ├── App.js       # Main app
│   │   └── index.js
│   ├── public/
│   ├── package.json
│   └── .env.example
│
└── README.md

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• MongoDB (local or Atlas)
• Stripe account (for payments)

Installation & Setup

1. Clone the Repository

git clone <repository-url>
cd food-ordering-system

2. Backend Setup

Navigate to the backend directory:

cd backend
npm install

Create a .env file with your configuration:

MONGODB_URI=mongodb://localhost:27017/food-ordering
JWT_SECRET=your_jwt_secret_key_change_this
STRIPE_SECRET_KEY=sk_test_your_key
STRIPE_PUBLIC_KEY=pk_test_your_key
PORT=5000
NODE_ENV=development

Install MongoDB locally (if not using Atlas):

• Download from https://www.mongodb.com/try/download/community
• Follow installation instructions for your OS

Seed the database with sample data:

node seed.js

Start the backend server:

npm run dev

The backend will run on http://localhost:5000

3. Frontend Setup

In a new terminal, navigate to the frontend directory:

cd frontend
npm install

Create a .env file:

REACT_APP_API_URL=http://localhost:5000/api
REACT_APP_STRIPE_PUBLIC_KEY=pk_test_your_key

Start the React development server:

npm start

The frontend will run on http://localhost:3000

Default Credentials

After seeding the database:

Admin Account:

• Email: admin@foodhub.com
• Password: admin123

Customer Account:

• Email: customer@example.com
• Password: customer123

API Endpoints

Authentication

• POST /api/auth/register - Register new user
• POST /api/auth/login - Login user
• GET /api/auth/me - Get current user

Restaurants

• GET /api/restaurants - Get all restaurants
• GET /api/restaurants/:id - Get restaurant details
• POST /api/restaurants - Create restaurant (admin)
• PUT /api/restaurants/:id - Update restaurant (admin)
• DELETE /api/restaurants/:id - Delete restaurant (admin)

Menu Items

• GET /api/menus/restaurant/:restaurantId - Get restaurant menu
• POST /api/menus - Add menu item (admin)
• PUT /api/menus/:id - Update menu item (admin)
• DELETE /api/menus/:id - Delete menu item (admin)

Orders

• GET /api/orders - Get user orders
• POST /api/orders - Create order
• PUT /api/orders/:id - Update order status (admin)
• PUT /api/orders/:id/cancel - Cancel order

Payments

• POST /api/payments/create-payment-intent - Create Stripe payment intent
• POST /api/payments/confirm-payment - Confirm payment

Users

• GET /api/users/profile - Get user profile
• PUT /api/users/profile - Update profile
• POST /api/users/address - Add delivery address

Technologies Used

Backend:

• Express.js
• MongoDB with Mongoose
• JWT for authentication
• bcryptjs for password hashing
• Stripe API
• CORS middleware

Frontend:

• React.js
• React Router v6
• Context API for state management
• Axios for HTTP requests
• Stripe.js for payments
• CSS for styling

Workflow

1. Browse - User browses restaurants on homepage
2. Select - Click restaurant to see menu items
3. Add to Cart - Add items to shopping cart
4. Checkout - Proceed to checkout page
5. Enter Address - Provide delivery address
6. Pay - Complete payment via Stripe or choose cash
7. Track - View order status in order history

Environment Configuration

Copy .env.example to .env and update with your actual values:

Backend .env:

MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_secret_key
STRIPE_SECRET_KEY=your_stripe_secret
STRIPE_PUBLIC_KEY=your_stripe_public_key
PORT=5000
NODE_ENV=development

Frontend .env:

REACT_APP_API_URL=http://localhost:5000/api
REACT_APP_STRIPE_PUBLIC_KEY=your_stripe_public_key

Running the Application

Terminal 1 (Backend):

cd backend
npm run dev

Terminal 2 (Frontend):

cd frontend
npm start

Visit http://localhost:3000 in your browser.

Development Tips

• Backend logs API requests and database connections
• Frontend uses React DevTools for component inspection
• Stripe test cards:
  • Visa: 4242 4242 4242 4242
  • Expiry: Any future date
  • CVC: Any 3 digits

Future Enhancements

• 🗺️ Real-time order tracking with maps
• ⭐ Rate and review system
• 🔔 Push notifications
• 💬 Chat support
• 📊 Admin analytics dashboard
• 🎯 Promotions and coupons
• 📱 Mobile app (React Native)

Troubleshooting

MongoDB Connection Error:

• Ensure MongoDB is running locally or check Atlas connection string

CORS Error:

• Verify proxy in frontend package.json points to backend

Payment Not Working:

• Check Stripe keys are correct in .env files
• Use Stripe test mode keys

Port Already in Use:

• Backend: Change PORT in .env
• Frontend: PORT=3001 npm start

License

MIT License - feel free to use for personal or commercial projects

Support

For issues or questions, please create an issue in the repository.