Video Demo: https://youtu.be/iZsZ3dO_6c4
Booky is an online e-commerce Bookstore web application that I have developed for my CS50 final project. Similar to Amazon and other e-commerce companies, Booky gives you the opportunity of shopping books, especially novels, online and the package should be delivered to the door-step of the user. Since, this is just a simple project not a big tech company, this is a model for the web application that may have been developed. For the front-end development, I have used html,css,jinja and javascript to create a meaningful and attractive user interface. Through Flask framework, I have used python and Sqlite3 for the back-end.
Since I am using Flask framework, you will find the main python program for the back-end named (app.py), and helpers functions python file named(assists.py). You will also find a static folder that contains the main CSS stylesheet for the web app named (styles.css), along with multiple .jpg files that represent the book cover images and one icon for the web app (favicon.ico). Considering the html files, they will all be found within the templates folder. There is one main layout html document (layout.html), which I have used as the main base for all of the other documents using jinja syntax. There are also a requirements.txt file, the main database(project.db), and this .md file.
The assists.py file contains 3 main functions. The first is a login required function to make sure the user is logged in before accessing a certain route. The second is jinja filter for the dollar sign to be added next to the money represented. The last of them is a sorry functions to preview an error page with a sad book image and message if anything goes wrong due to the user's input. The app.py function contains a non permanent session configuration on the secondary storage device, hard disk, and the main code for the web app.
Using Sqlite3, I have created a database with several tables, the first of which is a users database to keep track of the usernames, hashed passwords, and their cash balance. I have created an index on usernames for efficiency. The main table is the books table, where all the books' details are saved including the book title, author, genre, price, a summary, and the image source for the book cover. The cart table is another major table where we save the books the user has chosen to put in his cart before purchasing. The last table is the library table to keep track of all the user's purchases.
I have manually created the logo for the Booky web app using an internet downloaded picture and some graphic design. The navigation bar is styled using the CSS style sheet I created in advance, thus it has a red hoverable effect. There is a main books picture in the middle which I have shadowed, and a button to start shopping that changes its colors once hovered via CSS.
In this web app you may create a new account, login, logout, change password, or even add cash to your account. I have made sure that all of the user's input is always validated to decrease the possibility of any bugs or issues. There are always presence checks for usernames, passwords, cash amount input and all inputs. I have made sure that usernames and passwords are valid and match, and not already in use by another user. Passwords should contain a number and are hashed for extra security. When password changes, the new password can't be as the old one. Sessions are always created for users when login or register. Any money related values are checked to always be above 0.
For the shopping page, I have shown the user his account balance at the top of the page before making any purchases. There is a main search bar at the top for the user to lookup any book wanted. If the needed book isn't available the sorry function will tell the user via an error page. Searching isn't case sensitive, and extra whitespaces are removed. There is a dropdown menu after the search bar for the user to preview books of a certain genre only for efficiency. Then, There are the book card in a table created by jinja and sql queries. The card shows the book cover and all the book related details beneath. There are two buttons one for a preview, and one to add the book to the cart. The cards are designed via bootstrap classes. The book can be previewed on a separate web page with a summary. Books can't be added to cart if they are already in the cart or in the library.
The Cart page consists of a main bootstrap designed table and shows all the books that have been added to the cart. It also shows the user's cash budget before buying anything. It calculates the total price of all the books in the cart, and always makes sure the user has enough money before any money transaction. Once the user clicks the purchase button, we empty the cart and add all the books to the library page. The users cash balance changes with every transaction, and if it is cancelled, the user is a given a refund to his cash balance with the price of the book he cancelled.