Restaurant Reservation

Restaurant Reservation is an operational project, which works like any other restaurants website where users can view the menu, create an account and make reservation. The version I created, also enables other actors within the field of restaurant to use the application as well.

This project operates the same as any website that allows their customers to create an account and make reservations online. The sign up procedure does not require any personal or banking information from the customer.

JavaScript/React/MUI and Python are used for the front-end and the back-end code development. For handling communication between front-end and back-end I used Flask and Axios.  For storing data, I have used MySQL Database. You can view the source codes in repository here!

On the Home Page users can read about the restaurant, and the top navigation bar allows users to change pages accordingly.

Main home-page, which works like carousel and consist of 3 different page contents.

They can view the menu and the available options on the menu, and if they happen
to like it, they can go to make a reservation page. 

Menu page, which is consist of menu and available items.

On the reservation page, users can fill out the form to submit making a reservation or if they have an account they can simply login to their account and make a reservation.

Reservation page, which allows visitors to make reservation or user to login and make reservation.

Users can also sign up or login to their accounts, from the top navigation bar.

Login page, which allows preexisting users to login.

Sign Up page, which allows new users to create an account.

My accomplishments in this project were learning:
  • Sass Library and incorporated into CSS styling
  • Developing a project with WebPack
  • Building with WebPack
  • Creating documentation for the overall goal of the project 
  • Creating use-case and scenarios
  • Develop and run unit tests in Python 
  • Working with PyCharm


The application is designed to be used by Customers, Admin, Waiter and the Cashier of the restaurant. So, based on who has been logged in (roles will be checked upon login) the page will render accordingly and actors can use their unique features available to them.


If the user is Customer, they have the options to sign up when visiting the website. After logging in, they have the options to:

  • View Menu
  • Make Reservations
  • View all of their reservations
  • Edit their profile information if they wish to

Menu options, available to customers page after logging in.

Edit profile page, allows user to change their info.

Make reservation page, allows users to make reservation after logging in.

Menu page, allows user to still brows menu after logging in.

If the user is Admin, they don't have the option to sign up on the main home page, they have preexisting account since they have created the application!
After logging in, Admin has options to:
  • Add restaurant staff
  • Edit menu
  • Change menu item content, price
  • Add or delete menu items
Menu options, available to Admin page after logging in.

Edit menu page, which allows to admin to add new menu items, or click on table and edit them.

Edit menu page, after selecting a table row, the corresponding data for that row will be displayed and ready for edit.

Add staff page, allows Admin to create an account for staff and generate password which can be changed.

If the user is Waiter, they also don't have the option to sign up on the main home page. The Admin, creates an account for each and every staff that is necessary and they will receive email with a temporary password to login and later they can change it. After logging in, Waiter has options to:
  • View all reservations
  • Edit reservations
  • View menu and make order for customers based on the reservation id
  • Edit their account

Menu options, available to Waiters page after logging in.

All reservations page, which allows waiter to brows all of the current reservations and select for edit.

All reservations page, after selecting one reservation, a dialog will open and it can be edited.

Make reservation page, which allows the waiter to make reservations for customers with more info.

Make order page, which allows waiter to enter the reservation ID and make order for the corresponding reservation.

Edit profile page, allows Waiter to change their profile information.

If the user is Waiter, they also don't have the option to sign up on the main home page. The Admin, creates an account for each and every staff that is necessary and they will receive email with a temporary password to login and later they can change it.After logging in, Cashier has options to:
  • Check the total amount for each reservation 
  • Edit their account