WeConnect 2.0
A three-role community platform — youth portal, admin dashboard, staff tools — built pixel-perfect from Figma and tuned for low-bandwidth field devices.
3
User roles served
0
Design defects reported
0
Milestones missed
The problem
A non-profit's field staff tracked youth programs on paper and disconnected tools. They needed one platform serving three very different users — youth members, program staff, and admins — that stays fast on cheap Android phones with patchy connectivity, and matches the funded design spec exactly.
Architecture
- Role-aware component architecture: one codebase renders three distinct experiences from a shared design system, with route-level code-splitting per role.
- Dynamic data tables with multi-column sorting, filtering, and server-side pagination — the server does the heavy lifting so low-end devices never hold full datasets in memory.
- Zustand for state with selective subscriptions: components re-render only on the slices they read, not on every store write.
- Centralised Axios interceptors inject auth tokens and normalise error handling once, instead of per-request boilerplate across dozens of API modules.
- React.memo + lazy-loaded routes keep the interactive bundle minimal; heavy admin views never ship to youth users.
Key engineering challenges
Fast on low-bandwidth field devices
The real users are field staff on budget phones. Server-side pagination, selective store subscriptions, and route-level lazy loading kept interactions responsive where a naive client-side table would have frozen the UI.
Zero design-drift across three roles
Funders signed off on the Figma. I maintained pixel-fidelity through rapid client-feedback iterations — the client reported zero design-to-implementation defects across all roles.
Where AI fits next
- Natural-language report queries for program staff ('show attendance trends for the mentorship cohort').
- Auto-summarised activity logs so admins read a digest, not raw entries.
Deployment
SPA served via CDN with environment-driven API endpoints; CI checks on every merge.