Clarivue

Inspiration

What it does

How we built itInspiration

Every time someone gets a lab report back, it's a page full of numbers, abbreviations, and reference ranges that read like a foreign language. Most people either panic over a number that's slightly out of range or completely ignore something that actually matters — simply because there's no easy way to understand what a report is actually saying without waiting for a doctor's appointment. We wanted to close that gap: give people an immediate, plain-language first read of their own health data the moment they get it, so they walk into a doctor's office already informed instead of confused.

What it does

Clarivue is a health-management web app built around one core idea: upload a lab report, understand it instantly.

Report analysis — Upload a PDF or a photo of a lab report. Clarivue extracts the text (using OCR for scanned images) and scans it for common markers like glucose, cholesterol, hemoglobin, blood pressure, thyroid (TSH), vitamin D, creatinine, and white blood cell count. Each marker is translated into plain language — what it means, why it might be flagged, common causes, and symptoms to watch for. Specialist matching — Based on what's flagged, Clarivue suggests which type of doctor to see next. Trend tracking — Every report builds a timeline, so patterns over months are visible at a glance. Medication tracker — Add medicines, log daily doses, see 7-day adherence. Appointments — A booking flow with a mock specialist directory. Family profiles — One account tracks multiple family members separately. Notifications — A single feed for flagged findings, upcoming appointments, and due medications. Ask Clarivue — A built-in assistant for quick health questions. PDF export — Any analyzed report can be exported as a clean summary. How we built it

React + Vite, Tailwind CSS, and Framer Motion for the UI. pdf.js extracts text from PDFs; tesseract.js runs in-browser OCR when a report is a scanned image. A rule-based matcher (analyzeReport.js) scans extracted text for known lab markers and compares them against reference ranges. The assistant uses a local keyword-matched knowledge base — no external API. All data (accounts, reports, appointments, medications, family profiles) lives in localStorage via React context providers. recharts handles trend charts, jspdf handles PDF export. No backend, no API key required.

Challenges we ran into Getting a rule-based engine to reliably match lab values across wildly inconsistent report formats and abbreviations. Balancing pdf.js text extraction with a tesseract.js OCR fallback for scanned/photographed reports. A tricky Vite bundler issue where pdf.js's worker wasn't resolving correctly, causing blank-screen crashes until traced to an optimizeDeps misconfiguration. Re-scoping every feature (reports, appointments, medications, notifications) by active family profile without breaking existing data. Keeping disclaimers visible everywhere so the rule-based engine is never mistaken for real diagnostic AI. Accomplishments that we're proud of

A fully working, zero-backend health dashboard that runs entirely client-side. An analysis engine that explains why a marker matters, not just that it's out of range. A cohesive multi-section product rather than a single-feature demo. A UI with an intentional, trustworthy design language instead of generic defaults.

What we learned

How much care medical-adjacent products need — in tone, disclaimers, and avoiding language that implies diagnosis. Practical experience combining pdf.js and tesseract.js in one upload flow. How to structure growing React state (auth, reports, appointments, medications, family) so new features don't break old ones.

What's next for Clarivue

Swap the rule-based engine for a clinician-reviewed medical-NLP model. Move from localStorage to a real backend with proper auth and an encrypted database. Real clinic booking integrations and push/email reminders. Support for more markers and multi-language reports. A native mobile app for photographing reports on the spot.

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for Clarivue

Built With

• framer-motion
• javascript
• pdfjs
• react
• recharts
• tailwindcss
• tesseractjs
• vite