This project is a React-based frontend web application for a dim sum restaurant ordering and management platform.
It provides a customer-facing experience for browsing menu items, placing orders, managing addresses, and tracking order history, while also including an admin interface for product/category management, order management, and sales analytics.
The application uses JWT-based authentication and role-based route protection to separate customer and admin functionality.
- User login and registration
- Browse menu items and categories
- Search items by name
- Shopping cart management
- Place orders / checkout flow
- View order history and order status
- Manage delivery addresses
- Real-time order notifications (WebSocket)
- Manage items (create, update, delete)
- Manage categories
- View and manage customer orders
- Update order status
- View sales analytics (e.g. total sales, average order value, category sales)
- React 18
- React Router
- Vite
- Axios
- Material UI (MUI)
- JWT (jwt-decode)
- js-cookie
- SockJS + STOMP.js (WebSocket)
- React Toastify
- ESLint
- Cypress (E2E testing)
The frontend follows a component-based structure:
- Pages/ – route-level pages and views
- Components/ – reusable UI components
- APIs/ – API abstraction modules for backend communication
- RequireAuth – route protection and role checks
- JWT tokens are used for authentication
- Tokens are stored in browser cookies
- Protected routes are guarded based on required roles (e.g.
CUSTOMER,ADMIN) - Bearer tokens are attached to API requests
The app includes a WebSocket-based notification mechanism using SockJS + STOMP.
This frontend is designed to work with a backend API (Spring Boot backend in the related backend repository).
Examples of backend modules used:
- Authentication (
/usertokens) - Users (
/users) - Items (
/Item) - Orders (
/orders) - Categories (
/Categories) - Addresses (
/addresses) - Analytics (
/orders/analytics/*) - WebSocket (
/ws/**)
- Node.js
- npm (or yarn/pnpm)
npm install