Restaurant POS Web Application

This is a simple but realistic Restaurant POS (Point of Sale) web application with:

• Backend: Node.js, Express.js, MongoDB, Mongoose, JWT auth, bcrypt, CORS
• Frontend: React.js, React Router, Axios, Context API

The app provides:

• User registration and login
• POS-style dashboard with live order stats
• Orders page with list, details, status and payment updates
• Order creation form with JSON orderDetails

---

Project Structure

• backend/ – REST API (Node/Express/MongoDB)
• frontend/ – React single-page application

Backend structure:

• src/config/db.js – MongoDB connection
• src/models/User.js – User schema
• src/models/Order.js – Order schema
• src/controllers/auth.controller.js – Register/login logic
• src/controllers/order.controller.js – CRUD for orders
• src/routes/auth.routes.js – /api/auth/* routes
• src/routes/order.routes.js – /api/orders/* routes (protected)
• src/middleware/auth.middleware.js – JWT validation
• src/app.js – Express app, middlewares, routes
• src/server.js – Entry point

Frontend structure:

• src/context/AuthContext.js – Auth state & API integration
• src/services/api.js – Axios instance
• src/hooks/useAuth.js – Auth hook
• src/components/Layout/* – Sidebar, Topbar, main layout
• src/components/Auth/* – Login/Register forms
• src/components/Dashboard/* – Stats cards, recent orders
• src/components/Orders/* – Order form, list, details
• src/pages/* – Page-level components (Login, Register, Dashboard, Orders)

---

Environment Variables

Backend (backend/.env)

Create a .env file in backend/ with:

PORT=5000
MONGODB_URI=mongodb://localhost:27017/restaurant_pos
JWT_SECRET=your_super_secret_jwt_key_change_this_in_production
CORS_ORIGIN=http://localhost:3000

Frontend (frontend/.env)

Create a .env file in frontend/ with:

REACT_APP_API_URL=http://localhost:5000/api

---

Installation & Setup

1. Backend

cd backend
npm install
npm run dev    # or: npm start

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

MongoDB must be running locally (or update MONGODB_URI accordingly).

2. Frontend

cd frontend
npm install
npm start

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

---

Usage Flow

1. Register a user at /register (first user can be ADMIN or STAFF).
2. Login at /login to obtain a JWT (handled automatically by the frontend).
3. After login you are redirected to the Dashboard:
   • See stats: Total Orders Today, Pending Orders, Completed Orders, Total Revenue.
   • See recent orders in a table.
4. Go to Orders:
   • Left: list of all orders with badges for status and payment.
   • Top-right: create new orders via the Order form.
   • Bottom: see full JSON orderDetails and update order/payment status.
5. All orders are stored in MongoDB and immediately reflected on the dashboard and orders list.

---

API Overview

Base URL (backend): http://localhost:5000/api

Auth

• POST /auth/register
• POST /auth/login

Orders (JWT required in Authorization: Bearer <token>)

• POST /orders – create a new order
• GET /orders – list all orders (latest first)
• GET /orders/:id – get a single order
• PATCH /orders/:id – update orderStatus and/or paymentStatus

---

Notes

• Passwords are hashed using bcrypt (bcryptjs).
• JWT tokens are signed with JWT_SECRET and used to protect all order routes.
• orderDetails is stored as Mixed in MongoDB so you can send any JSON payload.
• The UI is designed with a dark sidebar and light content to resemble a real POS dashboard.