Introductie

Concept & Visie

Beam is een SaaS pagebuilder waarmee kleine ondernemers zonder technische kennis een professionele website bouwen. Het platform combineert een visuele editor met een curated design system — de filosofie is “you can’t make it ugly.” Elke website die met Beam gebouwd wordt, ziet er professioneel uit omdat het systeem slecht design onmogelijk maakt.

Positionering:

	Dashboard & Editor	Gepubliceerde site	Hosting
Squarespace	React SPA	Java server → HTML	Eigen infra
Webflow	React SPA	Static HTML export	AWS + eigen CDN
Beam	React SPA	Astro SSR (~4 KB JS)	100% Cloudflare edge

Het verschil zit in de gepubliceerde site: Squarespace rendert server-side met Java, Webflow exporteert statische HTML, Beam rendert on-the-fly met Astro SSR op de edge (~4 KB JavaScript vs ~300 KB+ bij traditionele SPA’s). Alle drie gebruiken React SPA’s voor hun editor/dashboard — Beam bouwt met Vite (snellere builds), maar dat is een tooling-keuze, geen fundamenteel architectuurverschil.

Doelgroep

• MKB-ondernemers — yoga docenten, fotografen, restaurants, consultants
• Freelancers die een portfolio of diensten-site nodig hebben
• Kleine teams (2-5 personen) die samen aan een site werken
• Geen developers — Beam doet het design, de gebruiker levert de content

Status & Roadmap

Voltooide fases:

Fase	Wat	Status
0	Security hardening (XSS, RLS, CSP, monitoring)	Voltooid
1	Astro publieke site (monorepo, blocks, routing, custom domains)	Voltooid
2	Hono API (routes, auth, R2 media, team management)	Voltooid
3	Vite SPA dashboard (React Router, CF Pages)	Voltooid

Post-migratie:

• 172 ESLint warnings naar 0 — voltooid
• Error monitoring (Sentry) — voltooid
• E2E tests (21 Playwright tests) — voltooid
• Rate limiting — voltooid
• Structured logging — voltooid
• Blur placeholders (CF Image Resizing) — voltooid

Zie Backlog & Beslissingen voor openstaande items.

Architectuur Diagram

                    ┌─────────────────────────────────────────┐
                    │              Cloudflare                   │
                    │                                           │
  Gebruiker ───────▶│  ┌─────────────┐    ┌─────────────────┐  │
  (browser)         │  │  CF Pages   │    │   CF Workers    │  │
                    │  │             │    │                 │  │
                    │  │  Dashboard  │───▶│   Hono API      │  │
                    │  │  (Vite SPA) │    │                 │  │
                    │  │             │    │  ┌───────────┐  │  │
                    │  └─────────────┘    │  │ R2 Bucket │  │  │
                    │                     │  └───────────┘  │  │
  Bezoeker ────────▶│  ┌─────────────┐    │                 │  │
  (publiek)         │  │  CF Pages   │    └────────┬────────┘  │
                    │  │             │             │            │
                    │  │ Public Site │             │            │
                    │  │  (Astro)    │             │            │
                    │  └──────┬──────┘             │            │
                    └─────────┼────────────────────┼────────────┘
                              │                    │
                              ▼                    ▼
                    ┌─────────────────────────────────────────┐
                    │            Supabase                       │
                    │                                           │
                    │  PostgreSQL · Auth · Realtime · Storage   │
                    └─────────────────────────────────────────┘

Voor Nieuwe Developers

Start hier:

1. Deze pagina — product overzicht en architectuur
2. Glossarium — termen en definities
3. Bedrijfslogica — business rules, rollen, quota’s
4. Technische Stack — architectuur en implementatie

Per onderdeel:

• Werken aan de editor? → Functionaliteit + Block Types
• Database wijziging? → Data & Architectuur
• Nieuwe integratie? → Integraties
• Waarom is X zo gebouwd? → Backlog & Beslissingen (ADR’s)
• Wat is recent gewijzigd? → Changelog

Documentatie Structuur

Document	Beschrijving
Bedrijfslogica	Pricing, quota’s, rollen, limieten, domeinregels
Functionaliteit	Editor, pages, media library, navigatie, publieke site
Block Types	Schema en props van alle 8 block types
Data & Architectuur	Database schema, RLS policies, SQL helpers, opslag
Technische Stack	Dashboard, API, public site, state management, CI/CD
Integraties	Supabase, Cloudflare, Resend, Unsplash, Pexels, Sentry, Bunny
Backlog & Beslissingen	ADR’s, openstaande vragen, geprioriteerde backlog
Vision	Gilden, AI content, addons, community, interaction design
Changelog	Significante wijzigingen per periode
Glossarium	Definities van veelgebruikte termen