Frontend Overview
The Hallo Stroke React SPA — structure, stack, and routing.
The frontend (hallo-stroke-bunny) is a mobile-first React SPA in Bahasa Indonesia for stroke survivors, caregivers, and admins.
Tech stack
| Concern | Technology |
|---|---|
| Framework | React 18.2 (Create React App) |
| Routing | react-router-dom 6.25 |
| HTTP | axios 1.10 (single instance + interceptors) |
| Styling | Tailwind CSS 3.4 |
| Icons | lucide-react, react-icons |
| Rich text | react-quill 2.0 (article content) |
| Maps | leaflet + react-leaflet |
| Push | Web Push API (VAPID), native PushManager |
| Analytics | Umami |
| State | React Context (AuthContext, SearchContext) — no Redux |
Project structure
src/
├── App.js # all routes (flat, no lazy loading)
├── index.js # entry; unregisters service workers
├── api/axios.js # axios instance + 401 refresh interceptor
├── contexts/
│ ├── AuthContext.js # login/logout/refresh/fetchUser, JWT in localStorage
│ └── SearchContext.js
├── hooks/
│ └── useActivity.js # activity logging (user + admin)
├── push/registerPush.js
├── utils/ # image URLs, timezone, random thumbnails, log helpers
├── components/modals/ # EditThreadModal, DeleteThreadModal
├── superAdmin/ # raw SQL panel
└── ~55 page components # flat, admin pages prefixed Admin*Page-centric, minimal reuse
Pages are flat in src/ with no pages/ folder. Admin pages are prefixed Admin*. Most UI is inline Tailwind per page — there is little shared component abstraction.
Routing
Routes are defined as a flat list in src/App.js. There is no code-splitting or lazy loading. Admin routes are gated by a role === "admin" check against the profile. The superadmin panel (/superadmin) is entirely separate, with its own bare axios instance and superadmin_token in localStorage.
See Features for the full route inventory.