About

Coffee Shop App is a web application designed for coffee shop owners and administrators. The app allows them to create, manage, and customize their products with various addons. Administrators can perform CRUD (Create, Read, Update, Delete) operations on these products to ensure the menu is always up-to-date. Customers can browse the product offerings, add items to their cart, and place orders. Once an order is placed, shop owners and admins can track and update the order status, informing customers whether their order is being processed, packaged, delivered, or has already been delivered.

This project is part of my university course. I managed the entire system, including the code, documentation, and the setup and administration of databases and authentication.

Use case diagram

Client use cases

View products - View all products as well as available addons created by admin in menu page
Add to cart - Add the selected product from menu to cart
View cart - View all products added to cart, the client can also edit or delete them
Checkout cart - Place an order, this will create an order
View order - Once the order has been place, user can now see the order and its status

Admin use cases

Create product - Create a product and its available addons
View order - View orders placed by all clients, admin can delete them
Update order status - Updates the status of the order

NOTE: An admin can also be the owner of the shop or vice versa

Web app architecture

Components

User Interface - This is where the buttons, input fields, and other UI components resides
Controller - Handles the state of the UI components such as the text on input fields
View Model - Validates state of the UI components, the component manages different uses cases
Model - Assembles raw data from API source into structured objects that the view model can consume
API - This are endpoints that allow the application to fetch data from different sources such as local or online databases
Data Sources - The local or online databases that the API uses to perform Create, Read, Update and Delete (CRUD) operations

Connector types

Method / API invocation - A function or method call on that component
State change - When new data has change, the controller refreshes the UI to reflect the new state
Callback - Non-blocking architecture is use to allow the execution of multiple IO task without blocking the main thread. Data is passed on different components via callbacks, each components filters and assembles the data into structured information
Data - This are data received as a result of performing queries to a database or API endpoints

Preview

Menu page (View products)

Admin page (Update product)

Admin authentication and user accounts

NOTE: The admin can log in to the system using an email and password while the user can authenticate using Google Sign-In.

Database structure

Coffee shop app uses Firebase Firestore for its database which is a NoSQL document oriented database. Each document is stored inside of a collection and each document contains a set of key-value pairs. Admin can set image or picture of a product by uploading an image file, the image files is stored in Firebase storage.

Products

Products collection -> product document -> key-value pairs

Carts

Users collection -> user document -> carts collection -> cart document -> key-value pairs

Orders

Orders collection -> order document -> key-value pairs

Each documents in the database is secured using security rules that are applied to each document when performing create, read, update or delete.

Run locally using Docker

Kindly check the .docker directory for instructions on how to run locally using Docker

Technologies used

Technologies that I have used to accomplish this project are:

HTML, CSS, TypeScript and React - For dynamic content and design
Tailwind CSS and Material UI - For using pre-built UI components
Firebase - For authentication, database and hosting of web application

johndeweyzxc/Coffee-Shop