kelvinvuong98/kv-coffee-shop repository overview

This is one of my full-stack projects focusing mainly on the basic backend logics on database and how data flows in between Frontend and Backend through HTTP Requests with well-known framework Python FastAPI and front-end with just plain Javascript, HTML and CSS. So I just made it simple and lightweight as it should be.

The website has been built from scratch, each template was even written from plain HTML. Recently, I have added more features so that the database is now more dymanic. Still, it is not a real data at all.

With least support from frameworks and UI/UX tools like Tailwind, the website may look not so impressive, but I tried my best though.

Some important Features of the Projects:

+ Every data in this project is now taken from database. This Project ties on using Postgres.

+ Online Payment was also added to the website, I do not afford to use any of real Payment's Services as this is a personal project, so I just make some mock-scripts, I will explain more about it afterwards.

+ This backend now has log in system, user's password is encrypted using Hash Algorithms, howver, there is no Authentication System having been implemented in this project. You can configure it if you want.

+ Backend can monitor and manipulate users activities and orders on the terminal.

+ Users can now create an account to log in the website. Address Confirmation is required for every new order made.

* Initially, this project was primarily built for my personal use cases and experimentation, and now I am more than happy to make it available and open for anyone who may enjoy my source and find it useful.

* Feel free to fork or continue build it by yourself. Happy Coding!

You can either clone my repo (Recommended) and download my source code on Github:

• 1/ git clone https://github.com/kelvin0398/f-b-coffee-shop
• 2/ cd f-b-coffee-shop (the Project's folder)
• 3/ docker compose pull
• 4/ docker compose up

Or install my image separately from Docker:

+ docker pull kelvinvuong98/kv-coffee-shop:1.0.0-slim

You can decide whether to use the database on your own or use mine (Recommended), for those using Docker Compose, database will be automatically added, Note: Do not worry, the data do not belong to any real person.

For those have to manually install and use my database, simply import my db (single db):

+ psql -h YOUR_HOST -p YOUR_PORT -U YOUR_USER_NAME YOUR_DATABASE < my_db.sql

For more secure, Database configuration can be changed in db_config.INI file, you can put your configuration in JSON if you want, or just simply parsing it directly in your db.py script (friendly beginner but not recommended).

Some external libs are required for Backend, you do not have any external libs for the Frontend at all

• Psycopg2
• Uvicorn
• Pandas
• ConfigParser
• Pydantic

⁠ Setting up and be ready to move on

Starting the Backend Server by using Uvicorn Lib from Py: navigate to your cwd and run py -m uvicorn --reload server:app (you can see the help list with py -m uvicorn --help).

By default the server will be running on your http://127.0.0.1:8000, still, you can customize it by your own.

⁠ User Accounts

Whether a user attempts to sign in or register for a new account, the system would automatically sanitize and check for the validation of the input. Specifically, it can check if an email already exists in the database, no duplicate is allowed as email would be used as USER_NAME.

All users' basic info can be found in client_info table, while user's account data such as password (hashed) is stored in client_security_data, you can change any user's password in this WebApp if you like.

All users' basic info can be found in client_info table, while user's account data such as password (hashed) is stored in client_security_data, you can change any user's password in this WebApp if you like.

For Quick Access, you can try log in the system with this user:

• UserName: [email protected]
• Password: 123456@Kv

⁠

⁠ About Page

Users can learn more about the business and story on the Home Page

⁠ Products Page

At Products Page, users can select item by clicking on the icons or the "Add to Cart" button, item will be added by 1 after every click. Please check the quantity on the Cart Icon on the top right of the body.

Once users are done for his items selection, It is the time to move on the Order Page, by clicking on the Cart Button.

⁠ Order Page

Users will be given the Order ID and a limit of time to complete their order of all items added to the Cart. (Default time setting: 5 minutes). You can change it in the FrontEnd JS script.

⁠ Payment Page

This is the last stage to finish the order at this page.

There would be two cases:

• That user is an absolute new Client.
• He or she already has an account

This diagram may give you a better view

For the first case, he will have to fill out the data (both Personal and Payment one) so as to create an account, data then would be sent to the Backend in the client_info table as a NO_ACC_TYPE user (of course, that user won't have a password).

*** He or she can provide a new password by choosing "Forgot Password" option later on.

For the other, as he has already signed in and you got his data, he only needs to confirm his current address by manually typing in.

⁠ Payment Functions

No Real Payment is acceptable in this transaction neither do we add any Payment Service to this project, all you need to do is using unreal data. Read the instruction.

This is my personal project built for learning and experimentation only.

Feel free to explore, fork, and use it.

Happy coding

⁠For more Info

Please check out my Github Page. Link will be available soon.