Dev Portal

A React single-page application serving as a central hub for multiple services, deployed on Cloudflare Pages.

Live at databookman.com

Tech Stack

• React 19 with TypeScript
• Vite 6 (build tooling, dev server, PWA plugin)
• Material-UI 5 (component library)
• GSAP and Framer Motion (animations)
• React Router 7 (client-side routing)
• Vitest + Testing Library (unit/integration tests)
• Playwright (end-to-end tests)
• Rust (systems tooling)

Architecture

Client -> Cloudflare Pages -> React SPA (static files)

The SPA is built with Vite and deployed as static assets to Cloudflare Pages. A client-side warmup mechanism sends pings to backend services on page load (see warmup.json).

Project Structure

dev-web/
  src/
    components/     # UI components (SplitText, LinksGrid, AnimatedBackground, etc.)
    hooks/          # Custom React hooks (useServices, useSafeTimeout, useWarmup)
    icons/          # SVG icon components
    assets/         # Static assets
    msw/            # Mock Service Worker handlers for tests
    App.tsx         # Root application component
    main.tsx        # Entry point
  tests/
    e2e/            # Playwright end-to-end tests
  public/
    services.json   # Service link definitions loaded at runtime
    warmup.json     # Backend URLs to ping on page load
  vite.config.ts    # Vite + Vitest configuration
.github/workflows/
  ci.yml            # Lint, unit tests, build, deploy
  deploy.yml        # Build and deploy to Cloudflare Pages

Getting Started

Prerequisites: Node.js 22, npm 10+

cd dev-web
npm ci
npm run dev        # Start dev server (http://localhost:5173)

Testing

npm test                # Run unit/integration tests
npm run test:watch      # Watch mode
npm run test:coverage   # Coverage report (85% threshold)
npm run e2e             # Playwright end-to-end tests
npm run e2e:headed      # E2E in headed browser
npm run verify          # Lint + test + build (full check)

Deployment

Merges to main trigger the GitHub Actions deploy workflow, which:

1. Installs dependencies and builds the Vite project
2. Deploys the dist output to Cloudflare Pages via Wrangler

The workflow requires a repository secret CLOUDFLARE_API_TOKEN and a repository variable CLOUDFLARE_ACCOUNT_ID.

License

Copyright 2025 Databookman by Ben Lai.