Food Ordering Web Application

This is a full-stack food ordering web application built to understand how real-world web applications are structured and developed. The project focuses on user authentication, clean frontend–backend separation, and a scalable backend design.

The frontend is developed using React with Vite, while the backend is built using Node.js and Express. Firebase is used for authentication to handle secure user login.

---

Features

• User authentication using Firebase (Google login)
• Browse food items through a simple interface
• Place and manage food orders
• Responsive frontend built with React
• Organized backend using MVC architecture
• Protected API routes using middleware
• Separate frontend and backend for better scalability

---

Tech Stack

Frontend

• React
• Vite
• JavaScript
• HTML and CSS
• Firebase Authentication

Backend

• Node.js
• Express.js
• Firebase
• MVC Architecture (Models, Controllers, Routes)
• Middleware for authentication and validation

---

Project Structure

Food_ordering_webApp/
│
├── backend/
│   ├── src/
│   │   ├── auth/          # Authentication logic
│   │   ├── controllers/   # Application logic
│   │   ├── routes/        # API routes
│   │   ├── models/        # Data models
│   │   ├── middlewares/   # Authentication and utility middleware
│   │   ├── db/            # Database configuration
│   │   ├── utils/         # Helper functions
│   │   ├── app.js         # Express app setup
│   │   └── index.js       # Server entry point
│   └── package.json
│
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── assets/        # Images and static assets
│   │   ├── components/    # Reusable components
│   │   ├── screens/       # Application pages
│   │   ├── App.jsx
│   │   └── main.jsx
│   ├── index.html
│   ├── vite.config.js
│   └── package.json
│
└── README.md

---

Setup Instructions

Prerequisites

• Node.js (version 16 or later)
• npm or yarn
• Firebase project configuration

---

Clone the Repository

git clone https://github.com/UmedKumar/Food_ordering_webApp.git
cd Food_ordering_webApp

---

Backend Setup

cd backend
npm install
npm start

This will start the backend server locally using Express.

---

Frontend Setup

cd frontend
npm install
npm run dev

---

Authentication

Authentication is handled using Firebase. Google login is enabled, and backend routes are protected using middleware to ensure only authenticated users can access certain APIs.

---

Future Improvements

• Payment gateway integration
• Order history and tracking
• Admin dashboard for managing items and orders
• UI and user experience improvements
• Deployment to a cloud platform

---

What I Learned

• Structuring a full-stack application
• Implementing authentication using Firebase
• Designing a backend with MVC architecture
• Creating and protecting REST APIs
• Managing frontend and backend as separate projects

---

Author

Umed Kumar GitHub: https://github.com/UmedKumar

---