Fort Jesus Dashboard: React Admin Portal for Museum Operations
What Is Fort Jesus Dashboard?
fortjesusDashboard is the primary interface for museum staff and administrators managing operations at Fort Jesus Mombasa. Built to communicate with a secure backend API, it handles complex authentication flows, booking state transitions, analytics, and user management.
This internal tool replaces manual tracking, providing staff with a real-time view of daily visitors, night tour capacities, and revenue analytics.
Tech Stack
| Layer | Technology |
|---|---|
| Frontend | React 19 + TypeScript |
| Build Tool | Vite |
| Styling | Tailwind CSS 4.0 (OKLCH tokens) |
| UI Components | Radix UI Primitives |
| Data Fetching | Axios + TanStack React Query v5 |
| Charts & Icons | Recharts + Lucide React |
| Auth | Google OAuth 2.0 (via backend) |
Architecture & Features
The dashboard is structured around role-based modules, ensuring that moderators can handle day-to-day operations while sensitive financial data remains restricted to administrators.
Authentication & API Security
Security is a top priority for this internal tool:
- Google OAuth 2.0: Staff log in via Google, handled seamlessly by backend callbacks.
- Token Management: The app relies on HttpOnly cookies (
auth_tokenandrefresh_token). An Axios interceptor automatically catches401 Unauthorizedresponses and queues a token refresh, replaying failed requests without interrupting the user. - CSRF Protection: A CSRF token is fetched on initialization and injected into the
X-CSRF-Tokenheader for all mutating requests.
Role-Based Access Control (RBAC)
The application enforces strict access controls using a <ProtectedRoute> component wrapping React Router routes:
- Moderators can view the dashboard, manage bookings, and update booking statuses.
- Admins have full access, including the revenue analytics charts, user management (adding/removing staff), and the ability to hard-delete records.
Booking Management & State Machine
Booking transitions (e.g., Pending → Confirmed → Completed) are enforced client-side via an ALLOWED_TRANSITIONS map that perfectly mirrors the backend's state machine. This prevents staff from making invalid operational updates.
What I Learned / Engineering Decisions
One of the most interesting challenges in building this dashboard was implementing a robust Axios interceptor for silent token refreshes. By using a queue-based approach, if multiple concurrent API requests fail due to an expired token, they all wait while a single refresh request fires. Once the new token is secured, all queued requests are successfully replayed, creating a frictionless experience for the museum staff.
Additionally, leveraging TanStack React Query v5 dramatically simplified caching, background refetching, and pagination state, allowing the dashboard to feel incredibly snappy even when handling hundreds of booking records.