Frontend Architecture

Relevant source files

The following files were used as context for generating this wiki page:

• apps/main/templates/main/base.html
• apps/main/templates/main/home.html
• becathlon/settings.py
• apps/catalog/static/catalog/js/catalog.js
• apps/stores/templates/stores/base_stores.html
• apps/profiles/templates/profiles/profile_detail_new.html
• IMPLEMENTATION.md
• apps/catalog/templates/catalog/base_catalog.html

The frontend architecture of the Becathlon project is a traditional server-side rendering (SSR) model powered by the Django Template Engine. This core is progressively enhanced with client-side vanilla JavaScript to create a more dynamic and responsive user experience, particularly for features like product management and quick views. The styling is managed through a combination of app-specific CSS files, a global stylesheet, and in some cases, the Tailwind CSS framework.

This architecture prioritizes a fast initial page load via server-rendering while leveraging AJAX for subsequent interactions to avoid full-page reloads. The structure is modular, with each Django app often containing its own templates, styles, and scripts, promoting separation of concerns.

Core Technologies

The frontend stack is built upon a foundation of standard web technologies, integrated into the Django framework.

Technology	Role	Description
Django Templates	Templating	Server-side rendering of HTML pages using Django's built-in template language.
HTML5	Structure	Semantic markup for all web pages.
CSS3	Styling	Custom styling for components and layouts, using features like CSS Variables for theming.
Vanilla JavaScript	Interactivity	Client-side logic for DOM manipulation, event handling, and dynamic features.
Fetch API	AJAX	Used for making asynchronous HTTP requests to the backend API for features like adding, deleting, and loading products.
Tailwind CSS	Styling	Utilized in specific modules (e.g., Profiles) for utility-first styling, loaded via a CDN.

Sources: IMPLEMENTATION.md, apps/profiles/templates/profiles/profile_detail_new.html:10

Templating System

The project uses Django's template inheritance to maintain a consistent layout across different applications. There are several base templates, each serving a specific application or providing a global foundation.

Template Inheritance and Structure

The application employs a multi-layered template structure. A main base.html likely provides the outermost shell, while individual apps like catalog, stores, and profiles have their own base templates that define the structure for their respective pages. Some templates, like profile_detail_new.html, extend base templates from other apps (catalog/base_catalog.html), indicating a dependency between app UIs.

A notable inconsistency exists in how navigation is handled. The main and catalog apps use a reusable partial includes/navigation.html, whereas the stores and profiles apps have the navigation bar HTML hardcoded directly within their base templates.

The following diagram illustrates the relationship between the key templates.

Sources: apps/main/templates/main/base.html, apps/catalog/templates/catalog/base_catalog.html:29, apps/stores/templates/stores/base_stores.html:279-301, apps/profiles/templates/profiles/base_profiles.html:18-30, apps/profiles/templates/profiles/profile_detail_new.html:1

Styling (CSS)

The project's styling is a mix of different approaches, varying by application. This includes global stylesheets, app-specific stylesheets, inline style blocks, and the Tailwind CSS utility framework.

CSS Files and Scope

File Path	Scope	Description
apps/main/css/base.css	Global	Provides base styles for navigation, messages, and layout. Included in most base templates.
apps/main/css/home.css	Home Page	Specific styles for the home page, including the product grid and forms.
apps/catalog/css/catalog.css	Catalog App	Styles for the product catalog, filter sidebar, and quick view modal.
apps/profiles/css/profiles.css	Profiles App	Defines styles for buttons, panels, and form elements within the user profile pages.
https://cdn.tailwindcss.com	Profiles App	The Tailwind CSS framework is loaded via CDN in the profiles app for utility-first styling.

Sources: apps/main/templates/main/base.html:11, apps/main/templates/main/home.html:10, apps/catalog/templates/catalog/base_catalog.html:11, apps/profiles/templates/profiles/base_profiles.html:12, apps/profiles/templates/profiles/profile_detail_new.html:10

Theming with CSS Variables

The stores app template demonstrates a theming system using CSS custom properties (variables) defined within a :root selector. This allows for consistent color and style management.

/* Source: apps/stores/templates/stores/base_stores.html:14-25 */
:root {
    --primary-black: #0a0a0a;
    --secondary-black: #1a1a1a;
    --accent-gray: #2a2a2a;
    --light-gray: #a0a0a0;
    --ultra-light: #f5f5f5;
    --accent-gold: #d4af37;
    --accent-blue: #0066ff;
    --gradient-start: #0a0a0a;
    --gradient-end: #1a1a1a;
}

Sources: apps/stores/templates/stores/base_stores.html:14-25

Static File Management

Static files like CSS and JavaScript are managed through Django's staticfiles app. The configuration in becathlon/settings.py defines how these files are collected and served.

Key settings include:

• STATIC_URL: The URL prefix for static files (e.g., /static/).
• STATIC_ROOT: The absolute path to the directory where collectstatic will gather all static files for deployment.
• STATICFILES_DIRS: A list of additional directories to search for static files, in this case, a project-level static/ directory.
• STORAGES: Configured to use whitenoise.storage.CompressedStaticFilesStorage in production, which enables serving compressed static files efficiently without relying on a separate web server like Nginx.

Sources: becathlon/settings.py:129-152

Client-Side Interactivity (JavaScript & AJAX)

The frontend uses vanilla JavaScript and the Fetch API to create interactive features that communicate with the backend without requiring a full page reload.

Home Page AJAX Functionality

The home page (apps/main/templates/main/home.html) implements AJAX for adding and deleting products. This logic is contained within an inline <script> tag.

• Loading Products: The loadProducts() function fetches a list of products from the /api/products/ endpoint and dynamically renders them in the #productsGrid container.
• Adding Products: An event listener on the #addProductForm captures form data, sends it to /api/products/add/ via a POST request, and then reloads the product list on success.
• Deleting Products: The deleteProduct() function sends a DELETE request to /api/products/<id>/delete/ and reloads the product list.

The following diagram shows the sequence for adding a new product.

Sources: IMPLEMENTATION.md, apps/main/templates/main/home.html:203-348

Catalog Quick View Modal

The catalog page uses JavaScript from apps/catalog/static/catalog/js/catalog.js to power a "Quick View" modal for products.

• The initQuickView() function attaches event listeners to all .btn-quick-view buttons.
• When a button is clicked, it fetches detailed product data from the /catalog/api/product/{id}/quick-view/ endpoint.
• The modal is populated with the fetched data, including images, price, and description. An "Add to Cart" button is also rendered and made functional.

The flow for this feature is as follows:

Sources: apps/catalog/static/catalog/js/catalog.js:47-92

Profile Page Interactivity

The profile details page (apps/profiles/templates/profiles/profile_detail_new.html) contains a small, embedded script to handle toggling the newsletter subscription. This demonstrates a pattern of including page-specific, self-contained scripts directly within templates for simple interactions.

• An event listener on the #newsletterToggle checkbox triggers an AJAX POST request to /profiles/toggle_newsletter_ajax/.
• The request body contains the new subscription status ({ newsletter_opt_in: true/false }).
• A "toast" notification is displayed to the user to confirm the change.

Sources: apps/profiles/templates/profiles/profile_detail_new.html:314-351

Conclusion

The Becathlon frontend is a practical implementation of a server-rendered architecture enhanced with modern JavaScript. It uses Django's powerful templating system for the initial structure and relies on targeted, lightweight vanilla JavaScript for dynamic user interactions. While there is some architectural inconsistency in styling and template composition across different apps, the overall approach is modular and effective. The use of AJAX for core user flows like product management significantly improves the user experience by providing real-time feedback without full page reloads.