Tomato

A production-style food ordering platform built with the MERN stack.

Tomato allows customers to browse menus, manage carts, place orders through Stripe Checkout, and track order history, while providing administrators with tools for inventory and order management.

Tech Stack: React • Node.js • Express • MongoDB • Stripe • Docker

---

Demo

Features

Customer Application

• User registration and login with JWT authentication
• Browse food items by category
• Add and remove items from the cart
• Persistent cart synchronization with the backend
• Secure Stripe Checkout integration
• Order history and payment tracking
• Responsive design for desktop and mobile

Admin Panel

• Add food items with image uploads
• Manage menu inventory
• Remove food items
• View customer orders
• Update order status

---

Architecture

Tomato consists of three independent applications:

• Frontend – Customer-facing React application
• Admin Panel – Administrative dashboard for inventory and order management
• Backend API – Express.js server exposing REST endpoints

Both frontend applications communicate with a centralized backend API.

Key Architectural Decisions

• JWT-based authentication with protected middleware
• Optimistic cart updates with backend synchronization
• Stripe Checkout payment workflow
• Multer-powered image upload pipeline
• Dockerized MongoDB development environment
• Modular backend structure using controllers, routes, models, and middleware

---

What I Learned

This project helped me gain practical experience with:

• Building RESTful APIs using Express and MongoDB
• Implementing authentication and authorization workflows
• Integrating Stripe Checkout payments
• Managing application state with React Context API
• Handling file uploads and static asset serving
• Working with Docker for local development
• Structuring maintainable full-stack applications

---

Tech Stack

Frontend

Layer	Technology
Framework	React 19
Build Tool	Vite 7
Routing	React Router DOM v7
State Management	React Context API
HTTP Client	Axios
Styling	CSS
Notifications	React Toastify
Linting	ESLint 9

Backend

Layer	Technology
Runtime	Node.js
Framework	Express.js 5
Database	MongoDB
ODM	Mongoose
Authentication	JWT
Password Hashing	bcrypt
File Uploads	Multer
Payments	Stripe
Validation	validator
Environment Variables	dotenv
Development Server	nodemon

---

Project Structure

Tomato/
├── backend/
│   ├── src/
│   │   ├── config/
│   │   ├── controllers/
│   │   ├── middlewares/
│   │   ├── models/
│   │   ├── routes/
│   │   ├── app.js
│   │   └── server.js
│   └── uploads/
│
├── frontend/
│   └── src/
│
├── admin/
│   └── src/
│
├── AGENTS.md
└── README.md

---

API Reference

Food API

Method	Endpoint
GET	/api/food/list
POST	/api/food/add
POST	/api/food/remove

User API

Method	Endpoint
POST	/api/user/register
POST	/api/user/login

Cart API

Method	Endpoint
POST	/api/cart/add
POST	/api/cart/remove
POST	/api/cart/get

Order API

Method	Endpoint
POST	/api/order/place
POST	/api/order/verify
POST	/api/order/userorders

---

Getting Started

Prerequisites

• Node.js 18+
• npm
• Docker or MongoDB
• Stripe test account

Clone Repository

git clone <repository-url>
cd Tomato

Install Dependencies

# Backend
cd backend && npm install

# Frontend
cd ../frontend && npm install

# Admin Panel
cd ../admin && npm install

Start MongoDB

cd backend
docker compose up -d

Environment Variables

Create a .env file inside backend/.

PORT=4000
NODE_ENV=development
MONGO_URI=mongodb://localhost:27017/tomato
JWT_SECRET=your_jwt_secret
STRIPE_SECRET_KEY=sk_test_your_secret_key

Run the Applications

Backend:

cd backend
npm run dev

Frontend:

cd frontend
npm run dev

Admin Panel:

cd admin
npm run dev

Default Development Ports

Service	Port
Backend API	4000
Frontend	5173
Admin Panel	5173 / 5174

---

Development Notes

• Backend uses CommonJS (require/module.exports)
• Frontend and Admin use ESM (import/export)
• MongoDB runs through Docker Compose
• Uploaded images are stored in backend/uploads
• JWT tokens are stored in localStorage and sent through request headers
• Cart state is synchronized with MongoDB using optimistic UI updates

---

Roadmap

• Deploy frontend and backend to production
• Migrate backend to TypeScript
• Migrate frontend to TypeScript
• Implement role-based access control
• Add real-time order status updates
• Add unit and integration testing
• Introduce multi-currency support

---

Feel free to open an issue or contribute to the project.