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 - Zustand for client-side state - TanStack Query for API data

Backend (Django REST Framework)

Django provides the REST API and admin interface.

Key Features: - RESTful API design - Session-based authentication - Celery for async tasks - PostgreSQL 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

    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->>C: Queue Email Task
    A-->>F: Order Created
    C->>C: Send Confirmation Email

Security Architecture

  • HTTPS enforced in production
  • CSRF protection for mutations
  • Rate limiting per endpoint
  • Content Security Policy headers
  • Input validation at API level

Deployment Architecture

See Deployment Guide for production setup.