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, email, 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 C as Celery
    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/
    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->>C: Queue Email Task
    C->>C: Send Confirmation via Resend

Security Architecture

  • HTTPS enforced in production (Cloudflare + Let's Encrypt)
  • CSRF protection for mutations
  • Rate limiting per endpoint
  • Content Security Policy headers
  • Input validation at API level
  • MFA support for admin accounts

Deployment Architecture

See Deployment Guide for production setup.