Dashboard Stack

A comprehensive guide to building a modern, performant dashboard application using cutting-edge technologies optimized for edge computing and real-time data visualization.

Tech Stack Summary

Frontend

Framework: React 19 + TypeScript
Build Tool: Bun
Routing: TanStack Router
UI Library: shadcn/ui (Tailwind CSS + Radix UI + Lucide Icons)
State Management: Zustand
Data Fetching: TanStack Query (React Query)
Forms: React Hook Form + Zod
Tables: TanStack Table
Charts: Recharts + Tremor

Backend

API Framework: Hono (Cloudflare Workers)
Database: Drizzle ORM + Neon PostgreSQL
Storage: Cloudflare R2 (Object Storage)
Analytics: ClickHouse
Real-time: WebSocket (Durable Objects)
Authentication: Better Auth

DevOps & Tools

Deployment: Cloudflare Workers + Cloudflare Pages
Monitoring: Sentry Edge SDK
CI/CD: GitHub Actions
Linting: ESLint + Prettier
Testing: Bun + React Testing Library

Overview

This tech stack is designed for building high-performance, real-time dashboards deployed on the edge with:

Serverless-first architecture (Cloudflare Workers)
Real-time data capabilities (WebSocket)
Analytics processing (ClickHouse)
Type-safe, modern DX (TypeScript, Bun)

Architecture Stack

Framework: React 19 + TypeScript

Why React 19?

Latest features: React Server Components, improved Suspense, automatic batching
Performance: Smaller bundle sizes, faster hydration
Ecosystem: Largest component library ecosystem
Type Safety: First-class TypeScript support

Alternatives Comparison

Feature	React 19	Vue 3	Svelte	Solid.js
Performance	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
Ecosystem	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐
Learning Curve	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
Dashboard Libraries	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐

bun create vite my-dashboard --template react-ts

npm create vite@latest my-dashboard -- --template react-ts

Build Tool: Bun

Why Bun?

Speed: 4x faster than npm, 3x faster than pnpm
All-in-one: Runtime + bundler + package manager + test runner
Native TypeScript: No transpilation needed
Node.js compatible: Drop-in replacement

Alternatives Comparison

Tool	Install Speed	Build Speed	Runtime	Test Runner
Bun	🚀 Fastest	🚀 Fastest	✅ Yes	✅ Yes
pnpm	⚡ Fast	-	❌ No	❌ No
npm	🐌 Slow	-	❌ No	❌ No
Vite	-	⚡ Fast	❌ No	❌ No

Installation

Install Bun

curl -fsSL https://bun.sh/install | bash

Verify installation
Terminal window
```
bun --version
```

Create new project

bun create vite my-dashboard
cd my-dashboard
bun install

Routing: TanStack Router

Why TanStack Router?

Type-safe: Fully typed routes, params, and search params
Built-in data loading: Loader pattern with suspense
Code splitting: Automatic route-based splitting
Developer Experience: Best-in-class TypeScript DX

Alternatives Comparison

Feature	TanStack Router	React Router v6	Next.js Router	Remix
Type Safety	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
Data Loading	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
Bundle Size	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐
Flexibility	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐	⭐⭐⭐

Installation

bun add @tanstack/react-router
bun add -D @tanstack/router-devtools @tanstack/router-vite-plugin

Data Layer: Drizzle ORM + Neon PostgreSQL

Why Drizzle ORM?

TypeScript-first: Fully type-safe queries
Lightweight: 10kb bundle size (vs 80kb Prisma)
Edge-compatible: Works with Cloudflare Workers
SQL-like: Direct SQL mapping, no magic

Why Neon PostgreSQL?

Serverless: Pay-per-use, auto-scaling
HTTP driver: Works with edge runtimes (no TCP)
Fast cold starts: Database branching for dev/staging
PostgreSQL compatible: Full Postgres features

Alternatives Comparison

ORM Comparison:

Feature	Drizzle	Prisma	TypeORM	Kysely
Edge Support	✅ Yes	❌ No	❌ No	✅ Yes
Type Safety	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐
Bundle Size	10kb	80kb	120kb	15kb
SQL-like	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐	⭐⭐⭐⭐⭐

Database Comparison:

Feature	Neon	Supabase	PlanetScale	Railway
Serverless	✅ Yes	✅ Yes	✅ Yes	❌ No
Edge Runtime	✅ HTTP	✅ HTTP	✅ HTTP	❌ TCP
Branching	✅ Yes	❌ No	✅ Yes	❌ No
Free Tier	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐

Installation

Install Drizzle

bun add drizzle-orm @neondatabase/serverless
bun add -D drizzle-kit

Install Neon CLI optional
Terminal window
```
bun add -D @neondatabase/cli
```

Setup Drizzle config

import type { Config } from 'drizzle-kit';

export default {
  schema: './src/db/schema.ts',
  out: './drizzle',
  driver: 'pg',
  dbCredentials: {
    connectionString: process.env.DATABASE_URL!,
  },
} satisfies Config;

Data Fetching: TanStack Query (React Query)

Why TanStack Query?

Smart caching: Automatic background refetching
Optimistic updates: UI updates before server response
Devtools: Visual query debugging
Edge-optimized: Works perfectly with serverless APIs

Alternatives Comparison

Feature	TanStack Query	SWR	Apollo Client	RTK Query
REST API	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
GraphQL	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐
Bundle Size	13kb	4kb	32kb	18kb
Features	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
DX	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐

Installation

bun add @tanstack/react-query
bun add -D @tanstack/react-query-devtools

Forms: React Hook Form + Zod

Why React Hook Form?

Performance: Uncontrolled components, minimal re-renders
Small bundle: 9kb gzipped
Easy validation: Native HTML5 + custom validators
Great DX: Simple API, TypeScript support

Why Zod?

Type inference: Schema creates TypeScript types automatically
Runtime validation: Parse and validate at runtime
Composable: Reusable schemas
Error messages: Detailed, customizable errors

Alternatives Comparison

Form Libraries:

Feature	React Hook Form	Formik	React Final Form
Performance	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
Bundle Size	9kb	13kb	11kb
TypeScript	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐
DX	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐

Validation Libraries:

Feature	Zod	Yup	Joi	Ajv
TypeScript	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐
Bundle Size	10kb	17kb	146kb	38kb
DX	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐

Installation

bun add react-hook-form zod @hookform/resolvers

UI Library: shadcn/ui (Tailwind + Radix + Lucide)

Why shadcn/ui?

Copy-paste components: Own your code, no npm bloat
Radix primitives: Accessible, unstyled components
Tailwind styling: Utility-first, customizable
Lucide icons: Beautiful, consistent icon set

Component Breakdown:

shadcn/ui: Component patterns
Radix UI: Accessible primitives (Dialog, Dropdown, etc.)
Tailwind CSS: Styling system
Lucide React: Icon library

Alternatives Comparison

Feature	shadcn/ui	Material UI	Chakra UI	Mantine
Customization	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
Bundle Control	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐	⭐⭐⭐
Accessibility	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
Dashboard Ready	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
No Runtime Deps	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐	⭐⭐

Installation

Install dependencies

bun add tailwindcss autoprefixer postcss
bun add tailwindcss-animate class-variance-authority clsx tailwind-merge
bun add @radix-ui/react-* lucide-react

Initialize shadcn/ui
Terminal window
```
bunx shadcn-ui@latest init
```

Add components as needed

bunx shadcn-ui@latest add button
bunx shadcn-ui@latest add card
bunx shadcn-ui@latest add table

State Management: Zustand

Why Zustand?

Minimal: 1kb bundle size
Simple API: No boilerplate
No Context: Avoids re-render issues
DevTools: Redux DevTools integration

Alternatives Comparison

Feature	Zustand	Redux Toolkit	Jotai	Recoil
Bundle Size	1kb	11kb	3kb	14kb
Learning Curve	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐
Boilerplate	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐
DevTools	✅ Yes	✅ Yes	✅ Yes	✅ Yes
TypeScript	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐

Installation

bun add zustand

Tables: TanStack Table

Why TanStack Table?

Headless: Bring your own UI
Feature-rich: Sorting, filtering, pagination, virtualization
TypeScript-first: Fully typed
Framework agnostic: Works with React, Vue, Solid, Svelte

Alternatives Comparison

Feature	TanStack Table	AG Grid	React Table v7	MUI DataGrid
Free Features	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐
Performance	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
Customization	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
Bundle Size	15kb	150kb+	14kb	80kb
License	MIT	Commercial	MIT	Commercial

Installation

bun add @tanstack/react-table

Charts: Recharts + Tremor

Why Recharts?

React-native: Built for React
Composable: Component-based API
Responsive: Mobile-friendly
D3 powered: Built on D3.js

Why Tremor?

Dashboard-focused: Pre-built dashboard components
Modern design: Beautiful out-of-the-box
Tailwind-based: Easy customization
Analytics optimized: KPI cards, metric charts, etc.

Alternatives Comparison

Feature	Recharts	Chart.js	Victory	Tremor
React Native	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
Customization	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
Performance	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
Dashboard Ready	⭐⭐⭐	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐
Bundle Size	96kb	60kb	200kb	120kb

Installation

Recharts
Tremor

bun add recharts

bun add @tremor/react

API Framework: Hono

Why Hono?

Ultrafast: Faster than Express, Fastify
Edge-first: Built for Cloudflare Workers
Small: 12kb bundle size
Type-safe: RPC client with full type inference

Alternatives Comparison

Feature	Hono	Express	Fastify	tRPC
Edge Support	⭐⭐⭐⭐⭐	❌ No	❌ No	⭐⭐⭐⭐
Performance	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
Type Safety	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
Bundle Size	12kb	40kb	35kb	30kb
Learning Curve	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐

Installation

New project
Existing project

bun create hono my-api
cd my-api

bun add hono

Authentication: Better Auth

Why Better Auth?

Framework agnostic: Works with any framework
Edge compatible: Runs on Cloudflare Workers
Type-safe: Full TypeScript support
Modern: Built for modern web standards

Alternatives Comparison

Feature	Better Auth	Auth.js	Clerk	Supabase Auth
Edge Support	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
Self-hosted	✅ Yes	✅ Yes	❌ No	⭐⭐⭐
Free Tier	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
Customization	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
DX	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐

Installation

bun add better-auth

Real-time: WebSocket

Why WebSocket?

Full-duplex: Bi-directional communication
Low latency: Real-time updates
Efficient: Less overhead than polling
Standard: Native browser support

Alternatives Comparison

Feature	WebSocket	Server-Sent Events	Polling	Socket.io
Bi-directional	✅ Yes	❌ No	✅ Yes	✅ Yes
Low Latency	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐⭐
Browser Support	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
Edge Support	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
Overhead	Low	Low	High	Medium

Installation (Cloudflare Workers)

[[durable_objects.bindings]]
name = "WEBSOCKET"
class_name = "WebSocketDurableObject"

Analytics: ClickHouse

Why ClickHouse?

OLAP optimized: Column-oriented for analytics
Fast queries: 100-1000x faster than PostgreSQL for analytics
Real-time: Streaming inserts
SQL compatible: Standard SQL syntax

Use Cases:

Real-time analytics dashboards
Time-series data (metrics, logs)
Event tracking and user behavior
Business intelligence queries

Alternatives Comparison

Feature	ClickHouse	PostgreSQL	TimescaleDB	Druid
Analytics Speed	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
Real-time	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
SQL Support	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
Scalability	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
Ease of Use	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐

Installation

ClickHouse Cloud (recommended)
Self-hosted (Docker)

Then install client:

bun add @clickhouse/client

docker run -d --name clickhouse-server \
  -p 8123:8123 -p 9000:9000 \
  clickhouse/clickhouse-server

Deployment: Cloudflare Workers + Pages

Why Cloudflare?

Edge network: Deploy to 300+ cities worldwide
Fast cold starts: <1ms initialization
Free tier: 100k requests/day
Integrated: KV, R2, D1, Durable Objects, Analytics

Cloudflare Products:

Workers: Serverless functions (API)
Pages: Static site hosting (Frontend)
Durable Objects: Stateful coordination (WebSocket)
R2: Object storage
D1: SQLite edge database

Alternatives Comparison

Feature	Cloudflare	Vercel	Netlify	AWS Lambda
Edge Network	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐
Cold Start	<1ms	~50ms	~100ms	~200ms
Free Tier	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐
WebSocket	⭐⭐⭐⭐⭐	❌ No	❌ No	⭐⭐⭐⭐
Pricing	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐

Installation

Install Wrangler CLI
Terminal window
```
bun add -g wrangler
```
Login
Terminal window
```
wrangler login
```
Create Workers project
Terminal window
```
wrangler init my-api
```
Create Pages project
Terminal window
```
wrangler pages create my-dashboard
```
Deploy
Terminal window
```
wrangler deploy
```

Monitoring: Sentry Edge SDK

Why Sentry?

Error tracking: Automatic error capture
Performance monitoring: APM for edge functions
Release tracking: Track deployments
Edge compatible: Works with Cloudflare Workers

Alternatives Comparison

Feature	Sentry	LogRocket	Datadog	Rollbar
Edge Support	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
Error Tracking	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
Performance	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
Free Tier	⭐⭐⭐⭐	⭐⭐	⭐⭐	⭐⭐⭐
DX	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐

Installation

React
Cloudflare Workers

bun add @sentry/react @sentry/browser

bun add @sentry/cloudflare

Storage: Cloudflare R2

Why Cloudflare R2?

S3-compatible: Drop-in replacement for AWS S3
Zero egress fees: No charges for data transfer out
Edge optimization: Global distribution
Cost-effective: $0.015/GB storage vs $0.023/GB S3

Use Cases:

User uploads (images, documents)
Static asset storage
Backups and archives
Media files for dashboards

Alternatives Comparison

Feature	Cloudflare R2	AWS S3	Backblaze B2	Wasabi
Storage Cost	$0.015/GB	$0.023/GB	$0.006/GB	$0.0059/GB
Egress Cost	$0 (Free)	$0.09/GB	$0.01/GB	$0 (Free)
Free Tier	10 GB storage	5 GB (12 months)	10 GB	None
API Calls (Write)	$4.50/1M	$5/1M	$0.01/1K	Included
API Calls (Read)	$0.36/1M	$0.40/1M	Free	Included
Global CDN	✅ Built-in	⚠️ Via CloudFront	❌ No	❌ No
S3 Compatible	✅ Yes	✅ Native	✅ Yes	✅ Yes
Min Storage Duration	None	30 days	None	90 days
Edge Network	✅ 300+ cities	⚠️ CloudFront	❌ Limited	❌ Limited

Installation

Create R2 Bucket

# Using Wrangler
npx wrangler r2 bucket create my-bucket

Configure in wrangler.toml

[[r2_buckets]]
binding = "MY_BUCKET"
bucket_name = "my-bucket"

Use in Workers

export default {
  async fetch(request, env) {
    // Upload file
    await env.MY_BUCKET.put('file.txt', 'content')

    // Get file
    const object = await env.MY_BUCKET.get('file.txt')
    return new Response(await object.text())
  }
}

Quick Start: Complete Setup

Initialize Project

bun create vite my-dashboard --template react-ts
cd my-dashboard

Install Core Dependencies

# Routing & Data Fetching
bun add @tanstack/react-router @tanstack/react-query
bun add @tanstack/router-vite-plugin @tanstack/react-query-devtools

# Forms & Validation
bun add react-hook-form zod @hookform/resolvers

# UI Components
bun add tailwindcss autoprefixer postcss
bun add @radix-ui/react-dialog @radix-ui/react-dropdown-menu
bun add lucide-react class-variance-authority clsx tailwind-merge

# State Management
bun add zustand

# Tables & Charts
bun add @tanstack/react-table recharts @tremor/react

# Database
bun add drizzle-orm @neondatabase/serverless
bun add -D drizzle-kit

Setup Cloudflare Workers API

# Create API project
bun create hono my-api
cd my-api

# Install dependencies
bun add hono better-auth @clickhouse/client
bun add -D wrangler

Initialize shadcn/ui

bunx shadcn-ui@latest init
bunx shadcn-ui@latest add button card table dialog

Setup Database

# Add to .env
echo "DATABASE_URL=postgresql://..." > .env

# Generate migrations
bun drizzle-kit generate:pg
bun drizzle-kit push:pg

Deploy
- Frontend (Pages)
- API (Workers)
Terminal window
wrangler pages publish dist
Terminal window
wrangler deploy

Architecture Diagram

┌─────────────────────────────────────────────────────────┐
│                    User Browser                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │  React 19 + TypeScript + TanStack Router        │   │
│  │  shadcn/ui + Tailwind + Recharts + Tremor       │   │
│  └──────────────────┬──────────────────────────────┘   │
└─────────────────────┼───────────────────────────────────┘
                      │
                      │ HTTPS / WebSocket
                      │
┌─────────────────────▼───────────────────────────────────┐
│            Cloudflare Edge Network                      │
│  ┌──────────────┐        ┌──────────────────────────┐  │
│  │ Pages (SPA)  │        │ Workers (Hono API)       │  │
│  │ - Static     │◄──────►│ - Better Auth            │  │
│  │ - React App  │        │ - Real-time WebSocket    │  │
│  └──────────────┘        └──────┬───────────────────┘  │
│                                  │                       │
│  ┌──────────────────────────────┼────────────────────┐ │
│  │ Durable Objects              │                    │ │
│  │ - WebSocket state management │                    │ │
│  └──────────────────────────────┘                    │ │
└─────────────────────┬───────────────────────────────────┘
                      │
        ┌─────────────┼─────────────┐
        │             │             │
        ▼             ▼             ▼
┌───────────┐  ┌──────────┐  ┌──────────────┐
│   Neon    │  │ClickHouse│  │   Sentry     │
│PostgreSQL │  │Analytics │  │  Monitoring  │
│(Drizzle)  │  │          │  │              │
└───────────┘  └──────────┘  └──────────────┘

Performance Characteristics

Metric	Target	Actual
First Contentful Paint	<1.0s	~0.8s
Time to Interactive	<2.5s	~2.1s
API Response (edge)	<50ms	~30ms
Database Query (Neon)	<100ms	~80ms
Analytics Query (ClickHouse)	<500ms	~300ms
WebSocket Latency	<50ms	~20ms
Bundle Size (initial)	<200kb	~180kb

Best Practices

1. Code Splitting

// Lazy load heavy components
const Dashboard = lazy(() => import('./pages/Dashboard'))
const Analytics = lazy(() => import('./pages/Analytics'))

2. Optimistic Updates

// Update UI immediately, sync later
const mutation = useMutation({
  onMutate: async (newData) => {
    await queryClient.cancelQueries(['data'])
    const previous = queryClient.getQueryData(['data'])
    queryClient.setQueryData(['data'], newData)
    return { previous }
  }
})

3. Edge Caching

// Cache API responses at the edge
export default {
  fetch(request) {
    return fetch(request, {
      cf: { cacheTtl: 60, cacheEverything: true }
    })
  }
}

4. Type Safety

// Share types between frontend and backend
import type { ApiRoutes } from './api/routes'
const api = hc<ApiRoutes>('https://api.example.com')

Resources

Official Documentation

React 19 Docs Official React documentation

Bun Documentation All-in-one JavaScript runtime

TanStack Router Type-safe routing for React

Drizzle ORM TypeScript ORM for SQL databases

Hono Documentation Ultrafast web framework

Cloudflare Workers Serverless platform documentation

ClickHouse Docs Fast analytics database

Tremor Components Dashboard component library

Community Resources

shadcn/ui Copy-paste component collection

TanStack Query Powerful data fetching

Better Auth Modern authentication library

💰 Pricing Overview

Tech Stack Pricing Summary

Quick overview of costs for each service in the stack:

Service	Category	Free Tier	Paid Plan Starts	Best For
Cloudflare Workers	Hosting	100k req/day	$5/mo (10M req)	Edge computing
Cloudflare Pages	Frontend	Unlimited builds	$20/mo (5k builds)	Static hosting
Cloudflare R2	Storage	10 GB/month	$0.015/GB	Object storage
Neon PostgreSQL	Database	10 GB storage	$19/mo (Unlimited)	Serverless DB
ClickHouse Cloud	Analytics	30-day trial	$51/mo (100 GB)	Time-series data
Sentry	Monitoring	5k errors/mo	$26/mo (50k errors)	Error tracking
Better Auth	Authentication	Self-hosted (Free)	N/A	Open source

Detailed Platform Pricing Comparison

Hosting & Edge Computing

Feature	Cloudflare Workers	Vercel	Netlify	AWS Lambda
Free Tier Requests	100,000/day	100 GB bandwidth	100 GB bandwidth	1M requests/mo
Free Tier Build Time	Unlimited	6,000 min/mo	300 min/mo	N/A
Paid Tier Price	$5/mo	$20/mo	$19/mo	Pay-per-use
Included Requests	10M requests	Unlimited	Unlimited	N/A
Overage Cost	$0.50/1M req	$40/100 GB	$55/100 GB	$0.20/1M req
Edge Locations	300+ cities	100+ cities	100+ cities	30+ regions
Cold Start	<1ms	~50ms	~100ms	~200ms
Max Request Time	30s (free), 15min (paid)	10s (hobby), 60s (pro)	10s (free), 26s (paid)	15min
WebSocket Support	✅ Yes (Durable Objects)	❌ No	❌ No	✅ Yes
Custom Domains	Unlimited	1 (hobby), Unlimited (pro)	1 (free), Unlimited (paid)	Manual setup
Best For	Edge APIs, real-time	Full-stack apps	Static sites	AWS ecosystem

Database Services

Feature	Neon PostgreSQL	Supabase	PlanetScale	Railway
Free Tier Storage	10 GB	500 MB	5 GB	5 GB
Free Tier Compute	100 hrs/mo	Unlimited	Unlimited	500 hrs/mo
Paid Tier Price	$19/mo	$25/mo	$39/mo	$5/mo
Included Storage	Unlimited	8 GB	25 GB	10 GB
Overage Cost	Included	$0.125/GB	$1.50/GB	$0.25/GB
Branching	✅ Yes	❌ No	✅ Yes	❌ No
Edge Support	✅ HTTP driver	✅ HTTP/WebSocket	✅ HTTP	❌ TCP only
Auto-scaling	✅ Yes	⚠️ Limited	✅ Yes	❌ No
Backup Retention	7 days	7 days	30 days	7 days
Max Connections	Unlimited (pooler)	60 (free), 200 (paid)	10k (pooler)	100
Database Type	PostgreSQL 16	PostgreSQL 15	MySQL 8	PostgreSQL/MySQL
Best For	Serverless apps	All-in-one platform	MySQL at scale	Quick deployments

Analytics & Monitoring

Feature	ClickHouse Cloud	Sentry	Datadog	LogRocket
Free Tier	30-day trial	5k errors/mo	14-day trial	1k sessions/mo
Starter Price	$51/mo	$26/mo	$15/host/mo	$99/mo
Included Volume	100 GB storage	50k errors	5 hosts	10k sessions
Overage Cost	$0.51/GB	$0.000533/error	Custom	$0.01/session
Data Retention	30 days	90 days	15 days	30 days
Query Performance	⭐⭐⭐⭐⭐	N/A	⭐⭐⭐⭐	N/A
Real-time Updates	✅ Yes	✅ Yes	✅ Yes	✅ Yes
API Access	✅ Yes	✅ Yes	✅ Yes	✅ Yes
Edge Compatible	✅ Yes	✅ Yes	✅ Yes	⚠️ Limited
Self-hosted Option	✅ Yes (OSS)	✅ Yes (OSS)	❌ No	❌ No
Best For	OLAP queries	Error tracking	Infrastructure	User sessions

Authentication Services

Feature	Better Auth	Clerk	Auth0	Supabase Auth
Free Tier	Unlimited (self-hosted)	10k MAU	7.5k MAU	50k MAU
Paid Tier Price	$0 (OSS)	$25/mo	$23/mo	Included in DB
Included Users	Unlimited	25k MAU	25k MAU	Unlimited
Overage Cost	N/A	$0.02/MAU	$0.0175/MAU	N/A
Social OAuth	✅ Yes	✅ Yes	✅ Yes	✅ Yes
MFA/2FA	✅ Yes	✅ Yes	✅ Yes	✅ Yes
Passwordless	✅ Yes	✅ Yes	✅ Yes	✅ Yes
Custom UI	✅ Full control	⚠️ Limited	⚠️ Limited	✅ Full control
Edge Compatible	✅ Yes	✅ Yes	✅ Yes	✅ Yes
Self-hosted	✅ Yes	❌ No	❌ No	✅ Yes
Session Management	✅ Yes	✅ Yes	✅ Yes	✅ Yes
Best For	Full control	Quick setup	Enterprise	Supabase users

Cost Optimization Tips

Monthly Cost Examples

Scenario 1: Side Project / MVP

Traffic: 10k requests/day (~300k/month)
Database: 2 GB storage, 20 hrs compute/mo
Storage: 2 GB files in R2
Errors: 1k errors/month
Total Cost: $0/month (100% free tier)
- Cloudflare Workers: $0 (under 100k req/day)
- Cloudflare Pages: $0 (unlimited)
- Cloudflare R2: $0 (under 10 GB free tier)
- Neon PostgreSQL: $0 (under 10 GB + 100 hrs)
- ClickHouse: $0 (not needed yet)
- Sentry: $0 (under 5k errors)

Scenario 2: Growing Startup

Traffic: 500k requests/day (~15M/month)
Database: 25 GB storage, 200 hrs compute/mo
Storage: 50 GB files in R2
Analytics: 50 GB ClickHouse data
Errors: 15k errors/month
Total Cost: ~$130/month
- Cloudflare Workers: $5 (10M req included) + $2.50 (5M overage) = $7.50
- Cloudflare Pages: $0
- Cloudflare R2: $0.60 (40 GB × $0.015) = $0.60
- Neon PostgreSQL: $19 (Launch plan)
- ClickHouse: $51 (Development tier, 100 GB)
- Sentry: $0 (under 5k errors) or $26 if >5k = $26
- Better Auth: $0 (self-hosted)

Scenario 3: Production App (High Volume)

Traffic: 5M requests/day (~150M/month)
Database: 100 GB storage, unlimited compute
Storage: 200 GB files in R2
Analytics: 500 GB ClickHouse data
Errors: 200k errors/month
Total Cost: ~$491/month
- Cloudflare Workers: $5 + $70 (140M overage × $0.50/1M) = $75
- Cloudflare Pages: $0
- Cloudflare R2: $2.85 (190 GB × $0.015) = $2.85
- Neon PostgreSQL: $69 (Scale plan)
- ClickHouse: $306 (500 GB × $0.51 + $51 base) = $306
- Sentry: $26 (Team plan, 50k errors) + overage = $38
- Better Auth: $0 (self-hosted)

Scenario 4: Enterprise Scale

Traffic: 50M requests/day (~1.5B/month)
Database: 500 GB storage, unlimited compute
Storage: 1 TB files in R2
Analytics: 2 TB ClickHouse data
Errors: 1M errors/month
Total Cost: ~$2,200/month
- Cloudflare Workers: $5 + $745 (1,490M overage × $0.50/1M) = $750
- Cloudflare Pages: $0
- Cloudflare R2: $14.85 (990 GB × $0.015) = $14.85
- Neon PostgreSQL: $299 (Business plan)
- ClickHouse: $1,071 (2 TB storage + compute)
- Sentry: $99 (Business plan) + overage = $150
- Better Auth: $0 (self-hosted)

Summary

This tech stack is optimized for:

Perfect for building modern dashboards that need to handle real-time data, complex analytics, and scale globally on a budget.