Monolithic Prototype Implementation

This document details the creation of the rapid monolithic prototype built using native Cloudflare Worker routing and D1 database queries.

Prototype Components

The prototype was constructed by overwriting the entrypoint at index.ts:

1. Web Page & Login (GET /)

• Login View: Shows a beautiful, dark-themed login form that accepts dummy credentials.
• Dashboard View: Displays once logged in, featuring:
  • Dynamic statistic counters for total stages and bands.
  • Interactive, spreadsheet-like HTML tables for Stages and Bands.
  • Compact inline forms to submit new stages and bands without reloading the page.
  • Micro-animations for buttons and hover states, and a visual toast notification system.

2. API Endpoints

• GET /api/data:
  • Automatically verifies and seeds a default festival (Bloodstock Open Air 2026) if the database is empty.
  • Fetches and returns JSON of all current festivals, stages, and bands.
• POST /api/stages:
  • Accepts a JSON payload ({ name }).
  • Verifies if the stage already exists for the active festival and inserts it into D1 if unique.
• POST /api/bands:
  • Accepts a JSON payload ({ name }).
  • Checks if the band is already registered and inserts it if unique.
• GET /api/health:
  • Fallback service health check endpoint.

3. Client Interaction Model

The embedded HTML interface communicates asynchronously with the APIs using standard JavaScript DOM fetch() API calls:

// Adding a Stage example
const response = await fetch("/api/stages", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name })
});

---

Compiler Adjustments

• Modified tsconfig.json to update moduleResolution to "bundler".
• Verified type check passes successfully without errors using npx tsc --noEmit.