Demo credentials (all with password Password1234$):
| Username | Role |
admin |
Administrator (full access) |
manager |
Manager (reporting and management) |
worker |
Staff (day-to-day operations) |
The Table Talk frontend is built with React and TypeScript, providing a responsive and intuitive user interface for bar and restaurant management. The application features real-time updates through WebSockets, interactive table layouts, and comprehensive order management capabilities.
- Table Management: Visualize and edit table layouts with an interactive map.
- Order Management: Create, update, split, and merge orders effortlessly.
- Menu Management: Organize menus and categories, including allergen information.
- Product Management: Add, edit, and manage product details.
- Theme System: Switch between themes for better usability.
- Real-Time Notifications: Stay updated with kitchen orders using WebSockets.
- Frontend: React with TypeScript
- Styling: TailwindCSS
- Animations: Motion / React
- State Management: Context API
- Backend: REST API (not included in this repository)
- WebSockets: StompJS for real-time communication
- Build Tool: Vite
- Clone the repository:
git clone https://github.com/goromigue/tt-react.git
cd tt-react- Install dependencies:
npm install
- Configure environment variables in a .env file:
VITE_API_URL=your-api-url
VITE_WS_URL=your-ws-url
VITE_PAYPAL_ID=your-paypal-id
VITE_CLOUDINARY_NAME=your-cloudinary-name
VITE_CLOUDINARY_PRESENT=your-cloudinary-present
-
Set up credentials:
-
Cloudinary:
- Create an account at Cloudinary.
- Go to your account dashboard.
- Copy your account name (Account Name) and set it as
VITE_CLOUDINARY_NAME. - In the Media Library settings, create an "Upload Preset" and set it as
VITE_CLOUDINARY_PRESENT.
-
PayPal:
- Create an account at PayPal Developer.
- Log in to the PayPal Developer Dashboard and create a new application.
- Copy the "Client ID" of your application and set it as
VITE_PAYPAL_ID.
-
-
Start the development server:
npm run dev
- Open the application in your browser at http://localhost:5173.
npm run dev # Starts the development server.npm run build # Builds the project for production.npm run lint # Runs ESLint to analyze the code. .
├── public/ # Public assets (images, icons, etc.)
├── src/ # Source code
│ ├── api/ # API services
│ ├── components/ # Reusable components
│ ├── context/ # React contexts
│ ├── hooks/ # Custom hooks
│ ├── pages/ # Main pages
│ ├── types.ts # TypeScript type definitions
│ └── main.tsx # Main entry point
├── .env # Environment variables
├── package.json # Dependencies and scripts
├── vite.config.ts # Vite configuration
├── LICENSE.md # Project license
└── README.md # Project documentation
This project is licensed under the MIT License.
The frontend application follows a modular architecture with the following key components:
- Atomic Design Pattern: Components are organized following atomic design principles (atoms, molecules, organisms, templates, pages)
- Container/Presenter Pattern: Separation of data fetching logic from presentation components
- React Context API: Used for global state management (auth, theme, etc.)
- Local Component State: For component-specific state
- API Service Layer: Centralized API communication
- React Router: Manages application navigation and protected routes
- StompJS: For real-time communication with the backend
- Message Handlers: Process incoming WebSocket messages
This project is licensed under the MIT License - see the LICENSE file for details.