Spider Gym: React SPA klijent

Uloga: Samostalni · migracija klijentskog sloja · Godina: 2024 - 2025 · Status: isporučeno

ukratko: Migracija aktivne fitnes aplikacije sa 67 Django 5.2 šablona u tipizovan React SPA sa 68 ruta kroz 10 domena. Razvoj protiv json-server mock-a prvo omogućio je paralelnu isporuku klijentskog sloja i pravog DRF /api/v2/ backend-a. Lekcija: tipizovan API klijent plus Vitest pokrivenost pretvaraju veliku migraciju u pregledan, spojiv posao.

Spider Gym je počeo kao Django 5.2 monolit sa 67 server-renderovanih šablona. Posao je bio da se to pretvori u tipizovan React SPA bez gubitka operativne površine od koje zavisi osoblje teretane: CRUD članova, članarine, plaćanja, QR prijava, recepcionerski dashboard i admin izveštaji.

Arhitektura

SPA je isporučen sa 68 ruta kroz 10 funkcionalnih domena (autentifikacija, članovi, članarine, plaćanja, QR prijava, izveštaji, admin alati i još). Stack je React 19, TypeScript 6, Vite 8, Tailwind CSS v4 i React Router v7, sa tipizovanim API klijentom koji rukuje CSRF-om i zaštitom ruta po ulogama.

Pristup je bio mock-API-first. Klijentska aplikacija je koristila json-server mock koji odražava planirani DRF ugovor, što je omogućilo end-to-end razvoj React SPA-a dok je backend tim gradio prave /api/v2/ endpoint-e na istim oblicima. Prebacivanje je bilo zamena osnovnog URL-a.

RBAC postoji na obe strane: Django permisije i custom dekoratori na serveru, React auth context sa isAdmin, isReceptionist i isCashier flagovima plus protected route wrapper-i na klijentu.

QR prijava

Originalni tok prijave u teretani skenirao je QR kodove na serveru sa pyzbar i NumPy. U SPA-u se preselio na html5-qrcode u browseru, što je izbacilo backend iz petlje skeniranja i dalo operaterima trenutni status člana na ekranu.

Klijentska aplikacija

60+ tipizovanih React komponenti i feature stranica, pokrivajući upravljanje članovima, recepcionske tokove, životni ciklus članarina, praćenje plaćanja, QR skeniranje i admin dashboard-e. Stanja učitavanja, skeleton ekrani, error boundary-ji i responzivni layout-ovi na svakoj ruti; React Compiler (babel-plugin-react-compiler) automatski rukuje memoizacijom.

Testiranje

Vitest i React Testing Library pokrivaju kritične tokove migracije: prijava, prijava u teretanu, obnova članarine, plaćanje. TypeScript strict mode kroz codebase; ESLint na klijentu, Ruff na Python strani.

Šta sam izvukao

Ugovori klijentskog sloja odblokiraju backend posao. Tipizovan API klijent koji postoji rano daje backend timu konkretan cilj, a paralelna isporuka postaje moguća kad se taj oblik fiksira. Vitest sloj preko najbolnijih tokova je jeftino osiguranje tokom duge migracije.