Spider Gym: React SPA Frontend

React 19TypeScript 6ViteTailwind CSS v4React Router v7Vitest

Spider Gym started as a Django monolith with 67 server-rendered templates. The job was to turn that into a typed React SPA without losing the operational surface the gym staff already depended on.

The SPA shipped with 50+ routes across member CRUD, membership management, payments, QR-based check-ins, a receptionist dashboard, and an admin reporting suite. The frontend stack is React 19, TypeScript 6, Vite, Tailwind CSS v4, and React Router v7, with a typed API client that handles CSRF and route protection based on role.

A big part of the value was architectural, not just visual. The frontend became a clean contract for the backend team to build the DRF /api/v2/ layer against in parallel, while Vitest component tests kept the migration from turning into a regression factory.

Key learnings

·Large-scale template-to-SPA migration
·Typed API client design with CSRF handling
·Role-based route protection
·Component testing with Vitest
·Frontend contracts that unblock parallel backend work