EchoRX

Offline-First Medication Scanner for Third World Countries

Comment

EchoRx was born from a deep frustration with a persistent, preventable crisis: medication non-adherence in resource-limited settings, particularly in Nigeria and across much of sub-Saharan Africa. Recent studies show that medication non-adherence remains alarmingly high, often around 40–60% for conditions like hypertension, with rates in Africa frequently exceeding global averages (e.g., pooled estimates indicate two out of every five people with hypertension fail to adhere to blood pressure-lowering treatments). In Nigeria, language barriers (especially for native speakers(yoruba, igbo, hausa, etc....) ), complex dosing schedules, lack of reliable internet in rural areas (affecting ~65% of regions), and low-end devices (many with just 1GB RAM) compound the problem, leading to worsened health outcomes, higher mortality, and unnecessary strain on healthcare systems.

What Inspired Me

The inspiration came from personal stories and data: family members and friends in Nigeria struggling to remember dosages or understand English-only labels on imported medications, while living in areas with spotty connectivity. Seeing statistics like 70% non-compliance in similar contexts (and updated figures confirming persistent high rates in hypertension and chronic diseases across Sub-Saharan Africa) made it clear that existing apps, which rely heavily on constant internet, heavy AI models, or English-only interfaces, simply fail in these environments. I wanted to build something truly offline-first, multilingual, lightweight, and culturally relevant, a tool that "echoes" clear, accessible health guidance back to users in their own language and context.

What I Learned

Building EchoRx taught me the real constraints of healthtech in the Global South: performance isn't just about features; it's about respecting limited hardware, zero-trust connectivity, and linguistic diversity. I gained deep appreciation for progressive web apps (PWAs) as a democratizing force, installable, offline-capable, and cross-platform without app store barriers. I also learned the power (and pitfalls) of multimodal AI in real-world scenarios: vision models excel at pill identification but need careful fallback strategies for blurry photos, damaged labels, or no internet. Balancing innovation with accessibility (WCAG 2.1 AA compliance, ARIA labels, reduced motion, TTS) became non-negotiable. Finally, modular design (e.g., language packs in i18n) showed how starting focused (Nigeria) enables scalable impact to other countries like Kenya or India.

How I Built the Project

EchoRx is a Vue.js 3 + TypeScript PWA bootstrapped with Vite and Bun for blazing-fast development and builds. The architecture prioritizes offline resilience:

  • Frontend & PWA: Vite + vite-plugin-pwa + Workbox for caching assets and enabling installability.
  • Storage: Dexie.js wraps IndexedDB for medications, schedules, and GeoJSON pharmacies (starting with Nigerian data).
  • Styling: Custom glassmorphism (frosted glass effects, subtle gradients, rounded corners) with FontAwesome icons for a clean, modern, material-expressive feel.
  • Accessibility & UX: ARIA everywhere, keyboard navigation, high-contrast modes, skip links, and screen-reader testing from day one.
  • Offline Flow: Service Worker caches UI; local LRU cache limits storage; background sync for when connectivity returns.

Development followed an MVP-to-production path: quick Streamlit prototype → full Vue PWA → optimizations (<800KB bundle, WebAssembly OCR acceleration, WebP compression).

Specifically: How I Used the Gemini API

The Gemini API (specifically Gemini 3 Flash / gemini-3-flash-preview, with multimodal vision capabilities) is the intelligent core of EchoRx. When online, users scan a pill via camera; the image is sent to Gemini 3 Flash for analysis. The model processes the visual input (pill shape, color, imprint, label text) alongside a prompt like: "Identify this medication from the image, extract name, dosage, warnings; provide instructions in English and Yoruba; output structured JSON with schedule suggestions."

Gemini 3's strengths native multimodal understanding (text + image), low-latency Flash variant, and improved reasoning in the 2025–2026 updates — allow accurate pill recognition even in challenging conditions (poor lighting, partial labels). Responses are parsed into JSON, cached in IndexedDB for offline reuse, and used to generate personalized schedules + TTS via Web Speech API (Yoruba support included). Offline, we fallback to TensorFlow.js MobileNet OCR + local cache lookups.

This integration was pivotal: it turns a simple photo into life-saving, multilingual guidance without heavy local compute, fitting 1GB RAM constraints perfectly.

Challenges I Faced

  • Offline vs. AI Power: Gemini needs internet, so designing reliable fallbacks (local OCR, cached results) without degrading UX was tough, edge cases like blurry images or expired caches required extensive testing.
  • Performance on Low-End Devices: Achieving <1GB MB peak RAM required some optimization
  • Multilingual Accuracy: Yoruba TTS and translations needed validation; Gemini helped generate them, but cultural/idiomatic nuances demanded manual review.
  • API Limits & Cost: Rate limiting and token costs for vision calls pushed careful caching and minimal payloads.
  • Accessibility in Resource Constraints: Ensuring voice instructions work offline (pre-cached phrases) while keeping the glassmorphism look performant and high-contrast.

Despite these, EchoRx emerged as a practical, impactful tool, starting in Nigeria, My home Country, ready to scale, and genuinely aimed at saving lives where it matters most.

Built With

Share this project:

Updates