Restaurant Management System

A React-based web application for managing restaurant operations, translated from a Java/JavaFX application.

Project Structure

project3_group9/
├── src/
│   ├── client/              # Frontend (React + Vite)
│   │   ├── components/      # Reusable UI components
│   │   ├── pages/           # Route-based page components
│   │   ├── utils/           # Client-side utilities (API, types)
│   │   ├── App.tsx          # Main app component with routing
│   │   └── main.tsx         # Entry point
│   │
│   └── server/              # Backend (Express + Node.js)
│       ├── routes/          # API route definitions
│       │   ├── employees.ts # Employee & login routes
│       │   ├── menu.ts      # Menu routes
│       │   ├── inventory.ts # Inventory routes
│       │   ├── orders.ts    # Order routes
│       │   ├── customers.ts # Customer routes
│       │   └── reports.ts   # Report routes
│       ├── db.ts            # Centralized Prisma Client
│       └── index.ts         # Server entry point
│
├── prisma/                  # Database (Prisma ORM)
│   └── schema.prisma        # Database schema
│
├── .env                     # Environment variables
├── package.json             # Dependencies and scripts
├── vite.config.ts           # Vite configuration
└── test-db-connection.js    # Database connection test script

Setup Steps

1. Install Dependencies

npm install

2. Configure Environment Variables

Edit .env file:

DATABASE_URL="postgresql://username:password@csce-315-db.engr.tamu.edu:5432/group_x_db?schema=public"
PORT=3001

Optional API Configuration:

• Leave VITE_API_URL empty to use Vite proxy (default)
• Set VITE_API_URL="http://localhost:3001/api" for custom API URL

3. Set Up Databases

Option A: Test and Create Employees (Recommended)

npm run test:db

This will:

• Test database connection
• Check Employee table
• Create test employees if table is empty
• Display login credentials

Option B: Use Prisma DB Push

npx prisma db push --accept-data-loss

⚠️ Warning: This may modify existing tables.

Option C: Manual SQL (for adding image_url to menu table) If you need to add the image_url column manually, run:

ALTER TABLE menu ADD COLUMN IF NOT EXISTS image_url VARCHAR;

4. Generate Prisma Client

npm run prisma:generate

5. Start the Server

npm run server

The server should start on http://localhost:3001. You should see:

✅ Database connected successfully
✅ Employee table accessible (X employees found)
Server is running on http://localhost:3001

6. Start the Frontend

In a new terminal:

npm run dev

The app will open at http://localhost:3000

7. Login

Note: All authentication is validated against the PostgreSQL database.

Available Scripts

• npm run dev - Start React development server
• npm run server - Start backend server
• npm run server:dev - Generate Prisma Client and start server
• npm run test:db - Test database connection and create test employees (Deprecated)
• npm run test:login - Test login endpoint
• npm run prisma:generate - Generate Prisma Client
• npm run prisma:studio - Open Prisma Studio (database GUI)
• npm run build - Build for production
• npm run lint - Run ESLint

API Endpoints

Employees

• POST /api/employees/login - Login
• GET /api/employees - Get all employees
• GET /api/employees/:id - Get employee by ID
• POST /api/employees - Create employee
• PUT /api/employees/:id - Update employee
• DELETE /api/employees/:id - Delete employee

Menu

• GET /api/menu - Get all menu items
• GET /api/menu/:id - Get menu item by ID
• POST /api/menu - Create menu item
• PUT /api/menu/:id - Update menu item
• DELETE /api/menu/:id - Delete menu item

Inventory

• GET /api/inventory - Get all inventory items
• GET /api/inventory/:id - Get inventory item by ID
• POST /api/inventory - Create inventory item
• PUT /api/inventory/:id - Update inventory item
• DELETE /api/inventory/:id - Delete inventory item

Orders

• GET /api/orders - Get all orders
• GET /api/orders/:id - Get order by ID
• POST /api/orders - Create order

Customers

• GET /api/customers - Get all customers
• GET /api/customers/:id - Get customer by ID
• POST /api/customers - Create customer
• PUT /api/customers/:id - Update customer
• DELETE /api/customers/:id - Delete customer

Reports

• GET /api/reports/sales - Sales report
• GET /api/reports/x-report - X-Report
• GET /api/reports/z-report - Z-Report
• GET /api/reports/restock - Restock report

Troubleshooting

Database Connection Issues

Error: "Database connection failed"

• Check DATABASE_URL in .env file
• Verify database server is accessible
• Run npm run test:db to test connection

Prisma Client Issues

Error: "@prisma/client did not initialize yet"

• Run npm run prisma:generate

Server Not Starting

Error: "Cannot connect to server"

• Ensure server is running: npm run server
• Check port 3001 is not in use
• Verify Prisma Client is generated

Login Issues

Error: "Employee not found" or "Invalid password"

• Verify credentials match database
• Check server logs for errors

Technologies Used

• Frontend: React, TypeScript, Vite, React Router DOM
• Backend: Node.js, Express, TypeScript
• Database: PostgreSQL, Prisma ORM
• Development: ESLint, TypeScript

Security Notes

⚠️ Current Implementation:

• Passwords are stored in plain text (in .env)
• No password hashing or encryption

TODOS

• Accessibility Changes
• UI updates
• Resolving any unnoticed bugs
• Documentation
• Written Materials