Architecture & stack
A single-page application built on TanStack Start with file-based routing. The proof-of-concept runs entirely on simulated, in-memory data.
Stack
| Layer | Technology |
|---|---|
| Framework | TanStack Start v1 (React 19, SSR-capable) |
| Build tool | Vite 7 |
| Routing | TanStack Router (file-based, src/routes) |
| Data fetching | TanStack Query |
| Styling | Tailwind CSS v4 via src/styles.css |
| UI components | shadcn/ui (src/components/ui) |
| Icons | lucide-react |
| Backend (available) | Lovable Cloud (Supabase) — not required by the POC |
Four layers, one ecosystem
The app is organised as four route trees that share the same data and design tokens:
- Founder —
/and/founder, wrapped by a branded shell. - Coordinator —
/coordinator/$streamId/*with a per-stream sidebar. - National layer (EI) —
/ei/*with role-gated navigation. - Admin (SI Admin) —
/si-admin/*, gated to the Startup Czechia Admin role.
Routing model
Routes are files in src/routes. Dots become slashes, index.tsx is the leaf, and $param marks a dynamic segment. A layout route (for example ei.tsx) renders an <Outlet /> for its children. The route tree in src/routeTree.gen.ts is generated automatically and must not be edited by hand.
State management
The proof-of-concept keeps state in lightweight client-side stores under src/lib/poc. Examples:
ei-roles.ts— the active “viewing as” role, persisted to local storage.headline-store.ts— editable headline figures shared across screens.coordinator-context.ts— the active delivery partner per stream.nation-profile.ts— the active nation’s labels and colours.
Roles & access
Six roles are defined in src/lib/poc/ei-roles.ts: Executive, COO, Head of Growth, Stream Manager, Startup Management and Startup Czechia Admin. The national-layer sidebar filters its navigation by role via a NAV_ACCESS map, and the admin console is gated to the Startup Czechia Admin role. This is a demonstration of role-based UI, not enforced security.