Restaurant Management App

This project is a web-based restaurant management system designed to streamline various aspects of restaurant operations, including table management, food ordering, user management, and order processing. The system aims to enhance the overall dining experience for customers and improve operational efficiency for restaurant owners and staff.

Challenges

The main challenge is to implement the functionalities like table management, user management, order management, routing, and Redux State management using React JS and other technologies.

Key Features

1. User Authentication: The application provides user authentication functionality, allowing users to log in, and log out securely. It employs token-based authentication for protecting routes and ensuring secure access to sensitive information.

2. Dashboard: The dashboard provides an overview of various aspects of the business, such as user management, table management, food menu management, and order management. It offers a user-friendly interface for managing these operations efficiently.

3. User Management: The application allows administrators to manage user information, including adding new users, and removing users from the system. This feature facilitates efficient management of staff members.

4. Table Management: It enables administrators to manage restaurant tables, including adding new tables, updating table configurations, and marking tables as occupied or available. This feature helps in optimizing table allocation and improving the dining experience for customers.

5. Food Menu Management: Administrators can manage the food menu, including adding new food items, and removing items from the menu. This functionality enables businesses to keep their menu offerings up-to-date and appealing to customers.

6. Order Management: The application facilitates order management, allowing staff to view and manage incoming orders efficiently. It provides features such as order status updates, and order history to streamline the order fulfillment process.

Used Technologies

1. vite: 5.1.0
2. react: 18.2.0
3. react-redux: 9.1.0
4. reduxjs/toolkit: 2.2.1
5. mui/material: 5.15.10
6. axios: 1.6.7
7. tailwindcss: 3.4.1

Used Utility

1. Primary Color: #cc080b
2. Secondary Color: #79a33d
3. Primary Font: Josefin Sans, sans-serif
4. Secondary Font: Quattrocento, serif;

🔗 Live Site Link

Admin Login Credential

Username: admin@mail.com
Password: Admin@123

Project Setup

Install the App with npm

  npm install

Run the App with npm

  npm run dev

Build the App with npm

  npm run build

Output for Desktop Mode

=> This is the login page. Admin can login using credential.

=> This is User List page. Here admin can see all kinds of information about an user. Admin can update all users information by clicking on edit button. Also, the users information can be deleted by clicking on the delete button.

=> This page is for add a new user. This page will open when admin click on the Add User button of the user list.

=> Here is the validation check for add a new user. So all fields except middle name and image field must be filled.

=> This is Table List page. Here admin can see all kinds of information about table. The tables information can be deleted by clicking on the delete button.

=> This page is for add a new table. This page will open when admin click on the Add Table button of the table list.

=> By clicking on the plus button of the Table List page will open this modal and admin can assign user to a table.

=> By clicking on the cross button on the right side of the user chip, the assigned user from a table will be removed by confirmation of the alert.

=> This is Food List page. Here admin can see all kinds of information about foods. Admin can update all foods information by clicking on edit button. Also, the foods information can be deleted by clicking on the delete button.

=> This page is for add a new food. This page will open when admin click on the Add Food button of the food list.

=> When no table is selected from the table list, the food list will be hidden and show a message "select a table first".

=> After Select a Table user can select the food items and order.

=> This is the cart where user can modify the order items then place the order.

=> This is Order List page. Here admin can see all kinds of information about order. The orders information can be deleted by clicking on the delete button also modify the order status by clicking edit button.

Output for Mobile Mode

=> For mobile responsive, Drawer Menu will be open and close by clicking the hamburger icon.

=> The text will be ellipsis when this page shown in mobile.

=> For mobile responsive, Modal will resized as small. Also the modal contents will shown as column view.

=> For mobile responsive, all the order list will shown as a column view.

=> When user want to change the order status, by clicking the edit button from the Order List page user can change it.

Deployment

For Netlify Deployment Add The _redirects File Into Public Folder And Paste This-

  /*    /index.html   200