umami-software/umami

Umami is a modern, privacy-focused analytics platform. An open-source alternative to Google Analytics, Mixpanel and Amplitude.

35,926 stars TypeScript 10 components 4 connections

Privacy-focused web analytics platform, open-source alternative to Google Analytics

Analytics data flows from client tracking scripts through API routes to database storage, then back through query functions to dashboard components

Under the hood, the system uses 2 feedback loops, 3 data pools, 3 control points to manage its runtime behavior.

Structural Verdict

A 10-component dashboard with 4 connections. 674 files analyzed. Loosely coupled — components are relatively independent.

How Data Flows Through the System

Analytics data flows from client tracking scripts through API routes to database storage, then back through query functions to dashboard components

  1. Track Event — Client-side tracker collects pageviews and custom events
  2. API Ingestion — API routes receive and validate tracking data
  3. Database Storage — Prisma stores events, sessions, and metrics in PostgreSQL/ClickHouse
  4. Query Processing — Query functions aggregate and filter analytics data
  5. Dashboard Rendering — React components display charts and tables with real-time data

System Behavior

How the system actually operates at runtime — where data accumulates, what loops, what waits, and what controls what.

Data Pools

Analytics Database (database)
Stores website events, sessions, users, and aggregated metrics
Application State (in-memory)
Client-side state for user preferences, theme, and authentication tokens
Query Cache (cache)
React Query cache for API responses and analytics data

Feedback Loops

Delays & Async Processing

Control Points

Technology Stack

Next.js (framework)
Full-stack React framework with App Router
Prisma (database)
Database ORM with PostgreSQL and ClickHouse support
React Query (library)
Data fetching and caching for API calls
Zustand (library)
Lightweight state management
Chart.js (library)
Analytics visualizations and charts
Cypress (testing)
End-to-end testing framework
Rollup (build)
Bundler for tracking script
Docker (infra)
Containerization and deployment

Key Components

Configuration

docker-compose.yml (yaml)

pnpm-workspace.yaml (yaml)

app.json (json)

biome.json (json)

Explore the interactive analysis

See the full architecture map, data flow, and code patterns visualization.

Analyze on CodeSea

Related Dashboard Repositories

Frequently Asked Questions

What is umami used for?

Privacy-focused web analytics platform, open-source alternative to Google Analytics umami-software/umami is a 10-component dashboard written in TypeScript. Loosely coupled — components are relatively independent. The codebase contains 674 files.

How is umami architected?

umami is organized into 4 architecture layers: App Routes, Components, Database Layer, Tracker. Loosely coupled — components are relatively independent. This layered structure keeps concerns separated and modules independent.

How does data flow through umami?

Data moves through 5 stages: Track Event → API Ingestion → Database Storage → Query Processing → Dashboard Rendering. Analytics data flows from client tracking scripts through API routes to database storage, then back through query functions to dashboard components This pipeline design reflects a complex multi-stage processing system.

What technologies does umami use?

The core stack includes Next.js (Full-stack React framework with App Router), Prisma (Database ORM with PostgreSQL and ClickHouse support), React Query (Data fetching and caching for API calls), Zustand (Lightweight state management), Chart.js (Analytics visualizations and charts), Cypress (End-to-end testing framework), and 2 more. A focused set of dependencies that keeps the build manageable.

What system dynamics does umami have?

umami exhibits 3 data pools (Analytics Database, Application State), 2 feedback loops, 3 control points, 2 delays. The feedback loops handle polling and retry. These runtime behaviors shape how the system responds to load, failures, and configuration changes.

What design patterns does umami use?

5 design patterns detected: Custom Hooks Pattern, Query Functions, Component Re-exports, API Route Handlers, Permission Abstractions.

Analyzed on March 31, 2026 by CodeSea. Written by .