🍔 Food Ordering Application

A full-stack food ordering application built using React, Node.js, Express, and MongoDB.

This app allows users to browse food items, add them to their cart, place orders, make payments via PayPal, and users can browse through their cart history.

---

📌 Table of Contents

• Features
• Tech Stack
• Installation
• Environment Variables
• Run the Application
• Project Structure
• Screenshots
• License

---

🚀 Features

• User Authentication (Register/Login) with JWT
• Food Browsing & Search
• Cart Management with Local Storage
• Order Placement & Payment (PayPal Integration)
• Map Integration and order placing with Real-Time location
• Profile & Order History Management

🛠 Tech Stack

• Frontend: React, React Router, Axios, CSS Modules
• Backend: Node.js, Express, MongoDB, Mongoose
• Authentication: JSON Web Token (JWT)
• Payment Integration: PayPal
• Deployment: Render

🔧 Installation

1. Clone the Repository

   git clone https://github.com/Manu040405/foodminereact.git
   cd food-ordering-app

2. Install Dependencies

   cd frontend
   npm install
   cd ../backend
   npm install

🌍 Environment Variables

Create a .env file in the backend directory:

MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_secret_key
PAYPAL_CLIENT_ID=your_paypal_client_id

▶ Run the Application

1. Run Backend

   cd backend
   npm run dev

2. Run Frontend

   cd frontend
   npm start

3. Open in Browser

   http://localhost:3000
   

📁 Project Structure

1. Setup & Installation

• Install NodeJs
• Install Visual Studio Code
• Install Git

2. Creating React App

• Create React App
• Remove Unnecessary Codes

3. Building Header Component

• Add Header.js
• Use Header in App.js
• Install react-router-dom in frontend
• Add header.module.css
• Use BrowserRouter inside index.js
• Update Header.js
• Update header.module.css

4. Adding Food Thumbnails

• Add HomePage component
• Add AppRoutes component
• Use AppRoutes in App.js
• Add data.js
• Add food Images
• Add foodService.js
• Update HomePage.js with reducer, food loading and thumbnails

5. Adding Search Functionality

• Add Search Route to AppRoutes.js
• Add Search function to foodService.js
• Use Search Inside HomePage.js
• Add Search Component with CSS

6. Adding Tags Bar

• Add sample_tags to data.js
• Add getAllTags function to foodService.js
• Add Tags Component with CSS
• Add Tag route to AppRoutes.js
• Add getAllByTag function to foodService.js

7. Food Page

• Create FoodPage Component
• Add route to AppRoutes.js
• Add getById function to foodService.js
• Update FoodPage Component with template and styling

8. Cart Page

• Create Cart Page Component with CSS
• Add cart route to the Routes
• Create useCart Hook with CartProvider
• Implement cart functionality (add/remove/change quantity)
• Save cart to LocalStorage

9. Not Found Page

• Create NotFound Component with CSS
• Add Not Found to HomePage, FoodPage, and CartPage
• Fix Search Issue

10. Connect To Backend

• Create backend folder and initialize NPM project
• Set up Express server with Cors
• Create Food Router with APIs
• Connect frontend food service to backend APIs

11. Login Page

• Create User Router with JWT authentication
• Create user service for frontend
• Create useAuth hook for authentication state
• Create LoginPage component with custom form elements

12. Connecting MongoDB

• Install MongoDB and set up connection
• Create User and Food Models
• Implement database config with seeding
• Update routers to use MongoDB models

13. Register Page

• Add Register Page Component
• Add register API to user router
• Implement register functionality in frontend

14. Loading Component

• Create useLoading hook with provider
• Create Loading component with animation
• Implement loading interceptor

15. Checkout Page

• Create Checkout Page component with order items list
• Implement Maps Component with leaflet
• Create Order router with authentication
• Connect frontend to backend order service

16. Payment Page

• Create PaymentPage component
• Update Order Router with payment APIs
• Implement PayPal integration

17. Order Track Page

• Create Order Track Page with status visualization
• Implement DateTime Component
• Set up map with delivery tracking
• Add order tracking API

18. Profile Page

• Create ProfilePage Component
• Implement profile update functionality
• Create password change component
• Add profile APIs to user router

19. Orders Page

• Create Orders Page with order history
• Update Order Service with listing functions
• Add order history APIs

📸 Screenshots

Home Page

Food Details Page

Search Results

Shopping Cart

Payment Page

Order Tracking

User Profile

Order History

Login Page

Register Page