Internal Documentation

Architecture
Blueprint

A comprehensive map of the SynBioReactor 2027 stack. Detailing the frontend, backend services, ports, container topology, and the communication layer between them.

Frontend

Port: 4321 Container: web

The primary marketing and user-facing application built on Astro and React. Uses Tailwind CSS for the aesthetic system (dark theme, orange glow). Powered by Bun for fast builds.

  • Tech: Astro, React, Tailwind CSS, Bun
  • Env Vars: RENDER_SERVICE_URL, API_BASE_URL
  • Role: Serves public pages, handles UI state, fetches data from backend.

Backend Services

Port: 8080 Container: render-service

The core infrastructure powering heavy operations. The render-service utilizes headless browsers and image processing to generate dynamic assets like tickets or PDFs.

  • Tech: Node.js, Express, Playwright, Sharp
  • Env Vars: WEB_RENDER_ORIGIN, PORT
  • Role: Headless rendering, image processing, complex API endpoints.

Communication Design

Following established API design principles, the frontend and backend communicate securely over RESTful endpoints. The architecture is stateless and decoupled.

1

RESTful Paradigm

Uses standard HTTP verbs (GET, POST). Endpoints represent resources following a resource-oriented architecture.

2

JSON Payloads

Data is strictly exchanged via application/json format. Request payloads are validated via Zod on the server.

3

Internal Network

Through Docker Compose, the web container talks to render-service:8080 directly without traversing the public internet.

Web Client (Port 4321)

Astro API Routes & React

POST /api/render
Render Service (Port 8080)

Express & Playwright

200 OK (Buffer)