- Another eCommerce Site... What's Special?!
- In a Nutshell
- General Architecture
- Technical
- Main User Stories
- Project Management
- Authors
Yes, we agree: there are too many eCommerce sites to begin with. But that's exactly why we decided to just add 1 more to the list...
Decidophobia is a student-led project designed to solve a very specific problem: the dilemma of choice. Here's a list you can contemplate about:
- Amazon
- eBay
- Walmart
- Craigslist
- Etsy
- Kijiji (🍁)
- Facebook Marketplace
- BestBuy
- Your dog
- My Neighbor
- ...
Clearly, the number of eCommerce sites don't seem to end. With so many choices to pick from, a lot of us humans are tempted to start comparing them all. Why? Because we want to buy something knowing we got the best deal ever! And that's fine... because I do it too.
With this context in mind, we present a solution to the flurry of open tabs and the constant back-and-forth in between: one website that can just give me the best deal, every single time.
Decidophobia is mainly an eCommerce aggregator and a product rating system. We use available eCommerce APIs to request, aggregate and display products from different websites. Put in other words, we talk to online shopping sites and ask them for a list of their products. Then, we rank those products based on a variety of common-sense metrics like your individual preferences, price and product reviews.
The architecture diagram represents the software architecture for Decidophobia.com, a web application developed using Django and React with SQLite as the database. The architecture is designed to handle requests efficiently, process data, and deliver responses to the client. Below is an overview of the various components and their interactions within the system:
- Core Models (core_models.py): This file defines the database models, which represent the data structures and their relationships.
- The SQLite database is the primary storage for our application data. It is queried directly by the Django application to fetch or store data.
- URLs (urls.py): This module maps URLs to the corresponding views in the application.
- Views (views.py): Views handle the business logic of the application. They receive web requests, interact with models to retrieve data, and send responses back to the client.
- Django HTTP Framework: This is the core framework that handles HTTP requests and responses. It integrates the URLs and Views, processing incoming requests based on the defined URL patterns and generating outgoing responses.
- API Services (ShopSearch.py): External API services are integrated here, providing additional data or functionalities that complement the core application features.
- Template (HTML): Django templates are used to generate HTML content that is returned to the client as part of web responses.
- The React application serves as the frontend of Decidophobia.com. It handles user interactions, makes API calls to the Django backend, and updates the user interface accordingly.
- RESTful API Calls: The React frontend communicates with the Django backend through RESTful API calls, requesting data and receiving responses in JSON format.
- This is the user's device (e.g., computer, smartphone), which runs the web browser. It sends requests to and receives responses from the React frontend.
- Client Interaction: The user interacts with the React application, triggering an HTTP request to the Django backend.
- URL Routing: Django processes the incoming request, routing it to the appropriate view based on the URL.
- Data Processing: The view may perform database queries through the model, interact with external API services, and process the necessary data.
- Response Generation: The view generates a response, which could be a JSON data packet for API calls or an HTML page rendered using templates.
- Client Update: The React frontend processes the response, updating the UI dynamically based on the received data.
This architecture ensures that the application is modular, with clear separation of concerns among the database, backend, and frontend. It leverages the strengths of Django and React to provide a responsive and dynamic user experience.
Decidophobia currently sits as a web-app with a Django backend and a React (Next.js) frontend. It also uses Docker to ensure universal runnability, and Postgres as its DBMS.
React was used to construct a questionnaire that collected user preferences. This included selections about how important product ratings, brand reputation and quick delivery time were to the user.
To request product information, an HTTP client was architected using the decorator pattern. The client requests and retrieves information (JSON) using OAuth 2.0 protocols while minting authentication tokens automatically.
The product comparison feature uses the JSON returned by the HTTP client to index each product accordingly. By using React, the search result page is created by placing each indexed product into a series of tables. Then, when a user clicks "Compare", the indices of these products is moved onto an array which maps onto the side-by-side product bar at the bottom of the screen.
React was used to design the shopping cart and order history pages. React components from the Material UI components library were utilized to create the frontend pages. For the cart functionality (adding/removing/updating items), axios was used to send requests to the backend.
Each shopping cart item and purchase-history entry is stored with foreign keys to the products and users tables. Moreover, a randomly generated, unique, 10-character alphanumeric ID was used to identify each specific order.
React was used to design the user settings page. It interacts with the Django backend, which uses different serializers to change the various components of a user account, i.e. email and password. User accounts are facilitated using a CustomUser model that is a subclass of Django's AbstractBaseUser.
React was used to create the discussion board, while user messages were stored in a Django backend. Axios requests are used to interact with the Django backend, primarily to retrieve and insert messages to display onto the discussion board.
“There’s always more to build than we have time or resources to build — always.” [name=Jeff Patton]
Questionnaire
Feature: Questionnaire
As a frequent shopper, I want to quickly select
all my individual preferences like budget, favorite
sites, and delivery time.
Scenario: User arrives at the home page
Given I clicked on "SearchFilter",
Then I can toggle my unique preferences
And get results that are curated appropriately.
eCommerce HTTP Client
Feature: eCommerce HTTP Client
As an indecisive shopper, I want to see results
from all the eCommerce sites I request for.
Scenario: User types item name into the search bar
Given I selected my preferred shopping sites,
When I click "search"
Then I will get a list of curated products.
Interactive Comparison
Feature: Interactive Comparison
As a shopper on a budget, I want to interactively
compare the main features of different products.
Scenario: User is directed to the search results
Given I found a suitable product,
When I click "Compare"
Then I can compare products side-by-side.
Shopping Cart
Feature: Shopping Cart
As a casual shopper, I want to put items in my shopping cart
because I want to manage items before I checkout.
Scenario: User adds item to cart
Given I'm a logged-in user
When I go to the item page
And I click "Add item to cart"
Then the quantity of items in my cart should go up
And my subtotal should increment accordingly.
User Accounts
Feature: User Accounts
As an avid shopper, I want to be able to be able to change my
user account information.
Scenario: I want to update my account information
Given I am logged in
When I navigate to the settings page
And I click on the button to change my password, email, etc.
Then the database will be updated with the new information
And the changes will be reflected in the GUI
Community Discussion Board
Feature: Discussion Board
As a shopper with FOMO, I want a place to interact with other
shoppers where I can discuss the best deals and sales in
the website.
Scenario: I want to look for the hottest new deals
Given I am logged in,
When I navigate to the discussion board
Then I find discussions about different, linked products.
Throughout every sprint, Jira was used to manage our product backlog. Our development was mainly split into 3 sprints, along with initial sprint pre-planning sessions.
Each sprint culminated with a product demo, where either the main features or the newest additions were presented. After our last sprint, we decided to complete a video presentation discussing what our product is, and what its market would look like. This video can be watched here.
In terms of our work timeline, as followers of the SCRUM methodology, our iterative work process is roughly graphed below:
gantt
title SCRUM Work Timeline
dateFormat YY-MM-DD
section Sprint 1
Base Features :a1, 2024-01-26, 14d
section Sprint 2
Integrations :2024-02-15 , 14d
section Sprint 3
Bug Fixes & Polish :2024-03-10 , 14d
Decidophobia is a public project lead by a team of 7 individuals.
The members of this team are (listed alphabetically):