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 nad json-server mock-om od prvog dana omogućio je da klijentski sloj i DRF /api/v2/ backend budu isporučeni paralelno. Lekcija: tipizovan API klijent plus Vitest pokrivenost pretvaraju veliku migraciju u pregledan posao koji može da se spaja deo po deo.

Problem

Spider Gym je radio na Django 5.2 monolitu sa 67 serverski renderovanih šablona. Posao je bio da se pretvori u tipizovan React SPA bez gubitka ijednog dela na koji se osoblje oslanjalo: CRUD članova, članarine, plaćanja, QR check-in, dashboard za recepciju i admin izveštaji.

Ograničenja

• Teretana radi. Osoblje koristi sistem svaki dan, pa migracija nije smela da ugasi recepciju.
• Backend nije bio spreman. DRF /api/v2/ endpoint-i su se pravili u isto vreme kad i frontend.
• Tri uloge osoblja (admin, recepcija, blagajna) vide različite delove aplikacije.

Odluke

• Prvo mock API. SPA je koristio json-server mock koji je pratio planirani DRF ugovor, pa su frontend i backend isporučeni paralelno. Prelazak je bio zamena bazne adrese.
• Tipizovan API klijent, napisan rano, rešava CSRF i zajedničke oblike odgovora i dao je backend timu konkretnu metu.
• RBAC na obe strane. Django dozvole i prilagođeni dekoratori na serveru; React auth kontekst sa isAdmin, isReceptionist i isCashier i zaštićene rute na klijentu.
• QR skeniranje je prešlo u browser. Stari tok je dekodirao kodove na serveru uz pyzbar i NumPy. html5-qrcode u browser-u izbacio je backend iz petlje skeniranja i odmah prikazuje status člana.
• React 19, TypeScript 6, Vite 8, Tailwind CSS v4 i React Router v7, a React Compiler rešava memoizaciju.

Ishod

SPA je isporučen sa 68 ruta kroz 10 domena i 60+ tipizovanih komponenti, sa stanjima učitavanja, skeleton ekranima, error boundary-jima i responzivnim rasporedom na svakoj ruti. Vitest i React Testing Library pokrivaju tokove kritične za migraciju: prijavu, check-in, obnovu članarine i plaćanje. Lekcija: frontend ugovor koji postoji rano deblokira backend, a tanak sloj testova nad bolnim tokovima je jeftino osiguranje na dugoj migraciji.