Browse pages
Overview
The frontend pages state how the browser and device side of a LiteSpec product is built: its frame, routes, and modules named for the backend use cases they call, the shared components and governed visual language, the interface pattern catalog, and how data, rendering, and testing work, with the React, Svelte, Blazor, and Android bindings that realize them. Frontend teams and agents follow them when they add a route, build a screen, or change shared UI or data code, so every screen answers the same question the same way.
How the Pages Fit Together#
The seven principle pages directly in this folder hold for every frontend, from a web application to a client-only Blazor product or a native Android app. They say what each part owns without naming a framework: structure, routes, components, UI governance, patterns, data, and testing. React and Svelte share the web folder, whose Web overview lists the pages that state the TypeScript bindings both apply, and native apps share the mobile folder, whose Mobile overview does the same for mobile stacks; each stack folder then states only what its own technology adds. Recurring interface questions are decided once in UI Patterns and its pattern pages, which apply with this folder.
Frontend Principles#
- Frontend Structure: frame, routes, and use-case modules, and the module tree that mirrors the backend.
- Frontend Rendering and Routes: route addresses, data loading, and how each route state renders.
- Frontend Components: the shared UI package and how page code composes its parts.
- Controlled UI Governance: the visual authority, the design contract, the floorplans, and the route suite.
- UI Patterns: the catalog that decides each recurring interface question once.
- Frontend Data and State: the generated client, the query cache, command writes, and how failures reach the reader.
- Frontend Testing: unit tests, browser suites, and the contract check for every address.
Shared Web Pages#
- Web overview: the TypeScript pages the React and Svelte stacks both apply, and the two stacks themselves.
Shared Mobile Pages#
- Mobile overview: the pages every native mobile stack applies, and the mobile stacks themselves.
Stacks#
- React Stack: the React binding and its three rendering modes.
- Svelte Stack: the Svelte binding and its three rendering modes.
- Blazor Stack: the client-only domain model, browser persistence, and WebAssembly application.
- Android Stack: the native Android app built with .NET for Android, under the shared mobile pages.