Interactive frontend design prototype for a cardiac health app concept.
I built this project as a frontend design direction and interaction prototype to communicate UI ideas to the app team. It is not the production medical app, and it does not claim clinical correctness.
The prototype was used to make design discussions concrete:
- what a mobile-first health dashboard could feel like
- how simulated wearable connectivity could appear in the UI
- how AI-assisted summaries and chart detail surfaces might be presented
- how tabbed navigation, modal drill-downs, and dense health data could stay approachable
- a mobile-style shell with bottom navigation
- home, stats, arrhythmia, chat, and menu screens
- simulated Bluetooth connection state
- mock realtime and historical heart-health data
- chart-driven detail views
- AI insight card and consultation-style modal interactions
- device connectivity
- physiological data streams
- AI analysis responses
- user identity and account flows
This repo should be read as an interaction prototype, not as a backend-complete product.
- React 19
- Vite
- Tailwind CSS utilities
- Recharts for visualization
- mock data services for flow demonstration
npm ci
npm run devFor a production-style build:
npm run build
npm run lint- The layout intentionally mimics a polished mobile companion app rather than a desktop admin console.
- Data density is balanced with large tap targets, rounded cards, and modal drill-downs.
- Bluetooth, AI, and ECG concepts are presented as UX proposals to help the implementation team discuss states and transitions before backend integration.
- No real medical device integration
- No live backend or persistence layer
- No production auth model
- Mock analytics and insight copy instead of validated clinical interpretation
This repository is kept public as a design communication artifact. It demonstrates product thinking, interface exploration, and frontend interaction design rather than production health-tech infrastructure.