A production-style full-stack Todo application that uses every major part of the Cleverbrush framework — from schema-first REST endpoints and typed client to auth, ORM, OpenAPI, OpenTelemetry tracing, and schema-driven React forms. All services run as Docker containers so you can explore the live app, inspect traces in SigNoz, and browse the database in pgAdmin straight away.
The entire stack — backend, frontend, Postgres, Swagger UI, pgAdmin, OpenTelemetry Collector, ClickHouse, and SigNoz — runs via Docker Compose. Requires Docker.
git clone https://github.com/cleverbrush/framework.git
cd framework
docker compose -f demos/docker-compose.yml upOn first boot the database migrator, SigNoz provisioner, and ClickHouse init containers run automatically — allow 30–60 seconds for everything to become healthy before opening the URLs below.
The backend is instrumented with @cleverbrush/otel. Every HTTP request, database query, and background job produces a span that is exported to the bundled OpenTelemetry Collector (OTLP gRPC on port 4317) and stored in SigNoz + ClickHouse. Structured log lines from @cleverbrush/log are forwarded to the same pipeline so traces and logs are correlated by trace_id.
Open SigNoz at http://localhost:8082 to explore:
demos/signoz/dashboards/ and can be imported manually via the SigNoz UI under Dashboards → Import if auto-provisioning does not run.Login: admin@todo.local.com / Admin1234!
Once the stack is running, these services are available on localhost:
| Service | URL | Notes |
|---|---|---|
| Frontend app | http://localhost:5173 | React + Vite — register an account and try all the features |
| Backend API | http://localhost:3000 | Health check at /health, OpenAPI spec at /openapi.json |
| Swagger UI | http://localhost:8090 | Interactive API explorer — try every endpoint directly from the browser |
| pgAdmin | http://localhost:8110 | Postgres GUI — login admin@todo.local.com / admin |
| SigNoz | http://localhost:8082 | Traces, logs, and pre-built dashboards — login admin@todo.local.com / Admin1234! |
The Todo app is intentionally comprehensive — it is designed to show how the framework pieces fit together in a real codebase, not as a toy.
| Package | Demonstrated by |
|---|---|
@cleverbrush/server | 30+ REST endpoints, middleware chain, request batching, health check, RFC 9457 error responses |
@cleverbrush/schema | Shared contract used on both server and client — body, query, header, and response schemas |
@cleverbrush/client | Type-safe frontend client with retry, timeout, deduplication, throttling cache, and request batching |
@cleverbrush/auth | JWT authentication, Google OAuth login, role-based authorization (user / admin) |
@cleverbrush/di | Dependency injection container wiring database, config, and services |
@cleverbrush/server-openapi | Auto-generated OpenAPI 3.1 spec with tags, webhooks, and security schemes |
@cleverbrush/orm + @cleverbrush/orm-cli | Knex-based ORM with schema-driven queries and migration management |
@cleverbrush/otel | OpenTelemetry tracing and metrics exported to SigNoz via OTLP |
@cleverbrush/log | Structured logging with console, file, and OTLP sinks; template-based log messages |
@cleverbrush/react-form | Schema-driven form fields with auto-validation — no manual rules |
@cleverbrush/env | Typed environment variable parsing at startup with schema validation |
@cleverbrush/mapper | Object mapping between database rows and API response shapes |
X-Idempotency-Key, If-Match)todo.created / todo.completedThe entire demo lives in the demos/ directory of the monorepo. Browse it on GitHub to see exactly how each framework package is wired together:
For code patterns and architecture decisions, see the Examples page.