SHOPBLOCK 🛍

Frontend | Backend | Demo Video

Table of Contents

1. What is ShopBlock?
   • 1.1 Demo Video
2. Getting Started
   • 2.1 Prerequisites
   • 2.2 Setup Instructions
     • Backend Setup
     • Frontend Setup
   • 2.3 File Structure
   • 2.4 Tech Stack
   • 2.5 Final Report

---

1. What is ShopBlock?

ShopBlock is a platform designed not just for buying and selling, but with a focus on supporting sustainable and affordable access to goods and services through rentals. By enabling users to create, post, browse, and manage listings, ShopBlock aims to provide a solution for low-income families who may struggle with the high cost of one-time purchases. The platform also addresses the issue of clutter in the home by offering a space for users to rent out items that are rarely used, like camping gear or specialty tools, allowing others to borrow rather than buy. With features like filtering listings by categories and price, making offers, and completing transactions, ShopBlock provides a flexible, community-oriented marketplace. The inclusion of reviews and ratings also fosters a trustworthy environment where users can confidently connect with one another.

1.1 Demo Video

Click on the link below to watch a quick 5-minute demo of the ShopBlock website!
Demo Video

---

2. Getting Started

This section provides details on prerequisites, setup instructions for both frontend and backend, and other technical requirements to get ShopBlock running smoothly.

Prerequisites

Before setting up, ensure the following tools are installed:

• Node.js and npm (for the frontend)

• Python 3 and pip (for the backend)

• Virtual Environment setup for Python

• Git for version control

• @paypal/paypal-js (for integrating PayPal payments)

Setup Instructions

The setup process is divided into backend and frontend sections.

---

Backend Setup

1. Create a Virtual Environment If not already set up, create and activate a virtual environment:

python3 -m venv ./swe-env
source ./swe-env/bin/activate
pip3 install -r requirements.txt

2. Install the Database Run migrations to initialize the database:

python3 manage.py migrate

3. Apply Database Changes If you modify models, apply migrations with:

python3 manage.py makemigrations
python3 manage.py migrate

4. Run the Backend Server Start the backend server:

python3 manage.py runserver

5. API Testing with Swagger Access the Swagger UI for testing APIs at http://localhost:8000/api/schema/swagger-ui/ .

6. Run Unit Tests

python -m pytest .

Developer Notes

• models.py : Defines ORM models for the database.

• serializers.py : Handles data formatting for models.

• urls.py : Maps URLs to views.

• views.py : Implements core application logic.

---

Frontend Setup

1. Install Node Modules In the /frontend directory, install dependencies:

npm install

2. Start the Frontend Application

npm start

The application will be accessible at http://localhost:3000 .

---

2.3 File Structure

└───ShopBlock
    ├─── FINAL SUBMISSION (final deliverables)
    ├───backend (backend files, urls.py and settings)
    │   ├───media
    │   └───(files for migrating and connection to API db)
    └───frontend
        └───src
            ├───(favicons, index files)
            └───Pages (frontend components)

2.4 Tech Stack

• Frontend : React, Material UI, CSS

• Backend : Django, Django REST Framework

• Database : SQLite3

• APIs :

  • PayPal for payment processing

  • OneMap (Singapore) for location services

---