System Architecture

System Overview

graph LR
  subgraph Client["Client Layer"]
    Web["Astro SSR<br/>(Cloudflare Pages)"]
    Admin["Admin CMS<br/>(React islands)"]
  end
  subgraph API["API Layer (future)"]
    Elysia["Elysia on Bun<br/>REST + WebSocket"]
  end
  subgraph Data["Data Layer"]
    PG[("PostgreSQL")]
    Redis[("Redis")]
    GCS[("GCS / R2")]
  end
  subgraph External["3rd Party"]
    PAYUNi["PAYUNi"]
    Maps["Google Maps"]
    AI["Claude API"]
  end
  Web --> Elysia
  Admin --> Elysia
  Elysia --> PG
  Elysia --> Redis
  Elysia --> GCS
  Elysia --> PAYUNi
  Elysia --> Maps
  Elysia --> AI

Order Flow

stateDiagram-v2
  [*] --> JobPosted: Employer Posts Job
  JobPosted --> Matching: AI Matching
  Matching --> Applied: Pilot Applies
  Applied --> Accepted: Employer Accepts
  Accepted --> Paid: PAYUNi Escrow
  Paid --> InProgress: In Progress
  InProgress --> Delivered: Deliverables Submitted
  Delivered --> Confirmed: Employer Confirms
  Confirmed --> Released: Payment Released
  Released --> Reviewed: Mutual Review
  Reviewed --> [*]
  InProgress --> Disputed: Dispute
  Disputed --> Resolved: Platform Mediation
  Resolved --> Released

Page Structure

graph TD
  Home["/ Home"] --> PilotList["/pilots Pilot List"]
  Home --> JobList["/jobs Job List"]
  Home --> About["/about About"]
  Home --> Arch["/architecture Architecture"]
  PilotList --> PilotDetail["/pilots/:id Pilot Detail"]
  JobList --> JobDetail["/jobs/:id Job Detail"]
  Home --> Auth["/login Login"]
  Auth --> Dashboard["/dashboard Dashboard"]
  Dashboard --> DashPilot["Pilot Dashboard"]
  Dashboard --> DashEmployer["Employer Dashboard"]
  Dashboard --> DashOrders["Order Management"]
  Dashboard --> DashPayment["Payment Records"]

Tech Stack

Layer	Technology	Purpose
Runtime	Bun	High-performance JS runtime
Framework	Astro 6 (SSG)	Islands architecture
UI Islands	React 19	Interactive components
Styling	Tailwind CSS 3	Utility-first CSS + dark mode
Diagrams	Mermaid.js	Architecture visualization
Deployment	Cloudflare Pages	Edge-deployed static hosting
Payment	PAYUNi	Escrow payment gateway

Layer Explanation

Client Layer

Astro SSG generates static HTML at build time, deployed to Cloudflare Pages for global edge delivery. React islands handle interactive components.

API Layer (Future)

Elysia on Bun provides REST endpoints and WebSocket connections for authentication, matching, orders, and payments.

Data Layer

PostgreSQL for relational data, Redis for caching and sessions, GCS/R2 for file storage.

3rd Party

PAYUNi for escrow payments, Google Maps for location services, Claude API for AI matching.

FlyMatch Demo