Challenge
The product needed to feel simple for public renters while supporting deep operational workflows for schools, agents, finance, disputes, reports, and platform admins.
Booking Platform
Open School Field
A role-based frontend for booking school sports and event facilities across Oyo State, built for renters, schools, agents, super-agents, and admins.
-gsQYUSLR.png)
Approach
I structured the frontend around TanStack Router route groups, a contract-first service layer, TanStack Query cache boundaries, and reusable portal patterns. The mock API keeps the UI fully usable without a backend, while the service contract keeps the handoff ready for ASP.NET Core endpoints.
Outcome
The result is a full product frontend with public discovery, authenticated booking flows, multi-role dashboards, offline/PWA support, realtime hooks, monitoring abstraction, and English to Yoruba language switching.
Technical decisions
The judgment behind the interface.
Routing
File-based TanStack Router routes separate renter, school, agent, and admin areas while keeping shared UI patterns reusable.
Data Layer
A service contract lets the frontend run fully on mock data while staying ready for an ASP.NET Core API handoff.
Localization
English and Yoruba language switching makes the booking flow more useful for local users who may not prefer English.
Screens
Interface signals.
5 role families47 UI primitivesEnglish/YorubaMock/live API ready
-CEO0x7fE.png)
-Cksvn6Kv.png)
-CvYtc23r.png)
-C7rTihxH.png)
-DBFf0XkD.png)
-B3pdL-9M.png)
-BCtvTd23.png)
-DNx_5rsS.png)
-C5n7WdkP.png)