Stickaroo - CPSC 471 Project

Overview

Stickaroo is an online marketplace where customers can purchase stickers from independent artists. The platform connects buyers and sellers through a user-friendly, intuitive shopping and selling experience. Customers can browse products, add items to their shopping cart, view their order information, and track their orders. Sellers can upload their products, manage product inventory, fulfill orders, and manage their own ‘store’ within the platform. The web app supports multiple sellers, shopping carts, orders from different sellers, and integrated in-app payments.

Our team is developing a database to manage the behind-the-scenes operations of the Stickaroo marketplace. This includes storing customer accounts, seller profiles, product listings, carts, orders, and payment information. Our vision is to integrate this database into a seamless Python-based backend and TypeScript web application where artists can showcase their designs and customers can easily browse and purchase products.

---

Navigating the Project Directory

• All documentation, including final UI mockups, ERD, EERD, relational schema, team contract, approach to normalization, and references are listed in the root directory
• The backend directory contains all of our Flask/Python backend code and scripts
• The frontend directory contains all of our code for our UI using TypeScript, TailwindCSS, and Next.js
• The initDatabase directory is used by the Docker container for initialization

---

This project uses a Docker container. Although not mandatory, it is highly recommended to make your development process smoother and easier!

Start by cloning the Repository with SSH or HTTPS

SSH

git clone git@csgit.ucalgary.ca:fiona.truong/cpsc471-project.git
cd cpsc471-project

HTTPS

git clone https://csgit.ucalgary.ca/fiona.truong/cpsc471-project.git
cd cpsc471-project

Instructions with Docker

• Install Docker Desktop

1. Storing your secrets

• In the root directory, where the docker-compose.yml is, create a .env file
• Inside it, paste in the values from the .env.example file
• You can customize the values for the DB_USER, DB_PASSWORD, and DB_ROOT_PASSWORD
• These values will be used when using the mariadb shell!

2. Running the Docker container

• Run the following in bash terminal:

docker compose up --build

• Alternatively, right click on the docker-compose.yml file and press "compose up"

3. Verify Container Status

docker ps

• There should be three Docker images with the respective container names:
  1. cpsc471-project-frontend -> react-frontend
  2. cpsc471-project-backend -> flask-backend
  3. mariadb:11 -> cpsc471-project-db-1

4. Accessing the React frontend and Flask API

• React frontend: http://localhost:3000
• Flask backend: http://localhost:5001

5. Running the MariaDB Image Container

• docker exec -it cpsc471-project-db-1 mariadb -u myuser -p
• Replace myuser with your own username and enter in your password that you previously defined in the.env file

5.1. Viewing Databases/Tables

• SHOW DATABASES;
• SHOW TABLES;
• DESCRIBE <table_name>;

5.2 Switching to use a database

• USE <database_name>

6. Useful Docker commands

• To rebuild after backend changes and update the Docker images, run the following in bash terminal:

docker compose down
docker compose up

• Alternative 1: Instead of restarting the entire Docker container, you can run docker compose restart backend to rebuild backend changes!

• Alternative 2: Right click on the docker-compose.yml file and press compose down, followed by compose up

• If there was a change made to the dump file, or you want to wipe your local database, use the following commands:

docker compose down -v
docker compose up --build

Instructions to use without Docker

Requirements

• Python or Python3
• Install Node.js
  • It is recommended to use v20 or higher. Check your version using node -v.
• yarn
  • Installing yarn:

   npm install --global yarn

Backend Setup Instructions

1. Create a Virtual Environment

python3 -m venv venv

2. Activate Virtual Environment

Windows

venv\Scripts\activate

Mac

source venv/bin/activate

4. Install Dependencies

pip install flask

3. Run the App

python app.py

OR

python3 app.py

Frontend Setup Instructions

1. Install all project packages

yarn install

2. Start the server

yarn start