Frontend

The frontend in the AI-Driven Development Model is built on React + TypeScript + Vite, with shadcn/ui on Base UI + Tailwind CSS as the component layer, and a typed OData v4 data-access layer fed by CAP.

Building block	Content
Unified Shell	The application frame: navigation, the region layout (main navigation · left pane · focus pane · right pane), the command surface, and — in the device build — sync state
React & shadcn/ui	The component layer: React + TypeScript + Vite, shadcn/ui on Base UI + Tailwind, annotation-driven Fiori building blocks, data access, tables, and state

Not classic Fiori

We stay on React — not SAP Fiori elements, not freestyle UI5 applications.

Application frame

Every app runs inside the same Unified Shell — one frame for phone, tablet, desktop, and wide screen. It defines regions, not layouts: a feature contributes content to a region, never a layout of its own, and the form factor only changes how those regions are arranged.

Fiori floorplans without UI5

On the React & shadcn/ui path you still get annotation-driven Fiori floorplans (list report, object page, value helps) via the React Fiori building blocks, fed by CAP's Fiori annotations. The floorplan productivity does not require UI5.