Table of Contents

1. Introduction
2. Features
3. Getting Started
4. ORM(Object–relational mapping)
5. Preview and screen shoot
6. Tachnology
7. References

Introduction

This Restaurant Ordering System is a website software application which process from customer side until front-of-house staff to do payment. This apps will improve the efficiency of restaurant taking order from customer. It will help to reduce work load for front-of-hosue staf. Customer side will experience to view menu and place an order, front-of-house staff can place order, view each table order and do payment

Features

• User Authentication = user can create account, log in and track each order follow by table number
• Menu Management = user can go through each F&B items that display out
• Order Management = user can preview and adjust the quantity before place an order and update quantity or cancel order by admin user
• Payment = user can view all the charge by payment adn will generate receipt to show customer.

Getting Started

1. Clone my repository from github.
2. Add individual .env file into backend-express folder and frontend folder
3. frontend .env file should put:
   • VITE_SERVER=http://localhost:[port] (this port should be same as backend-express)
4. backend-epress .env file should put: (This project I'm using PostgreSQL as database)
   • NAME=[same username as your database]
   • PASSWORD=[same password as your database]
   • HOST=localhost
   • DB_PORT=5432
   • DATABASE=restaurant_db
   • PORT=[port]
   • ACCESS_SECRET=[any alphanumeric string as your secret key]
5. inside backend-express having one file call database.sql. It's contain all the SQL script that need to build up database and all the table. inside database.sql file contain the script state at below which use to create first employee in the database. (first employee id will be: SEI 100 INSERT INTO employees (name, password, contact) values ('user1', 'password1', 12345678):
6. based on my SQL Script to create database. The database name is call restaurant_db.

ORM(Object–relational mapping)

This is my ORM for the whole project

SQL

Preview and Screen shot

Sign up page for customer. They need to provide username, contact and password to sign up an account.

Sign in page for customer based on username and password

After login will show food page. Food page will display out the food menu based on category. customer can clik ADD button, it will add into cart. By default it will be quantity = 1

Beverage page will be same as food page. you will notice number contain at shopping cart will be different after ADD buttton had been click.

This one is overlay modal after you click on the item. From this page customer can also order different quantity based on customer prefer.

When click shopping cart will come to this page. By this page customer can view what they have been order. From here you can edit quantity and delete the items based on customer prefer. Fill up table number and pax, after confirm all the order click on Submit button, it will send into system.

Go to path="/admin" will direct to employee page. Login with employee id and password

Greeting usename is a hidden selection for Register Staff. Employee id which display here will be the id for the staff that going to register. This id is importnat need to use it when login

This page is show out all the table number

Click into the table number, employee can help customer to admend order quantity, delete or void order and start to payment process for customer.

Payment review wioll show out all the info of F&B item that order by the customer based on table number. Here will show price, service charge, gst and total amount. It's also provide input cash amount and show out balance.

Once payment complete will display receipt.

Technology

• HTML
• CSS
• Javascript
• React
• PostgreSQL (database)
• Express
• Figma
• https://online.visual-paradigm.com/ (draw component directory for frontend)
• https://drawsql.app/ (draw ORD for backend)

References

• https://stackoverflow.com/questions/36280818/how-to-convert-file-to-base64-in-javascript
• https://blog.knoldus.com/how-to-create-auto-incremented-alphanumeric-id-in-postgres/
• https://stackoverflow.com/questions/910763/how-to-set-a-postgresql-default-value-datestamp-like-yyyymm
• https://dba.stackexchange.com/questions/153017/how-do-i-install-enable-the-uuid-ossp-extension-on-postgres-9-3
• https://www.postgresql.org/docs/9.2/functions-array.html
• https://bobbyhadz.com/blog/css-button-width-fit-text#:~:text=To%20adjust%20a%20button's%20width%20to%20fit%20the%20text%2C%20set,the%20size%20of%20its%20content.
• https://www.postgresqltutorial.com/postgresql-tutorial/postgresql-temporary-table/
• https://stackoverflow.com/questions/65413820/insert-into-table-if-exists-or-else-create-table
• https://www.postgresqltutorial.com/postgresql-tutorial/postgresql-group-by/
• https://www.postgresqltutorial.com/postgresql-aggregate-functions/postgresql-count-function/
• https://stackoverflow.com/questions/51154136/how-to-save-a-calculation-as-a-default-value-in-a-postgresqls-table-column
• https://www.youtube.com/watch?v=FbAQABnEOUE
• https://stackoverflow.com/questions/39229079/check-if-trigger-exists
• https://stackoverflow.com/questions/71397282/prevent-onclick-of-base-element-if-onclick-of-overlay-button-is-clicked
• https://stackoverflow.com/questions/64838587/how-to-properly-use-usehistory-from-react-router-dom
• https://stackoverflow.com/questions/2388115/get-locale-short-date-format-using-javascript