Architecture Overview
Relevant source files
The following files were used as context for generating this wiki page:Becathlon is a monolithic web application built using the Django framework. It is designed as an e-commerce platform inspired by Decathlon, focusing on providing a clean user interface and a seamless browsing experience for sports equipment. The architecture is modular, with distinct functionalities encapsulated within separate Django "apps". This design promotes separation of concerns and allows for scalable development.
The backend is powered by Django, handling business logic, data persistence, and serving both server-rendered pages and a RESTful API for client-side interactions. The frontend uses standard HTML5, CSS3, and vanilla JavaScript, with AJAX (via the Fetch API) employed for dynamic features like real-time product loading, adding, and deleting without full page reloads. The system is designed to be deployed on a PWS (Platform Web Service) environment and supports both SQLite for local development and PostgreSQL for production.
Sources: README.md, IMPLEMENTATION.md, becathlon/settings.py
Core Technologies
The project is built on a foundation of well-established web technologies.
| Technology | Usage | Source |
|---|---|---|
| Django 5.2.5 | Core backend framework for the entire application. | IMPLEMENTATION.md:39 |
| Python | Primary programming language for the backend. | becathlon/settings.py |
| HTML5 / CSS3 | Frontend structure and styling. | apps/main/templates/main/home.html, apps/profiles/static/profiles/css/profiles.css |
| JavaScript (Vanilla) | Client-side interactivity, including AJAX calls using the Fetch API. | IMPLEMENTATION.md:40, apps/main/templates/main/home.html:220-388 |
| SQLite / PostgreSQL | Database backend. SQLite is the default for local development, with support for PostgreSQL in production environments. | becathlon/settings.py:108-142 |
| WhiteNoise | Serves static files efficiently in production. | becathlon/settings.py:84, becathlon/settings.py:162-176 |
Project Structure
The Becathlon project follows a modular structure, where each major feature is implemented as a separate Django app located within the apps/ directory. This approach enhances maintainability and separation of concerns.
Sources: README.md:88-111, IMPLEMENTATION.md:58-76, becathlon/settings.py:18-19
Application Modules
The following diagram illustrates the high-level modular structure of the application.
This diagram shows the main project configuration (becathlon) managing a collection of feature-specific applications.
Sources: becathlon/settings.py:75-86, README.md:88-111
A detailed breakdown of each application's purpose is provided in the table below.
| App Name | Purpose |
|---|---|
main | Handles the homepage, primary navigation, and core static pages. |
authentication | Manages user registration, login, and logout functionalities. |
catalog | Responsible for product listings, categories, and detailed product views. |
search | Implements search functionality with filters. |
cart | Manages the user's shopping cart. |
checkout | Provides a mock checkout process. |
order | Manages order history and mock refunds. |
stores | Implements a store locator feature. |
recommendation | Contains the product recommendation system. |
profiles | Manages user profiles and preferences. |
Sources: README.md:88-111
Installed Applications
The core of the Django project is configured in becathlon/settings.py. The INSTALLED_APPS setting defines which modules are active in the project.
# becathlon/settings.py:73-86
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'apps.main.apps.MainConfig',
'apps.authentication.apps.AuthenticationConfig',
'apps.catalog.apps.CatalogConfig',
'apps.cart.apps.CartConfig',
'apps.profiles.apps.ProfilesConfig',
'apps.stores.apps.StoresConfig',
'apps.recommendation.apps.RecommendationConfig',
'apps.order.apps.OrderConfig',
]
Sources: becathlon/settings.py:73-86
Request Handling and URL Routing
Incoming HTTP requests are first processed by Django's middleware stack and then routed to the appropriate view based on the URL configuration.
Middleware
The MIDDLEWARE setting in becathlon/settings.py defines the chain of middleware that processes every request and response. This includes security, session management, authentication, and static file serving via WhiteNoise.
# becathlon/settings.py:88-97
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
Sources: becathlon/settings.py:88-97
URL Configuration
The main becathlon/urls.py file is the entry point for URL routing. It includes URL patterns from the individual application modules. The README.md and IMPLEMENTATION.md files provide a high-level overview of the URL structure.
The following diagram shows the general request flow from a user to a Django view.
This diagram illustrates how a user request is processed through middleware, routed to a view, which may interact with the database and render a template before the response is sent back.
Sources: becathlon/settings.py:88-97, 99, README.md:65-79
Frontend Architecture
The frontend is built with standard web technologies and follows a template-based approach common in Django projects.
Templating
The project utilizes Django's templating engine. A base template (apps/main/templates/main/base.html) provides the main structure, including the header and navigation, which is then extended by other app-specific base templates (e.g., apps/catalog/templates/catalog/base_catalog.html, apps/stores/templates/stores/base_stores.html) and individual page templates.
This inheritance structure is visualized below:
This diagram shows how specific page templates inherit from app-level base templates, which in turn inherit from a global base template.
Sources: apps/main/templates/main/base.html, apps/catalog/templates/catalog/base_catalog.html, apps/stores/templates/stores/base_stores.html, apps/profiles/templates/profiles/base_profiles.html, apps/catalog/templates/catalog/category.html, apps/profiles/templates/profiles/profile_detail_new.html
Static Files
Static assets like CSS, JavaScript, and images are managed by Django's staticfiles app. In production, WhiteNoise is used to serve these files efficiently. The configuration in becathlon/settings.py specifies the STATIC_URL and STATIC_ROOT.
Sources: becathlon/settings.py:158-185
Client-Side Logic (AJAX)
The application uses vanilla JavaScript to perform AJAX requests for a more dynamic user experience. For example, the homepage loads, adds, and deletes products without a full page refresh.
The sequence diagram below shows the process of adding a new product from the homepage.
This diagram shows the asynchronous flow for adding a product, from user interaction to the UI update, without a page reload.
Sources: IMPLEMENTATION.md:44-47, apps/main/templates/main/home.html:324-353
Database
The application is configured to use two different database backends depending on the environment.
- Local Development: SQLite is used as the default database, which is simple to set up and use.
- Production: The application checks for environment variables (
DB_NAME,DB_USER, etc.) to configure a PostgreSQL database. This is a more robust solution suitable for production deployments.
The conditional database configuration can be found in becathlon/settings.py.
# becathlon/settings.py:112-142
if DB_NAME and DB_USER and DB_PASSWORD and DB_HOST:
# Use PostgreSQL with university-provided credentials
db_config = {
'ENGINE': 'django.db.backends.postgresql',
'NAME': DB_NAME,
'USER': DB_USER,
'PASSWORD': DB_PASSWORD,
'HOST': DB_HOST,
'PORT': DB_PORT or '5432',
# ...
}
# Add schema search path if specified
if DB_SCHEMA:
db_config['OPTIONS'] = {
'options': f'-c search_path={DB_SCHEMA},public'
}
DATABASES = {
'default': db_config
}
else:
# Fallback to SQLite for local development
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
Sources: becathlon/settings.py:112-142
User Roles and Permissions
The system defines three distinct user roles, each with a specific set of permissions that govern their access to application features.
| Role | Description | Key Permissions | Relevant Modules |
|---|---|---|---|
| Guest / Visitor | Unregistered users browsing the site. | View products, search, add to a temporary cart. | main, catalog, search, cart |
| Client / Customer | Registered and logged-in shoppers. | All guest permissions, plus place orders, manage profile, write reviews, and access persistent cart. | authentication, profiles, cart, checkout, orders |
| Administrator | Users with full control via the Django admin interface. | Manage users, products, orders, and store locations. | All admin.py files, django.contrib.admin |
Sources: README.md:116-130, IMPLEMENTATION.md:25-28
Summary
The Becathlon application employs a standard and robust Django architecture. Its modular design, based on discrete apps, makes the system organized and extensible. The clear separation between the Django backend and the progressively enhanced frontend (using vanilla JS and AJAX) allows for both server-side reliability and a modern, dynamic user experience. The flexible database and static file configurations ensure that the application is well-suited for both local development and production deployment.
Sources: README.md, IMPLEMENTATION.md, becathlon/settings.py