Welcome to the Becathlon Wiki
Relevant source files
The following files were used as context for generating this wiki page:Becathlon is a Django-powered e-commerce platform designed to mirror the browsing experience of a modern multisport retailer like Decathlon. It serves as a comprehensive showcase of full-stack web development, featuring a rich, AJAX-powered user interface, a robust backend, and distinct user roles. The platform allows users to browse a catalog of sports equipment, manage products, and interact with a modern, responsive storefront.
The application is built with a modular architecture, separating concerns into distinct Django apps for features like authentication, product catalog, user profiles, and more. This design promotes scalability and maintainability, making it a strong learning resource for Django development patterns.
Sources: README.md:4, README.md:10-13, README.md:79-81
Architecture Overview
Technology Stack
The project is built on a modern web stack, emphasizing a Django backend and a vanilla JavaScript frontend.
| Category | Technology | Description |
|---|---|---|
| Backend | Django 5.2.5 | The core web framework. |
| Frontend | HTML5, CSS3, Vanilla JS | Standard web technologies for the user interface. |
| Asynchronous Ops | AJAX (Fetch API) | Used for dynamic product loading, adding, and deleting without page reloads. |
| Database | SQLite / PostgreSQL | Defaults to SQLite for development, with support for PostgreSQL in production. |
| Authentication | Django Auth System | Utilizes Django's built-in system for user management. |
| Deployment | WhiteNoise | For serving static files in a production environment. |
Sources: IMPLEMENTATION.md:78-84, becathlon/settings.py:101-131, becathlon/settings.py:78
High-Level System Design
The application follows a standard monolithic Django architecture but is organized into modular apps. The frontend communicates with the backend for data operations primarily through AJAX calls to dedicated API endpoints, particularly for product management on the home page.
This diagram illustrates the main components and their interactions.
Project Structure
The project is organized into a primary becathlon project directory and a modular apps directory. This separation of concerns is a key architectural pattern.
becathlon/
├── apps/
│ ├── authentication/
│ ├── main/
│ ├── catalog/
│ ├── cart/
│ ├── profiles/
│ ├── stores/
│ ├── recommendation/
│ └── order/
├── becathlon/
│ ├── settings.py
│ └── urls.py
└── manage.py
Sources: IMPLEMENTATION.md:92-109, becathlon/settings.py:20
Application Modules
The application's functionality is broken down into several Django apps, each responsible for a specific domain.
| App Name | Purpose |
|---|---|
main | Handles the homepage, core navigation, and AJAX product endpoints. |
authentication | Manages user login, registration, and logout. |
catalog | Manages product listings, categories, and product details. |
cart | Implements shopping cart functionality. |
checkout | Provides a mock checkout process. |
orders | Manages order history and mock refunds. |
profiles | Manages user profiles, preferences, and account types. |
stores | Implements a store locator with mock locations. |
recommendation | Contains the product recommendation system. |
Sources: README.md:83-104, becathlon/settings.py:64-75
User Roles & Access Control
The application defines three distinct user roles, each with a specific set of permissions.
| Role | Description | Permissions |
|---|---|---|
| Guest / Visitor | Unregistered users browsing the site. | View products and categories. Cannot add, delete, or purchase items. |
| Client / Customer | Registered users with a "Buyer" or "Seller" account. | View, add products (Sellers), and delete their own products. Can manage their profile. |
| Administrator | Superusers with full control. | Full access via the Django admin dashboard to manage users, products, orders, etc. |
Sources: README.md:109-122, IMPLEMENTATION.md:38-42
The access control flow is primarily managed on the server-side using Django's authentication decorators and on the client-side by conditionally rendering UI elements.
This flowchart shows the basic access control logic for product management.
Key Systems
Authentication System
The authentication system handles user registration, login, and logout. It uses Django's built-in authentication framework.
- Registration: A custom sign-up form allows users to register with a username, email, and password. They can also select an account type ("Buyer" or "Seller").
- Login/Logout: Standard Django views and forms handle user sessions.
Sources: IMPLEMENTATION.md:5-11, apps/authentication/templates/authentication/signup.html
The following diagram shows the user registration flow.
Home Page & AJAX Product Management
The home page serves as the central hub for product interaction, featuring a dynamic, AJAX-driven interface for managing products without page reloads.
- Dynamic Loading: Products are loaded into a grid using an AJAX call to
/api/products/. - Product Creation: Authenticated "Seller" users see a form to add new products. Submitting this form sends a
POSTrequest to/api/products/add/. - Product Deletion: Users can delete products they created. This sends a
DELETErequest to/api/products/<id>/delete/.
Sources: IMPLEMENTATION.md:18-29, apps/main/templates/main/home.html:200-348
The sequence diagram below details the process of adding a new product.
Profile Management
The profiles app allows users to view and manage their account information. Key features include:
- Profile Details: Displays user information like name, email, and preferred sports.
- Newsletter Toggle: An AJAX-powered toggle allows users to subscribe to or unsubscribe from the newsletter. This sends a
POSTrequest toprofiles:toggle_newsletter_ajax. - Account Type Switching: Users can switch between "Buyer" and "Seller" account types. This is also an AJAX-powered feature that posts to
profiles:switch_account_type_ajax.
Sources: apps/profiles/templates/profiles/profile_detail.html:313-463, README.md:103
The sequence for switching account types is shown below.
Dynamic Hero Animation
The homepage features a dynamic hero section with an animated background rendered on an HTML5 canvas.
- Particle System: The
HeroAnimationclass inhero.jscreates and animates a system of interconnected particles. It calculates the number of particles based on screen size. - Stats Counter: The
animateCounterfunction animates numerical stats, counting up to a target value when the element becomes visible, tracked by anIntersectionObserver. - Parallax Effect: On scroll, the hero content and background orbs are moved at different speeds to create a parallax effect.
Sources: apps/main/static/main/js/hero.js, apps/main/templates/main/home.html:29-89
Deployment
The project is configured for deployment on a PWS (Platform-as-a-Service) environment.
Deployment Script
The pbp-deploy.sh script automates the deployment process with the following steps:
- Creates directories for static and media files.
- Runs
python manage.py collectstaticto gather all static files intoSTATIC_ROOT. - Runs
python manage.py migrateto apply database migrations.
Sources: pbp-deploy.sh
Static File Handling
In production (DEBUG=False), the application uses WhiteNoise to serve static files efficiently. The whitenoise.middleware.WhiteNoiseMiddleware is included in the MIDDLEWARE list, and whitenoise.storage.CompressedStaticFilesStorage is configured as the staticfiles storage backend.
Sources: becathlon/settings.py:78, becathlon/settings.py:170-182