Technology Stack

​

Overview

​

Backend

​

tRPC

• Automatic TypeScript type inference from server to client
• No code generation required
• Built-in request/response validation with Zod
• WebSocket support for real-time subscriptions

const appRouter = router({
  user: userRouter,
  website: websiteRouter,
  statusPage: statusPageRouter,
  statusDomain: statusDomainRouter,
});

​

Bun

• Significantly faster than Node.js for I/O operations
• Native TypeScript support (no compilation step needed)
• Built-in test runner and bundler
• Optimized for server-side workloads

​

Frontend

​

Next.js 16

• Server-side rendering (SSR) for optimal SEO
• App Router architecture
• API routes for server-side logic
• Automatic code splitting
• Image optimization

• Server components for reduced client bundle size
• Client components for interactive UI
• Static generation for status pages

​

React 19

• Server components
• Suspense for data fetching
• Concurrent rendering
• Improved hydration

​

UI Libraries

• HeroUI: React component library for consistent design
• Radix UI: Unstyled, accessible components
• Tailwind CSS 4: Utility-first CSS framework
• Framer Motion: Animation library
• Lucide React: Icon library

​

Databases

​

PostgreSQL

• User accounts and authentication
• Website configurations
• Status page settings
• Alert rules and notification channels

const websites = await prismaClient.website.findMany({
  where: { isActive: true },
  select: { url: true, id: true },
});

​

ClickHouse

• High-volume ingestion (thousands of checks per minute)
• Fast analytical queries
• Efficient compression
• Time-series operations

CREATE TABLE uptime_metrics (
  website_id String,
  region_id String,
  status Enum('UP' = 1, 'DOWN' = 0),
  response_time_ms Nullable(UInt32),
  http_status_code Nullable(UInt16),
  checked_at DateTime64(3, 'UTC'),
  ingested_at DateTime64(3, 'UTC')
)
ENGINE = MergeTree
ORDER BY (website_id, region_id, checked_at)

• Recent events: ORDER BY checked_at DESC LIMIT n BY website_id
• Historical analysis: WHERE checked_at >= now() - INTERVAL n HOUR

​

Redis

• Redis Streams: Message queue for website check tasks
• Session storage
• Rate limiting
• Caching layer

• Consumer groups for distributed processing
• Pending Entries List (PEL) for reliable delivery
• Automatic trimming to prevent memory exhaustion (~8000 messages)

​

Development Tools

​

Turborepo

• Incremental builds (only rebuild what changed)
• Remote caching for CI/CD
• Task orchestration across packages
• Parallel execution of independent tasks

{
  "build": {
    "dependsOn": ["^build"],
    "outputs": [".next/**", "!.next/cache/**"]
  }
}

​

Prisma

• Type-safe database client
• Database migrations
• Schema definition language
• Introspection and migration generation

​

Zod

• Runtime type checking
• Inference of static TypeScript types
• Composable validators
• Integration with tRPC for API validation

​

Testing & Quality

​

Vitest

• Vite-powered (extremely fast)
• Jest-compatible API
• Native TypeScript support
• Coverage reporting with v8

​

ESLint

• Shared configuration across workspace
• Next.js-specific rules
• Enforces code quality and consistency

​

Prettier

• Consistent code style
• Auto-formatting on save
• Pre-commit hooks via Husky

​

Husky + lint-staged

• Pre-commit: Lint and format staged files
• Prevents broken code from being committed

​

HTTP & Networking

​

Axios

• Promise-based API
• Request/response interceptors
• Timeout support with AbortController
• Automatic retries (configurable)

const res = await axios.get(url, {
  signal: abortController.signal,
  maxRedirects: 5,
  validateStatus: () => true,
  headers: {
    'User-Agent': 'Uptique/1.0 (Uptime Monitor)'
  }
});

​

Why These Technologies?

​

Type Safety

1. Zod schemas validate runtime data
2. Prisma generates types from database schema
3. tRPC infers types from Zod validators
4. React components receive fully typed data

​

Performance

• Bun: 2-3x faster than Node.js for I/O
• ClickHouse: Handles millions of rows with sub-second queries
• Redis Streams: In-memory queue with microsecond latency
• Next.js: Optimized rendering and code splitting

​

Scalability

• Turborepo: Scales to hundreds of packages
• Redis consumer groups: Horizontal worker scaling
• ClickHouse: Scales to billions of rows
• Stateless services: Easy horizontal scaling

​

Developer Experience

• Monorepo: Shared code and consistent tooling
• Hot reload: Fast development iteration
• Type inference: Minimal type annotations needed
• Testing: Fast feedback loop with Vitest

​

Version Information

​

Next Steps