Design Documentation - UB-ES-2021-A4/Booksy GitHub Wiki

Booksy's Design Document

Author: María Isabel González

Introduction

Rationale

For everyone interested in books and literary culture, it is well known that it is not cheap to buy brand new books now and then. So, readers usually prefer buying second-handed books or borrowing from the library. However, not always readers can find the books or books they are looking for or if they do, they are in terrible conditions.

Booksy solves these issues: we offer a buy-sell platform for readers to offer second-handed books for a reasonable price.

Background

As a reader myself, buying brand new books is a luxury I cannot afford. One single brand new book costs approximately 18.95€ (taxes included) and some of them even up to 24.95€. However, reading is a pleasure and a treasure, so I tried to search for second-handed buy&sell applications to buy some books. Although there were many general buy&sell platforms, they didn't have many books to offer. Here is where the idea of developing this web starts.

Terminology

On the web, the will be 2 roles per user: the client (who buys items from the web) and the seller (who offers books to be bought). Also, there will be an administrator beside the scene if there is any tech problem.

Proposed Design

The first draft of the web was done in Wizard: https://app.uizard.io/p/fea3f23e However, this design may vary from the final result as it was updated for React JS application's architecture.

System Architecture

The architecture of the FrontEnd is divided into the build folder, the node_modules folder, the public folder and the src folder.

The files directly inside the src folder keep the web running and they use the files inside the directories of the src folder. These directories are classified depending on the task the files inside them perform:

Cart: directory with all the wizard steps for buying products on the web.
HomePage: directory with the main page of the web that redirects to the rest of URLs.
Layout: directory with the Header, NavBar and Footer of the web. These parts will always be displayed.
pictures: directory with all the static pictures of the web's content.
Profile: directory with the profile files and how to edit them.
Start: directory with the files that appear went you are not logged in.
UserAccount: directory with the login and signup pages.

⚠️ **GitHub.com Fallback** ⚠️