AB Store - CS50 Final Project

Video Demo: https://youtu.be/bt_roR77Dts ;

Welcome to AB Store, an online men's clothing shop developed as my final project for Harvard's CS50 course.

This project demonstrates core web development skills including Flask-based backend logic, secure user authentication, and front-end design with responsive interfaces. AB Store lets users browse products by category, register and log in, and manage their cart.

---

🚀 Features

• 🔐 User Registration & Login – secure authentication with hashed password storage
• 🛒 Shopping Cart – users can add, remove, and modify product quantities before checking out
• 🧥 Product Browsing by Category – shop by clothing type (shirts, pants, jackets, etc.)
• 📋 Product Detail View – displays item name, description, price, size, and image
• 📱 Mobile-Responsive Design – thanks to Bootstrap styling

---

🛠️ Tech Stack

• Frontend: HTML5, CSS3, Bootstrap 5, Jinja2
• Backend: Python 3, Flask
• Database: SQLite

---

📁 Project Structure and File Roles

ab-store/
├── app.py                # Main Flask application, defines routes, user sessions, shopping cart logic
├── helpers.py            # Utility functions (e.g.,  error handlers)
├── templates/            # All HTML templates (using Jinja2)
│   ├── layout.html       # Base layout used across all pages
│   ├── index.html        # Homepage showing all products
│   ├── login.html        # Login form
│   ├── register.html     # Registration form
│   ├── cart.html         # User shopping cart
│   ├── about.html        # About the store/project
│   ├── apology.html      # Error template shown for exceptions
├── static/               # CSS, JS, and images
├── requirements.txt      # Python dependencies
└── README.md             # Project documentation

Each of these templates is dynamically rendered using Jinja2 to reflect real-time content changes (e.g., user sessions, cart items).

---

🧰 Installation & Setup

Requirements:

• Python 3.x
• pip (Python package manager)

Setup Instructions:

git clone https://github.com/Ab1948/ab-store.git
cd ab-store
python3 -m venv venv
source venv/bin/activate  # Or use venv\Scripts\activate on Windows
pip install -r requirements.txt
flask run

Then open your browser and visit http://127.0.0.1:5000/

---

🎨 Design Decisions

• Flask Framework: Chosen for its simplicity, flexibility, and compatibility with CS50's teachings.
• Session-based Cart: Cart items are stored in session variables for a lightweight, temporary experience.
• Hashed Passwords: Security best practices followed using Werkzeug’s hashing.
• Separation of Concerns: Templates for views, helpers for logic, and clear file structure improves readability.
• Categories: Filtering by product type enhances usability, especially for growing inventory.

Challenges included managing state across different sessions, ensuring cart persistence until checkout, and integrating form validation cleanly within the Flask routing system.

---

📬 Contact

Abdellahi Bowbe
📧 [email protected]
🔗 LinkedIn | GitHub

---

Thank you for checking out my CS50 project! I'm proud to have developed this web application from scratch and demonstrated key concepts from one of the most rigorous introductory computer science courses. 🎓