Skip to content

Architecture

This section provides an overview of the Freeze Design webshop architecture, including system design decisions and component interactions.

System Overview

The Freeze Design webshop follows a modern decoupled architecture:

flowchart TB
    users["👥 Users"]
    nginx["🔀 Nginx<br/><small>:80 / :443</small>"]
    frontend["⚛️ Next.js Frontend<br/><small>:3000</small>"]
    backend["🐍 Django REST API<br/><small>:8000</small>"]
    postgres[("🐘 PostgreSQL 15<br/><small>:5432</small>")]
    redis[("⚡ Redis 7<br/><small>:6379</small>")]
    celery["⏰ Celery Workers"]

    users --> nginx
    nginx --> frontend
    nginx --> backend
    backend --> postgres
    backend --> redis
    backend --> celery
    celery --> redis

    style frontend fill:#3b82f6,stroke:#1d4ed8,color:#fff
    style backend fill:#10b981,stroke:#059669,color:#fff
    style celery fill:#10b981,stroke:#059669,color:#fff
    style postgres fill:#8b5cf6,stroke:#7c3aed,color:#fff
    style redis fill:#8b5cf6,stroke:#7c3aed,color:#fff
    style nginx fill:#009639,stroke:#007a2f,color:#fff
    style users fill:#6b7280,stroke:#4b5563,color:#fff

Technology Versions

Layer Technology Version
Backend framework Django 6.0.6
API Django REST Framework 3.17.1
Backend runtime Python (Docker image) 3.14
Frontend framework Next.js 16.2.5
UI library React 19.2.7
Design canvas Fabric.js 7.4.0
Payments mollie-api-python ≥ 4.0.0
PDF/invoices WeasyPrint ≥ 69.0
Database PostgreSQL 15
Cache & broker Redis 7

Sections

Diagram Description
System Context High-level system overview
User Flow Browse → Design → Checkout
CI/CD Pipeline GitHub Actions workflow
Deployment Staging topology