Frontend Tutorial#

Build the matching UI in React + Mantine, following the thinxar/clinic reference. This layer doesn’t write fetch/axios calls by hand — it uses @palmyralabs/palmyra-wire for the transport, @palmyralabs/rt-forms + @palmyralabs/rt-forms-mantine for forms and validation, and @palmyralabs/template-tribble for ready-to-use grid templates.

  1. Project setup — Vite + React 19 + Mantine 8 + the Palmyra frontend libraries, with a /api proxy to the backend.
  2. Store factory — configure PalmyraStoreFactory, wire the error handler, surface useFormstore / useGridstore.
  3. Grid pages — render a SummaryGrid with column definitions, server-side pagination, sort, and search.
  4. Forms and ACL — dialog-form pattern with rt-forms-mantine inputs, useAclAccess gating on permission codes.
  5. Advanced — dashboards, custom grid controls, file upload, workflow UI, Excel export, ACL gating.

The UI never calls axios directly; it passes endpoint paths from a central ServiceEndpoints config into templates, and the store resolves list/read/create/update/delete against the injected factory.

Backward Automatic JPA audit fields 1. Project setup Forward