Hub Frontend: Building an Event Production Management Dashboard
What Is Hub Frontend?
Hub Frontend is an internal operations dashboard built for managing event production logistics. Think of it as a control centre for a production company — every piece of equipment, every cable run, every event manifest, and every asset checkout is tracked and managed from a single interface.
It's live at www.dispatchjpl.co.ke.
The Problem It Solves
Event production is inventory-intensive. Before an event, teams need to know:
- Which equipment is available vs. already checked out?
- Which cables are assigned to which event?
- What does the full event manifest look like?
- Who checked out what, and when?
Managing this in spreadsheets is error-prone and slow. Hub Frontend replaces that with a structured, real-time web interface.
Tech Stack
- React + Vite — Fast SPA with hot module replacement
- React Router v6 — Client-side routing with protected routes
- Tailwind CSS v4 — Utility-first styling
- @dnd-kit — Drag-and-drop for manifest ordering and equipment sorting
- Axios — API communication with the backend
- React Context — Auth state management
Application Structure
src/
├── views/
│ ├── Dashboard.jsx # Overview and KPIs
│ ├── EquipmentList.jsx # All equipment inventory
│ ├── EquipmentCreate.jsx # Add new equipment
│ ├── CableList.jsx # Cable inventory
│ ├── CableCreate.jsx # Add new cables
│ ├── EventsList.jsx # All events
│ ├── EventCreate.jsx # Create a new event
│ ├── EventManifest.jsx # Full event manifest view
│ ├── EventCheckout.jsx # Asset checkout for an event
│ ├── AssetHistory.jsx # Audit trail for assets
│ ├── MasterReport.jsx # Cross-event reporting
│ ├── FireworksHistory.jsx # Specialised pyrotechnics log
│ ├── ToolsEquipmentHistory.jsx
│ ├── FAQ.jsx
│ └── Login.jsx
├── components/
│ ├── Navbar.jsx
│ └── ProtectedRoute.jsx
├── context/
│ └── AuthContext.jsx
├── api/ # Axios API modules
├── hooks/ # Custom React hooks
└── data/ # Static/seed data
Key Features
Protected Routes & Auth
All views sit behind ProtectedRoute — a wrapper that checks AuthContext before rendering. Unauthenticated users are redirected to /login. The auth state is provided globally via React Context, avoiding prop drilling across the deep component tree.
<Route
path="/dashboard"
element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
}
/>
Drag-and-Drop with @dnd-kit
The event manifest view uses @dnd-kit/sortable to let users reorder equipment items in a manifest by dragging. This is preferable to a raw HTML5 drag API because dnd-kit handles accessibility (keyboard navigation, screen reader announcements) out of the box.
Master Report
The MasterReport view aggregates data across multiple events — giving production managers a bird's-eye view of equipment utilisation, checkout frequency, and asset history. It's the most data-heavy view in the app and uses custom hooks to fetch and memoize the report data.
Specialised Logs
The FireworksHistory and ToolsEquipmentHistory views are purpose-built logs for specific asset categories — recognising that pyrotechnics and tools have distinct tracking requirements from general A/V equipment.
Deployment
The app is deployed on Vercel with a vercel.json that handles SPA routing — ensuring direct URL access to any route returns index.html rather than a 404:
{
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
What I Learned
Building internal tooling is a different discipline from building public-facing products. The users are power users — they don't need hand-holding, they need speed and density. Every design decision leaned toward data density over visual polish, which is a useful muscle to develop alongside consumer-facing UI work.