TB Tracking System – BU School of Public Health x Socios en Salud

Impact at a Glance

Users

• Mobile screening teams: pick next sites quickly and log methods/positive/screened counts with minimal taps.
• Coordinators/planners: compare districts/zones by recent yield to plan upcoming screening days.
• Data reviewers: view simple trends without overloading BI tooling.

Problem → Outcome

Problem: Teams lacked a reliable, tech-forward way to review past TB screening rates or anticipate future ones; records lived in scattered spreadsheets or traditional pen-and-paper.

Outcome: A map-first React/Leaflet + Supabase app that consolidates past visits and screening data into a single, consistent source of truth—enabling quick review, cleaner data entry, and a foundation for forward-looking planning.

My Work

• Dashboard logic: Built robust, client-side aggregation for all-time and per-date stats, ensuring the dashboard always reflects the latest and previous screening data.
• UX polish: Refined stat cards to keep all key numbers and changes on a single line, with clear, bold highlights for new data.
• Data integrity: All dashboard numbers are cross-checked and calculated from grouped ticket data, not just raw totals, to ensure accuracy even with multiple visits per day.
• Map-first UX: District/zone filters; aggregated one-marker-per-site for fast situational awareness.
• Sidebar & Tickets: Synced marker ↔ list; save-state ticket flow for screened_count and positive_count.
• Data cleaning & consistency: Constrained forms; schema adjustments to handle source variability while keeping historical data comparable.
• Future-ready methods: Support adding new screening method types per visit without schema churn & Safe API Storing using anon_key.
• Delivery & handoff: Vercel deploy; README/runbooks for continuity.

Dashboard & Analytics

• Modern dashboard: Designed and implemented a responsive dashboard for mobile and desktop, giving teams instant feedback on screening progress and trends.
• All-time stats: At-a-glance totals for screenings, positives, locations, and visits.
• Smart change indicators: Each stat card shows not just the total, but also the latest change (e.g., “+25 screenings”, “+66% vs last date”) for rapid situational awareness.
• Trend visualization: “Screening Yield Rates” and “Screenings & Positives Over Time” charts for instant trend insights.
• Export & review: Ability to export data and review recent tickets directly from the dashboard.
• Consistent, readable UI: Used Material UI for a clean, accessible layout; ensured all subtexts and numbers are aligned for quick scanning.
• Client-side analytics: All calculations (totals, per-date changes, yield rates) are performed in the browser for speed and reliability, even with variable data sources.
• Error-proofing: Dashboard logic is robust to missing or inconsistent data, so users always see accurate, up-to-date stats.

Key Decisions

• Supabase (REST): fastest path to CRUD + auth patterns; easy to onboard and maintain.
• Leaflet + shapefiles → GeoJSON: seamless with React/JS; straightforward conversion; good performance/complexity balance.
• Client-weighted UX: keep backend thin; compute simple “Yield” and aggregations client-side for speed and clarity.

Constraints & Trade-offs

• Performance trade-off: minor lag on deep zoom/pan accepted to prioritize core flows (tickets, method types, data cleaning).
• Data variability: source inconsistencies required iterative variable adjustments to keep outputs correct in-app.
• Simplicity first: lean features over heavy GIS/BI to stay reliable in low-connectivity settings.

Why it matters

For teams: Instantly see how today’s work compares to last week’s, without digging through tables or spreadsheets.
For planners: Spot trends and outliers at a glance, enabling smarter, faster decisions on where to send teams next.
For reviewers: No need for heavy BI tools—simple, actionable insights are always front and center.

Privacy & Data Handling

Demo assets use anonymized/synthetic data for internal demonstration. No sensitive personal information is exposed.