⚡ SONAN TECH

Location Launchpad Docs

Technical Guide← Docs Home

Technical Guide

Architecture, file structure, API overview, and data flow for SONAN Location Launchpad.

Architecture Overview

The application is a pure HTML/CSS/JS frontend served by Cloudflare Pages, backed by Cloudflare Functions (serverless) and Cloudflare D1 (SQLite-compatible database at the edge).

  • No build step required — files are served as-is
  • No external dependencies — everything runs on Cloudflare infrastructure
  • No Node.js runtime needed for hosting — Cloudflare Workers runtime
  • D1 is accessed via the DB binding injected by Cloudflare into Function context

File Structure

sonan-location-launchpad/
├── src/                      # Static frontend (served as root)
│   ├── assets/
│   │   ├── style.css         # Global styles
│   │   └── app.js            # Shared JS utilities, API helper
│   ├── index.html            # Dashboard
│   ├── locations.html        # Location list + create
│   ├── location-detail.html  # Location tasks, budget, progress
│   ├── tasks.html            # All tasks (cross-location)
│   ├── budget.html           # Budget overview
│   ├── reports.html          # Reports
│   ├── templates.html        # Task template management
│   ├── settings.html         # Settings
│   └── login.html            # Fallback password login
├── functions/api/            # Cloudflare Functions (API endpoints)
│   ├── _middleware.js        # Auth middleware
│   ├── auth.js               # POST /api/auth
│   ├── dashboard.js          # GET /api/dashboard
│   ├── locations.js          # GET/POST /api/locations
│   ├── locations/[id].js     # GET/PUT/DELETE /api/locations/:id
│   ├── tasks.js              # GET/POST /api/tasks
│   ├── tasks/[id].js         # PUT/DELETE /api/tasks/:id
│   ├── budget.js             # GET/POST /api/budget
│   ├── budget/[id].js        # PUT/DELETE /api/budget/:id
│   ├── templates.js          # GET/POST /api/templates
│   └── reports.js            # GET /api/reports
├── db/
│   ├── migrations/001_schema.sql
│   └── seed/seed.sql
├── docs/                     # Documentation HTML pages
├── wrangler.toml
└── package.json

API Overview

MethodEndpointDescription
GET/api/dashboardStats + location cards
GET/POST/api/locationsList/create locations
GET/PUT/DELETE/api/locations/:idGet/update/delete location
GET/POST/api/tasksList tasks (with filters), create task
PUT/DELETE/api/tasks/:idUpdate/delete task
GET/POST/api/budgetList budget items, create item
PUT/DELETE/api/budget/:idUpdate/delete budget item
GET/POST/api/templatesList/create task templates
GET/api/reportsReports with type query param
POST/api/authFallback password authentication

Security Overview

  • Primary auth: Cloudflare Zero Trust Access (email OTP)
  • Fallback auth: ADMIN_PASSWORD env var — checked in _middleware.js
  • Auth token stored in localStorage as base64 of password (fallback only)
  • All API routes are protected by the middleware
  • D1 database is only accessible from Functions — not directly from the browser

Auto-Task Generation

When a new location is created (POST /api/locations), the API immediately inserts tasks from task_templates into the tasks table using a single INSERT ... SELECT statement. This is atomic — if the location insert fails, no tasks are created.