🍽️ Foodie – Full-Stack Restaurant App

A full-stack web application for browsing, listing, and managing a variety of food items. Built using React (Frontend), Express.js (Backend), and MongoDB.

^{Homepage – Light Mode}

🌟GSSoc

🌟 Exciting News...

🚀 This project is now an official part of GirlScript Summer of Code – GSSoC'25! 💃🎉💻 We're thrilled to welcome contributors from all over India and beyond to collaborate, build, and grow Foodie! Let’s make learning and career development smarter – together! 🌟👨‍💻👩‍💻

👩‍💻 GSSoC is one of India’s largest 3-month-long open-source programs that encourages developers of all levels to contribute to real-world projects 🌍 while learning, collaborating, and growing together. 🌱

🌈 With mentorship, community support, and collaborative coding, it's the perfect platform for developers to:

• ✨ Improve their skills
• 🤝 Contribute to impactful projects
• 🏆 Get recognized for their work
• 📜 Receive certificates and swag!

🎉 I can’t wait to welcome new contributors from GSSoC 2025 to this Foodie project family! Let's build, learn, and grow together — one commit at a time. 🔥👨‍💻👩‍💻

🏆 GSSoC 2025 Guidelines

📋 For Participants

✅ Do's

• ✅ Read documentation thoroughly before contributing
• ✅ Follow code style and project structure
• ✅ Write descriptive commit messages
• ✅ Test your changes before submitting PR
• ✅ Be respectful and collaborative
• ✅ Ask questions if you're unsure about anything

❌ Don'ts

• ❌ Don't spam with multiple PRs for same issue
• ❌ Don't copy code without understanding
• ❌ Don't make unnecessary changes
• ❌ Don't ignore code review feedback
• ❌ Don't forget to update documentation when needed

🎯 Contribution Levels

Level	Description	Points	Badge
🥉 Beginner	Fix typos, update docs, minor bug fixes	5-10
🥈 Intermediate	Add features, improve UI/UX, performance	15-25
🥇 Advanced	Major features, architecture improvements	30-50

---

🚀 Quick Navigation

📚 New to Foodie? Complete Developer Guide
👉 LEARN.md – Architecture, setup, contribution pathways, and everything you need to get started!

⚡ Want to jump right in?
Skip to Getting Started for quick setup instructions.

---

📑 Table of Contents

• 🔧 Tech Stack
  • 🖥️ Frontend
  • 🌐 Backend
  • 🗄️ Database
• 🚀 Getting Started
  • Prerequisites
  • 📦 Installation
  • 🐳 Docker Setup (Recommended)
  • 📦 Manual Installation
  • 🔧 Development Setup
• 📁 Project Structure
• 🐳 Docker Commands
• 🧪 Linting
• 🧰 Scripts
• 📝 Notes
• 🤝 Contributing
• 📄 License
• 🔗 References

---

🔧 Tech Stack

🖥️ Frontend

• React 18.3 – User interface
• Vite – Fast build tool and dev server
• React Router DOM – Client-side routing
• ESLint – Linting and code style enforcement

🌐 Backend

• Node.js + Express – REST API server
• CORS + JSON Middleware – Cross-origin requests
• Multer – File upload handling
• Modular API Routing – Organized route structure

🗄️ Database

• MongoDB – NoSQL database for data storage

🐳 DevOps

• Docker – Containerization for all services
• Docker Compose – Multi-service orchestration

---

🚀 Getting Started

Prerequisites

Ensure you have the following installed:

For Docker Setup (Recommended):

• Docker Desktop
• Docker Compose

For Manual Setup:

• Node.js (v16 or above)
• npm or yarn
• MongoDB (local or cloud)

---

📦 Installation

🐳 Docker Setup (Recommended)

One-command setup for the entire application:

# Clone the repository
git clone https://github.com/your-username/foodie.git
cd foodie
npm install

# Start all services with Docker
docker-compose up --build

Access the application:

• 🌐 Frontend: http://localhost:3000
• 🛠️ Admin Panel: http://localhost:5173
• 🔌 Backend API: http://localhost:4000
• 🗄️ MongoDB: localhost:27017

Docker Services:

• foodie-frontend: React app (Port 3000)
• foodie-admin: Admin panel (Port 5173)
• foodie-backend: Express API (Port 4000)
• foodie-mongodb: MongoDB database (Port 27017)

---

📦 Manual Installation

# Clone the repository
git clone https://github.com/your-username/foodie.git
cd foodie

# Install dependencies for all services
cd frontend && npm install && cd ..
cd backend && npm install && cd ..
cd admin && npm install && cd ..

---

🔧 Development Setup

Docker Development

# Start all services
docker-compose up

# Start in detached mode
docker-compose up -d

# View logs for specific service
docker-compose logs frontend
docker-compose logs backend
docker-compose logs admin

Manual Development

Start Frontend:

cd frontend
npm run dev

Start Admin Panel:

cd admin
npm run dev

Start Backend:

cd backend
npm run server

Server runs on http://localhost:4000

Start MongoDB:

# Make sure MongoDB is running locally
mongod

---

📁 Project Structure

Foodie/
├── frontend/                 # React frontend application
│   ├── src/
│   ├── Dockerfile
│   ├── .dockerignore
│   └── package.json
├── backend/                  # Express.js backend API
│   ├── routes/
│   ├── config/
│   ├── uploads/
│   ├── server.js
│   ├── Dockerfile
│   ├── .dockerignore
│   └── package.json
├── admin/                    # React admin panel
│   ├── src/
│   ├── Dockerfile
│   ├── .dockerignore
│   └── package.json
├── docker-compose.yml        # Multi-service orchestration
├── .dockerignore             # Root Docker ignore file
├── README.md
└── CONTRIBUTING.md

---

🐳 Docker Commands

Basic Operations

# Build and start all services
docker-compose up --build

# Start services in background
docker-compose up -d

# Stop all services
docker-compose down

# Stop and remove volumes (⚠️ deletes database data)
docker-compose down -v

# Restart specific service
docker-compose restart backend

# View running containers
docker-compose ps

Development Commands

# View logs for all services
docker-compose logs

# View logs for specific service
docker-compose logs -f frontend

# Execute commands in running container
docker-compose exec backend npm install new-package

# Rebuild specific service
docker-compose build backend

Database Management

# Access MongoDB shell
docker-compose exec mongodb mongosh

# Backup database
docker-compose exec mongodb mongodump --out /backup

# View MongoDB logs
docker-compose logs mongodb

---

🧪 Linting

ESLint is pre-configured with React and Hooks rules for frontend and admin.

# Frontend linting
cd frontend && npm run lint

# Admin linting
cd admin && npm run lint

---

🧰 Scripts

Frontend & Admin Scripts

Command	Description
npm run dev	Start Vite development server
npm run build	Build for production
npm run preview	Preview production build
npm run lint	Run ESLint checks

Backend Scripts

Command	Description
npm start	Start production server
npm run server	Start development server with nodemon

---

📝 Notes

• Make sure MongoDB is running locally or update connectDB() in config/db.js accordingly.
• You can update the backend routes via routes/foodRoute.js.

Environment Variables

The application uses the following environment variables:

Backend:

• MONGODB_URI: MongoDB connection string
• JWT_SECRET: Secret key for JWT tokens
• PORT: Server port (default: 4000)

Frontend:

• REACT_APP_API_URL: Backend API URL

Admin:

• VITE_API_URL: Backend API URL for Vite

Database Configuration

• Docker: MongoDB runs automatically with authentication
  • Username: admin
  • Password: password123
  • Database: foodie
• Manual: Update connectDB() in backend/config/db.js

File Uploads

• Backend handles file uploads via Multer
• Files are stored in backend/uploads/ directory
• Docker setup includes volume mounting for persistence

---

🤝 Contributing

We welcome contributions to the Foodie project! If you find this project helpful, consider starring the repo or opening an issue.

• 📖 Help improve documentation
• 🚀 For more info, go to CONTRIBUTING.md

Development Workflow

1. Fork the repository
2. Create a feature branch
3. Use Docker for consistent development environment
4. Test your changes with docker-compose up --build
5. Submit a pull request

---

📄 License

This project is licensed under the MIT License

Contact 📝

If you have any questions, feedback, or want to collaborate, feel free to reach out to the project maintainer:

Maintainer: Abhishek Farshwal GitHub: Foodie

• LinkedIn
• Twitter
• Instagram

---

🔗 References

• React
• Vite
• Express
• MongoDB
• Docker