A real-time intelligence hub built with React and Supabase that consolidates messy, inconsistent data from international Lifewood projects into clean demographic insights and growth trends, all wrapped in a custom glassmorphism interface.
Lifewood runs projects across many countries (PH, Kenya, Malawi, DRC, Ghana, and more), and every region tracked its data differently. The same field might be called "Student ID" in one place and "Student Number" or "Pathway" in another. Stakeholders had no single view, so getting a clear picture of headcounts, demographics, or growth meant digging through separate tables by hand. They needed one place to see everything, updated live.
LifeData brings all of those sources into one dashboard. It reads each region's data, cleans up the differences automatically, and turns it into demographics and trends you can understand at a glance.
Tech stack: React and Vite power the app, Supabase handles the live PostgreSQL backend, Recharts draws the trend and demographic visuals, and Tailwind with a custom "Aurora Glass" design system keeps the interface clean and engaging.
Automatic data normalization: The system merges naming variations like "Student ID" and "Pathway" into one reliable metric, so messy international data still lines up correctly
Real-time sync: A direct Supabase connection means numbers update within seconds, so stakeholders always see current figures instead of stale exports
Readable visuals: Custom area charts and demographic breakdowns (age averages, gender split, affiliations) turn raw rows into insights anyone can act on
This project showed me that the hardest part of analytics is not the charts, it is the messy data underneath. I learned to design around real-world inconsistency instead of assuming clean inputs, and to treat normalization as a core feature, not an afterthought. If I revisited it, I would add user-defined field mapping so new regions could be onboarded without touching code.