Case Study
LearnNest
A school management system with three separate portals and integrated fee payments.
The Problem
Manual academic processes, paper-based fee collection, grade sheets passed by hand, course registration via physical forms, create bottlenecks for schools trying to scale. LearnNest needed a platform that digitised every step while keeping each actor's surface area simple and separate.
Key Technical Decisions
Used role-based routing with three completely separate layout trees — Admin, Teacher, Student each had their own layout component. This prevented accidental cross-role UI bleed and made the codebase easier to reason about.
TanStack React Table was chosen for grade sheets and enrollment lists — these tables needed sorting, filtering, and pagination against large datasets, which basic HTML tables couldn't handle.
Paystack was used for fee payments with a webhook-driven status update — we didn't trust client-side payment confirmation, so fee status only changed on successful webhook receipt.
Challenges & Solutions
Challenge
Students needed to see their payment status in real time after completing a Paystack transaction, but webhooks are asynchronous.
Solution
Implemented a polling mechanism — after Paystack redirect, the client polled the fee status endpoint every 2 seconds for up to 30 seconds, showing a 'confirming payment' state in the UI.
Outcome
Delivered a working three-portal system with live fee processing. The role separation pattern from this project became a template I've reused in subsequent multi-actor products.
What I Learned
Multi-role products need to be designed role-first, not feature-first. Every time I added a feature without thinking 'which role sees this?', I created confusion I had to untangle later.