Technology Stack

Technology Stack

Complete list of technologies, libraries, and tools used in D1 Database Manager.

Frontend Technologies

Core Framework

Technology	Version	Purpose
React	19.2.0	UI library with hooks and concurrent features
TypeScript	5.9.3	Type-safe JavaScript with strict mode
Vite	7.1.12	Fast build tool and development server

Why React 19:

• Concurrent features for better performance
• Server Components support (future)
• Improved hooks API
• Better TypeScript integration

Why TypeScript:

• Catch errors at compile time
• Better IDE support and autocomplete
• Self-documenting code with types
• Safer refactoring

Why Vite:

• Lightning-fast HMR (Hot Module Replacement)
• Native ES modules support
• Optimized production builds
• Plugin ecosystem

UI Components & Styling

Technology	Version	Purpose
Tailwind CSS	3.4.18	Utility-first CSS framework
shadcn/ui	Latest	Pre-built accessible components
Lucide React	0.548.0	Icon library (fork of Feather Icons)
Radix UI	Various	Unstyled, accessible component primitives
class-variance-authority	0.7.1	CVA for component variants
clsx	2.1.1	Conditional class name utility
tailwind-merge	3.3.1	Merge Tailwind classes without conflicts
tailwindcss-animate	1.0.7	Animation utilities for Tailwind

Radix UI Components Used:

• @radix-ui/react-accordion - Collapsible sections
• @radix-ui/react-checkbox - Checkbox inputs
• @radix-ui/react-dialog - Modal dialogs
• @radix-ui/react-label - Form labels
• @radix-ui/react-progress - Progress bars
• @radix-ui/react-radio-group - Radio buttons
• @radix-ui/react-select - Select dropdowns
• @radix-ui/react-slot - Component composition

Why shadcn/ui:

• Copy-paste components (not npm package)
• Fully customizable
• Accessible by default (Radix UI primitives)
• Works great with Tailwind

Why Tailwind CSS:

• Rapid prototyping
• Consistent design system
• Small production bundle (unused styles purged)
• Dark mode support built-in

Libraries

Library	Version	Purpose
jose	6.1.0	JWT validation and parsing
jszip	3.10.1	Client-side ZIP file creation
reactflow	11.10.4	Interactive graph visualization
dagre	0.8.5	Graph layout algorithm
jspdf	2.5.1	PDF generation in browser
html2canvas	1.4.1	HTML to canvas screenshot

Why jose:

• Standard-compliant JWT handling
• Used for validating Cloudflare Access tokens
• Secure cryptographic operations

Why jszip:

• Create ZIP files in browser
• Bulk export multiple databases/tables
• No server-side processing needed

Why reactflow:

• Interactive node-based graph visualization
• Used in Cascade Impact Simulator
• Built-in zoom, pan, and minimap
• Customizable nodes and edges

Why dagre:

• Hierarchical graph layout algorithm
• Automatic node positioning
• Works with reactflow for clean layouts

Why jspdf & html2canvas:

• Client-side PDF generation
• Export cascade simulation reports
• No server processing required

Backend Technologies

Runtime & Platform

Technology	Version	Purpose
Cloudflare Workers	Runtime API	Edge compute platform
Cloudflare D1	Latest	SQLite-compatible edge database
Cloudflare Access	Zero Trust	Enterprise authentication
Wrangler	4.45.0	CLI for development and deployment

Why Cloudflare Workers:

• 300+ edge locations globally
• Sub-10ms latency worldwide
• Automatic scaling
• Pay-per-use pricing
• Integrated with Cloudflare ecosystem

Why Cloudflare D1:

• SQLite compatibility (familiar syntax)
• No connection management needed
• Automatic backups and replicas
• Integrated with Workers
• Query data at the edge

Why Cloudflare Access:

• Zero Trust security model
• Enterprise SSO (GitHub, Google, Azure AD, etc.)
• No additional infrastructure needed
• Centralized access control
• Audit logging built-in

Worker Dependencies

Package	Version	Purpose
@cloudflare/workers-types	4.20251014.0	TypeScript types for Workers API
esbuild	0.25.10	Fast JavaScript bundler

Development Tools

Build Tools

Tool	Version	Purpose
esbuild	0.25.10	Fast bundling for Worker
PostCSS	8.5.6	CSS processing
Autoprefixer	10.4.21	Add vendor prefixes automatically

Why esbuild:

• 10-100x faster than webpack/rollup
• Built-in TypeScript support
• Tree-shaking out of the box
• Used by both Vite and Wrangler

Code Quality

Tool	Version	Purpose
ESLint	9.36.0	JavaScript/TypeScript linting
@eslint/js	9.13.0	ESLint base config
typescript-eslint	8.46.2	TypeScript-specific linting rules
eslint-plugin-react-hooks	7.0.1	React Hooks linting
eslint-plugin-react-refresh	0.4.14	React Fast Refresh linting

ESLint Configuration:

// eslint.config.js
export default [
  js.configs.recommended,
  ...tseslint.configs.recommended,
  reactHooks.configs.recommended,
  reactRefresh.configs.recommended
]

TypeScript Configuration

Config File	Purpose
tsconfig.json	Root TypeScript config
tsconfig.app.json	Frontend-specific config
tsconfig.node.json	Node.js tools config

TypeScript Features Used:

• Strict mode enabled
• Path aliases (@/components)
• ES2020 target
• Module resolution: Bundler

Package Management

Runtime

• Node.js: 18+ (LTS)
• npm: Comes with Node.js
• Package Manager: npm (lock file: package-lock.json)

Scripts

{
  "dev": "vite",                    // Start dev server
  "build": "tsc -b && vite build",  // Build for production
  "lint": "eslint .",               // Lint codebase
  "preview": "vite preview"         // Preview production build
}

Database

Schema Language

• SQL: SQLite dialect
• Migrations: Manual (SQL files)
• Schema File: worker/schema.sql

Metadata Database

Tables:

• databases - Tracked D1 databases
• query_history - Query execution history
• saved_queries - User-saved queries

Purpose:

• Store application data
• Track usage
• Persist user preferences

User Databases

• Managed via: D1 REST API
• Access: Dynamic (any database)
• Binding: None (uses HTTP)

Authentication & Security

Authentication Flow

User → Identity Provider (GitHub/Google)
     → Cloudflare Access (JWT)
     → Worker (JWT validation)
     → D1 Manager App

Security Libraries

• jose - JWT validation
• Cloudflare Access - Identity verification
• HTTPS - Enforced by Cloudflare

Security Features

• JWT signature verification
• Token expiration checks
• CORS policies
• SQL injection prevention (prepared statements)
• XSS prevention (React auto-escaping)

APIs & Integrations

External APIs

API	Purpose	Authentication
Cloudflare D1 REST API	Database operations	API Token
Cloudflare Access API	JWT validation	Public keys

API Format

• Protocol: HTTPS
• Format: JSON
• Style: RESTful
• Errors: Standard HTTP status codes

Infrastructure

Hosting

• Frontend: Cloudflare Workers (Assets binding)
• Backend: Cloudflare Workers
• Database: Cloudflare D1
• Authentication: Cloudflare Access
• CDN: Cloudflare (automatic)

Deployment

• Tool: Wrangler CLI
• Config: wrangler.toml
• Assets: dist/ directory
• Secrets: Encrypted worker secrets

Domains

• workers.dev: your-worker.your-account.workers.dev
• Custom: Any domain in Cloudflare

Development Environment

Local Development

• Frontend: npm run dev (Vite on port 5173)
• Backend: npx wrangler dev (Worker on port 8787)
• Database: Mock data (no D1 needed)
• Auth: Bypassed for localhost

Browser Support

Browser	Minimum Version
Chrome	90+
Firefox	88+
Safari	14+
Edge	90+

Requirements:

• JavaScript enabled
• Cookies enabled
• ES2020 support
• CSS Grid support
• Flexbox support

File Formats

Input Formats

• SQL: .sql files (SQLite dialect)
• Config: .toml (Wrangler config)
• Env: .env (environment variables)

Output Formats

• SQL: Database/table dumps
• CSV: Table data export
• ZIP: Bulk exports archive
• JSON: API responses

Version Control

• VCS: Git
• Repository: GitHub
• Branching: main branch
• Tags: Semantic versioning (v1.0.0)

Git Ignore

Key ignored files:

• node_modules/
• dist/
• .env
• wrangler.toml
• .wrangler/

Documentation

Documentation Tools

• Markdown: All documentation
• GitHub Wiki: This wiki
• README.md: Project overview
• Inline Comments: JSDoc-style

Documentation Files

• README.md - Main documentation
• CONTRIBUTING.md - Contribution guidelines
• SECURITY.md - Security policy
• LICENSE - MIT license
• CODE_OF_CONDUCT.md - Community standards
• DOCKER_README.md - Docker deployment

Monitoring & Observability

Built-in Tools

• Wrangler Tail: Real-time logs (wrangler tail)
• Workers Analytics: Request metrics
• Cloudflare Dashboard: Analytics and monitoring
• Access Logs: Authentication events

Metrics Tracked

• Request count
• Error rate
• CPU time
• Duration (p50, p95, p99)
• Authentication events

Alternatives Considered

Frontend Alternatives

Alternative	Why Not Used
Next.js	Overkill for SPA, prefer static build
Vue	Team preference for React
Svelte	Smaller ecosystem
Angular	Too heavy

Backend Alternatives

Alternative	Why Not Used
Node.js + Express	Requires server management
AWS Lambda	Vendor lock-in, cold starts
Vercel Edge	Limited database options
Deno Deploy	D1 integration not available

Database Alternatives

Alternative	Why Not Used
PostgreSQL	Requires server, not edge-native
MongoDB	Not needed, structured data
Durable Objects	Not for relational data
KV	Not SQL-compatible

UI Alternatives

Alternative	Why Not Used
Material-UI	Heavy bundle, opinionated
Ant Design	Chinese-centric, heavy
Chakra UI	Less Tailwind integration
Bootstrap	Outdated, jQuery legacy

Technology Decisions

Why Edge-First

• Low Latency: < 50ms globally
• No Cold Starts: Instant responses
• Automatic Scaling: Handles any load
• Cost Effective: Pay only for usage

Why SQLite (D1)

• Familiar: Standard SQL syntax
• Portable: Easy exports/imports
• Lightweight: Perfect for edge
• ACID: Full transaction support

Why TypeScript Everywhere

• Type Safety: Catch bugs early
• Better DX: Autocomplete, IntelliSense
• Refactoring: Safe and confident
• Documentation: Types as docs

Why shadcn/ui

• Ownership: Copy code, not npm dependency
• Customization: Full control over styling
• Accessibility: Radix UI primitives
• Modern: Latest React patterns

Future Considerations

Potential technology additions:

• React Query: For better data fetching
• Zod: Schema validation
• Vitest: Unit testing
• Playwright: E2E testing
• Sentry: Error tracking
• PostHog: Analytics

Version Information

Current Versions (as of v1.0.0):

• React: 19.2.0
• TypeScript: 5.9.3
• Vite: 7.1.12
• Tailwind: 3.4.18
• Wrangler: 4.45.0
• Node.js: 18+ (LTS)

Next Steps

• Architecture - System architecture
• Local Development - Development setup
• Production Deployment - Deploy to production
• API Reference - API documentation

---

Need Help? See Troubleshooting or open an issue.