I designed and built the Pristine Admin console, the back-office application that controls all master data behind a manufacturing plant's production system.

The challenge was that master data in a factory setting is unforgiving. A mistyped grade name or a deleted material silently breaks months of historical production records, so the panel had to make the right action easy and the destructive action impossible. I built it as a deliberately constrained interface: records can be deactivated but never deleted, every write is validated on both sides, and access is restricted to admin roles at the authentication layer rather than just hidden in the UI.

The console manages seven resources across the plant: ball mills, ball mill grades, raw material grades, materials, suppliers, users, and raw material recipes. The recipe builder was the most interesting piece. Each raw material grade needs a formula defining how many kilograms of each material go into one batch, so I built a nested form that pulls live material options, enforces a single recipe per grade by filtering out grades already configured, and validates quantities inline. Because the backend keys recipes by grade rather than by their own ID, I mapped the resource identity in the data layer so the standard list, create, and edit flows work transparently over a non-standard endpoint shape.

Most of the engineering went into the data provider. The existing API returns enveloped responses and full collections rather than paginated ones, so instead of reshaping a working production API I wrote a provider that adapts to it: a client-side query engine handling full-text search, boolean filtering, multi-field sorting, and pagination, plus a per-resource field allowlist that strips any key the backend validators would reject before a request goes out. Delete operations throw by design, pointing the user to deactivation instead.

Authentication runs through the same JWT service as the operator app, but the console rejects any account without an admin role at login and re-verifies that on every route change, clearing the session automatically on a 401 or 403. I finished it with a custom MUI theme and layout: an indigo and teal palette, a gradient-washed background, softened surfaces and radii, and a collapsible sidebar reworked to show clean centered icons rather than clipped labels when narrowed.

Tech Stack: React 19, TypeScript, React-Admin 5, MUI 7, Tailwind CSS v4, Vite, Vercel.