LabLens

Inspiration

Understanding blood test results shouldn't require a medical degree. We noticed that patients often leave doctor's offices confused about their lab values, unable to tell if "22 ng/mL Vitamin D" is good or bad. LabLens was born from the desire to bridge this health literacy gap and empower patients to take control of their health data.

What it does

LabLens transforms complex blood test results into intuitive visual narratives. Users can:

Input lab results via a simple form with pre-configured biomarkers (Vitamin D, Cholesterol, Hemoglobin, Iron)
Visualize values on a color-coded spectrum bar (yellow → green → red) showing exactly where their results fall
Track trends over time with historical line charts
Learn context through expandable "What does this mean?" explanations
Export data as CSV for sharing with healthcare providers
Toggle dark mode for comfortable viewing

How we built it

Frontend: React 18 + TypeScript + Vite for a fast, type-safe development experience

Styling: Tailwind CSS with a custom medical-trust color palette (Sky Blue, Emerald, Amber, Rose)

UI Components: Shadcn UI + Radix primitives for accessible, polished interactions

Animations: Framer Motion for smooth, delightful transitions

Charts: Recharts for historical trend visualization

State: Custom useLocalStorage hook for client-side persistence

Backend: Lovable Cloud for database and authentication infrastructure

Challenges we ran into

Spectrum visualization math: Calculating the exact pointer position on a gradient bar required careful normalization, especially handling values outside normal ranges. The position calculation follows:

$$\text{position} = \frac{(\text{value} - \text{min})}{(\text{max} - \text{min})} \times 100\%$$

Grouped data display: Organizing multiple entries per biomarker while showing trends was an interesting UX challenge

Color accessibility: Ensuring the yellow/green/red spectrum remained readable in both light and dark modes

Accomplishments that we're proud of

Clean, patient-friendly interface that makes medical data approachable
Real-time visual feedback as users add results
Smooth edit/delete functionality with confirmation dialogs
Fully responsive design that works beautifully on mobile
Dark mode support for comfortable viewing in any environment

What we learned

Health data visualization requires balancing accuracy with simplicity
The importance of pre-populated demo data for immediate user engagement
How to build accessible color gradients that convey meaning without relying solely on color