Meliora

Inspiration Managing your health means juggling a dozen apps — one for sleep, one for meds, one for symptoms. We wanted a single place that connects the dots and tells you what it all means.

What it does Meliora is a conversational health companion. It tracks sleep, steps, heart rate, medications, symptoms, sunlight exposure, and screentime — then surfaces patterns in plain language. Every morning you get an auto-generated "Today's read" with the most relevant insight from the past week, and you can ask follow-up questions in a chat interface. Summaries can be saved and shared with your doctor.

How we built it Next.js 16 (App Router) + React 19 + Tailwind CSS v4 for the frontend. All data visualizations are custom SVG components — no chart library. The AI layer uses the Claude API to generate daily health summaries and power the conversational interface.

Challenges we ran into Designing a dashboard that surfaces meaningful correlations (e.g., sleep → headaches) without feeling clinical or overwhelming. Building responsive bar charts from scratch with ResizeObserver was also more involved than expected.

Accomplishments that we're proud of The "Today's read" card — a short, auto-generated paragraph that connects multiple data streams into one actionable insight. It's the thing that makes Meliora feel like a companion rather than a tracker.

What we learned How much design work goes into making health data feel human. Typography, spacing, and a warm color palette do as much work as the AI.

What's next for Meliora Real data integrations (Apple Health, Oura, Garmin), a shareable doctor report export, and persistent memory so Meliora's insights improve over time.

Built With

• 16
• 19
• approuter
• claude
• css
• next.js
• react
• tailwind
• typescript
• v4