Skip to main content

Front-end documentation

The Model City front-end is a Next.js 16 (App Router) application that consumes the @modelcity/* platform packages from the npm registry, with build-time module selection (modelcity gen) and a per-city overrides/ extension mechanism. A concrete city's app is scaffolded with create-model-city-app.

This documentation has three subsections:

Architecture​

How the front-end is put together: the npm-workspaces monorepo, the modular package split and codegen, rendering (RSC + Server Actions), i18n, auth & roles, the data/API layer, the design system, AI translation, and publishing. Start with the Architecture overview.

Atomic Design​

The one-page-per-component reference for the design system — every atom, molecule, organism, template and provider (all 142 components), verified against the real packages/* source. Start with the component overview.

Extensibility Guide​

How a city replaces or adds any module file — a component, a screen, a server action, an API client, the proxy, globals.css, i18n, navigation, roles… — through the overrides/ layer, with one worked, copy-ready example per kind of customisation. Start with the extensibility overview.