Architecture

How a request flows
through the codebase.

Every CleenUI request travels the same five layers: a React UI surface calls a C# Minimal API endpoint, which invokes one or more services, which use repositories to talk to the database. Each layer has a single responsibility and a clear contract with the layer above and below it — no leakage, no shortcuts, no business logic in places it doesn't belong.

The five layers

What lives at each tier, what it's responsible for, and where to go next when you want to dig in.

L1

Front-End React

Every screen the user sees — React 18 components, React Router routes, the design-token system, the dark-mode toggle. The codebase ships 60+ accessible components in 12 categories. UI surfaces talk to the API layer over HTTP; they never reach further down the stack.

Component catalog →
L2

C# Middle Tier API

ASP.NET Core 8 Minimal APIs — 524 endpoints today, grouped into area files (ApiAuth, ApiAdmin, ApiAccount, etc.). Each endpoint is a thin handler that authenticates the caller, validates the request, and delegates the actual work to one or more services. No business logic lives here.

Every endpoint, mapped →
L3

Services Layer

The business-logic tier. Service interfaces (IAuthService, IAccountService, IAIService, etc.) orchestrate cross-cutting concerns — auth checks, multi-tenant isolation, audit history, translation lookups, notification dispatch. Services compose with each other and call into repositories.

L4

Data Repo Layer

Dapper + ADO.NET against stored procedures — no Entity Framework, by design. Every query the codebase makes goes through a repository method that wraps a stored proc call. The repo layer is the single place where SQL parameter binding, transaction scope, and connection pooling decisions live.

Database deep-dive →
L5

Database

300+ tables and 700+ stored procedures in Azure SQL plus the supporting stores — Redis cache, Blob storage for media, external systems (Auth0, OpenAI, Stripe, Twilio, Service Bus) the repos reach for when SQL isn't the right substrate. Everything else in the stack sits on top of this layer.

300+ tables, 700+ procs →

Reading the graph

  • Hover any node to highlight its full downstream dependency tree — everything it transitively reaches, all the way to the database. Off-path nodes fade so the trace stays readable.
  • Click the corner icon (top right of the graph card) to open the fullscreen view. The expanded canvas adds the long-tail nodes — Help, Media, Payment, Integration, Search, Language, plus the external vendors — for the full ~60-node picture. Press Esc to return.
  • Arrows always flow downward. Front-end calls API; API invokes services; services use repos; repos persist to stores. The graph is a DAG by construction — no cycles, no skip-layer shortcuts.

See it under the hood.

A 30-minute architecture review walks every layer of this graph against your stack. No slides — just code, schema, and dependency chains.

Book a 30-minute reviewTour the codebase