Domfolio Knowledge Library

Architecture

Current Django + HTMX architecture, request flow, and migration direction.

Audience
Engineers and technical stakeholders
Source
docs/architecture.md
Last updated
March 3, 2026

System Shape

  • Web runtime: Django templates + HTMX partial swaps for responsive navigation.
  • API runtime: versioned JSON endpoints under /api/v1/.
  • Persistence: PostgreSQL with workspace-scoped core domain entities.
  • App structure: apps/core contains views, API handlers, services, and models.

Request Flow

  1. Incoming request receives a correlation ID in RequestCorrelationIdMiddleware.
  2. Web views render templates or HTMX fragments for fast panel swaps.
  3. API views normalize responses through shared helpers in apps.core.api.common.
  4. Service layer functions handle reusable business rules (roles, tokens, idempotency, audit).

Migration Strategy

Domfolio is using a strangler migration. Existing web pages remain active while new and existing business operations are moved behind shared services and API contracts.

  • No hard cutover to API-only web delivery.
  • Shared service logic reduces divergence between web and mobile behavior.
  • Versioned API contracts protect clients from breaking changes.

Primary Code Entry Points

  • backend/apps/core/views.py for HTML routes and user flows.
  • backend/apps/core/api/ for API handlers and route table.
  • backend/apps/core/services/ for domain services reused by web and API.
  • backend/apps/core/models.py for persistence contracts.

UI Consistency Contracts

  • Modal dialogs use shared primitives: .df-modal__dialog, .df-modal__header, and .df-modal__body.
  • Modal headers include a divider and body spacing starts below the divider.
  • Close controls use shared styles: .df-modal__close and .ui-close-button.
  • Search controls use a consistent wrapper and icon inset: .ui-search-input-wrap.
  • Dual-action rows follow the same model: primary action left, centered row alignment, equalized side-by-side sizing.
  • Buttons use a global contract: 40px minimum height, 10px radius, strong filled primary, white secondary, and outlined-to-filled danger states.
  • Dashboard customize panel follows the same header/body separation pattern used in modal dialogs.