Purchase order and product catalog management — full CRUD, status changes, and automatic total calculation.
Built as a technical test for a job interview process: given a spec with two required views (order list and add/edit) plus extra points (product CRUD, status changes, blocking edits on completed orders), build the frontend consuming a custom API. It also doubled as practice for a real stack migration (JS → TS, npm → pnpm, Bootstrap → Tailwind/shadcn) on a project that was already up and running, not built from scratch.
| Layer | Technology |
|---|---|
| Frontend | React 19 + TypeScript, Vite, Tailwind CSS v4, shadcn/ui (Radix UI), TanStack React Query, React Router, Axios, Sonner |
| Backend | .NET 8 (C#), Clean Architecture (Api / Application / Domain / Infrastructure), FluentValidation, AutoMapper, Serilog |
| Database | MySQL (Pomelo.EntityFrameworkCore.MySql) |
| Auth | Not required — endpoints are public per the spec |
| Deploy / Infra | Frontend: Netlify · Backend: Azure App Service |
- Layered backend (Domain / Application / Infrastructure / Api) with repositories + AutoMapper for entity-to-DTO mapping, and FluentValidation for input business rules.
- Real pagination on list endpoints (
PagedResult<T>withpage,pageSize,totalCount), consumed from the frontend without leaking pagination details to the rest of the app. - Typed service layer on the frontend (
src/services/ordersApi.ts,src/services/productsApi.ts) separating HTTP calls from the rest of the components, with dedicated React Query hooks (src/hooks/) for server-state caching instead of manualuseState+useEffect. - Custom design system ("Modernist") applied as CSS tokens on top of shadcn/ui — a single accent color, zero border radius, Archivo typography — to avoid relying on the component library's generic default look.
- Backend unit tests with xUnit + Moq.
- Problem: the backend added pagination to the list endpoints and the frontend kept treating the response as a plain array — it broke silently as soon as there was more than one page of data. Solution: unwrapping
.itemswas centralized inside the service layer, so the rest of the app keeps receiving a plain array. Why: it keeps individual components from needing to know about pagination, and prevents the bug from resurfacing elsewhere. - Problem: migrating from Bootstrap to Tailwind CSS v4 module by module, without being able to drop Bootstrap all at once because parts of the app still depended on it. Both frameworks define global resets that stepped on each other. Solution: Bootstrap was isolated into its own lower-priority layer using CSS Cascade Layers (
@layer bootstrap, theme, base, components, utilities). Why: it allowed migrating one component at a time without visually breaking either the ones already migrated or the ones still pending. - Problem: the repo had been saved with the entire project nested inside a subfolder, and the
.envfile with the production URL had been committed. Solution: the structure was flattened while preserving git history (git mv), the.envwas untracked, and the project was migrated to pnpm + TypeScript incrementally (allowJs) without blocking ongoing development. Why: clean up the foundation before adding more functionality, instead of piling up debt on top of a broken structure. - Problem: the spec required that the modal for editing a product already in an order only allow changing the quantity, not the product itself. Solution: the product
Selectis automatically disabled whenever the modal opens in edit mode. Why: it prevents a quantity edit from accidentally swapping out the line's product.
- Technical documentation — folder structure, patterns, and the reasoning behind the main technical decisions.
Requires the backend running alongside it (MySQL + .NET 8).
git clone https://github.com/Carlou134/OrderManagementFrontEnd.git
cd OrderManagementFrontEnd
pnpm install
cp .env.example .env.development # point VITE_API_URL to your local backend
pnpm devRun the test suite (Vitest + React Testing Library, no backend required — the service layer is mocked):
pnpm test