Project Detail

Garage Frontend

A single‑page React application (SPA) that provides an administrative and employee-facing UI for managing a garage's customers, employees, vehicles, services and orders. The client renders routes, forms, lists and dashboards and communicat...

Frontend EngineerDuration: 2 monthsType: platform

Key Achievement Metrics

Initial load (estimated)

1.2s

API median latency (estimated)

150ms

Architecture View

Processing state: architecture signal graph is initializing...

Decision Log

Use Zustand with composable slices

Minimal boilerplate, small mental overhead, straightforward selector usage inside components.

Trade-off: Easier developer experience vs limited built-in devtools/features compared to mature Redux middleware (e.g., time-travel, strict immutability). Observability and middleware (logging, persistence) must be implemented ad-hoc.

Cookie-based session (axios { withCredentials: true })

Keeps tokens on server, simplifies client logic for token storage/refresh.

Trade-off: Simpler client implementation vs increased CSRF considerations and host/cookie configuration complexity. Requires server SameSite/CSRF protections.

No centralized API client wrapper (axios used ad-hoc)

Faster initial development and fewer abstraction layers for a small codebase.

Trade-off: Duplicated error handling, inconsistent retry/backoff, and harder to apply cross-cutting features (auth token refresh, request logging) without refactoring.

Architecture Narrative

Challenge

Provides a web UI for operational workflows — user authentication, CRUD for employees/customers/vehicles/services, order creation/processing, and role-based dashboards for admin and employee users.

Solution

Monolithic client-side SPA with a thin REST integration to a separate backend service. Single deployable front-end bundle served statically.

Result

Key measurable signals: Initial load (estimated) (1.2s), API median latency (estimated) (150ms).

Trade-off Matrix

Dimension	Selected Option	Impact	Compromise
State library	Zustand with slices	Minimal boilerplate, fast onboarding, straightforward selectors	Fewer built-in devtools/middleware vs Redux ecosystem
Authentication transport	Cookie-based sessions (server-side)	No client token lifecycle management, server-controlled session invalidation	Requires CSRF mitigation and careful cookie configuration; less portable for APIs consumed by third parties

What I'd Do Differently

Implement a centralized API client layer (axios instance + interceptors) to standardize error handling, implement retries, and inject request instrumentation.

Add structured observability (Sentry + Web Vitals + request tracing) and a lightweight telemetry dashboard to monitor error rate, latency, and adoption of admin/employee flows.