Thalassemia Compass AI

Inspiration

Thalassemia affects millions worldwide, requiring lifelong management through regular blood transfusions, iron chelation therapy, and continuous monitoring. Patients and families often struggle with fragmented care systems, lack of personalized insights, and limited community support. We were inspired to create a comprehensive platform that leverages AI to transform Thalassemia care from reactive to proactive, connecting patients with the resources, insights, and community they need to thrive.

What I Learned

Building Thalassemia Compass AI taught us the critical importance of trust and accessibility in healthcare technology. We learned how to:

• Design medical-grade user interfaces that inspire confidence while remaining approachable
• Create semantic design systems that work across diverse user needs and accessibility requirements
  
• Balance comprehensive healthcare features with clean, intuitive user experience
• Implement AI-driven insights in a way that empowers rather than overwhelms patients

How I Built It

We built Thalassemia Compass AI as a modern web application using React and TypeScript for robust, type-safe development. The frontend leverages:

• Custom Design System: Built with Tailwind CSS featuring medical-themed color palettes, gradients, and semantic tokens
• Component Architecture: Modular components using shadcn/ui as the foundation, customized for healthcare contexts
• Responsive Design: Mobile-first approach ensuring accessibility across all devices
• AI Integration Ready: Structured data flow and component architecture prepared for AI service integration

The application features a comprehensive patient dashboard with vital health metrics visualization, AI-powered insights for personalized care recommendations, educational resources tailored to patient needs, and community connection features.

Challenges I Faced

Trust & Credibility: Healthcare applications require exceptional attention to visual design and user experience to build trust. We spent significant effort crafting a medical-grade aesthetic that feels professional yet approachable.

Complex Data Visualization: Presenting medical data in ways that are both comprehensive for healthcare providers and understandable for patients required careful UX consideration and multiple design iterations.

Accessibility: Ensuring the platform works for users with varying technical skills, visual abilities, and health literacy levels required implementing semantic HTML, proper color contrast, and intuitive navigation patterns.

Scalable Architecture: Building a component system that could grow with additional features while maintaining consistency and performance across the entire application.

Built With

• class
• css
• dom
• lucide
• query
• react
• router
• shadcn/ui
• tailwind
• typescript
• variance
• vite