Skip to content

Architecture Overview

The Freeze Design webshop is a custom apparel e-commerce platform with an integrated product designer.

Design Principles

  1. API-First - All functionality exposed via REST API
  2. Component-Based - Reusable React components
  3. Type-Safe - TypeScript throughout the frontend
  4. Scalable - Stateless backend with async task processing

System Components

Frontend (Next.js)

The frontend is a Next.js 16 application using React 19 and the App Router.

Key Features:

  • Server-side rendering for SEO
  • Fabric.js canvas for product designer
  • React Context for client state (auth, cart, team orders, theme)
  • TanStack Query for API data

Backend (Django REST Framework)

Django provides the REST API and admin interface.

Key Features:

  • RESTful API design
  • django-allauth headless authentication
  • Celery for async tasks (backups, WebP image generation, monitoring)
  • PostgreSQL 15 with MPTT for categories

Data Flow

sequenceDiagram
    participant U as User
    participant F as Frontend
    participant A as API
    participant D as Database
    participant M as Mollie

    U->>F: Browse Products
    F->>A: GET /api/products/
    A->>D: Query Products
    D-->>A: Product List
    A-->>F: JSON Response
    F-->>U: Render Page

    U->>F: Submit Order
    F->>A: POST /api/orders/checkout/
    A->>D: Create Order
    A->>M: Create Payment
    M-->>A: Checkout URL
    A-->>F: Redirect to Mollie
    U->>M: Complete Payment
    M->>A: Webhook (payment status)
    A->>D: Update Order Status
    A->>A: Send Confirmation via Resend

Security Architecture

  • HTTPS enforced (Let's Encrypt with automated renewal)
  • CSRF protection for mutations
  • Rate limiting (DRF anon/user throttles, stricter scoped throttle on checkout)
  • Content Security Policy headers (django-csp)
  • Input validation at API level
  • MFA support for admin accounts (django-allauth MFA), login lockout via django-axes

Deployment Architecture

There is currently a single deployed environment: staging at https://staging.freezedesign.eu (a production VPS does not exist yet). See Deployment Guide for setup details.