AsthmaShield

Home Screen: Visualizing the invisible cost of air pollution with real-time bio-adaptive risk scoring.
Location-aware SOS Hub: One-tap emergency dialing, real-time hospital scanner with live wait times, and 24/7 doctor access.
Rapid Symptom Logger: One-tap tracking feeds the bio-adaptive engine, personalizing risk scores based on your unique respiratory patterns.
Calculates your 'Cigarette Equivalent' dose by factoring in respiratory rate multipliers based on your specific physical activity.
Dynamic Location Engine: Instantly recalibrates risk scores, toxicity levels, and hospital networks for any selected city.

Inspiration - We realized that for millions of asthma patients, AQI is just a number, but breathlessness is a reality.

The problem isn't a lack of data; it's a lack of context. Seeing "AQI 160" feels abstract, but knowing you just "smoked 2.5 cigarettes" while walking to the bus stop is visceral and actionable. We built AsthmaShield to bridge the gap between abstract environmental data and biological reality. We wanted to move beyond static weather apps to create a Bio-Adaptive Guardian that learns from the user's specific symptom patterns to predict respiratory distress before it happens.

What it does - AsthmaShield is a comprehensive respiratory health PWA (Progressive Web App) that serves as a personal "Air Command Center."

Toxicity Conversion Engine: Instantly translates local PM2.5 density into "Cigarettes Inhaled" and "Life Minutes Lost," using the Berkeley Earth methodology. Bio-Adaptive Risk Scoring: Unlike standard apps, our risk engine doesn't just read the news. It correlates real-time environmental factors (AQI, Pollen, Humidity) with the user's recent symptom logs to generate a personalized "Respiratory Risk Score." Pattern-Based Symptom Logging: Users can log complex symptom combinations (e.g., "Morning Wheeze") in a single tap using our preset engine, moving away from tedious data entry. Context-Aware AI Assistant: A built-in health bot that reads the dashboard state before answering, offering advice specific to the current air quality and risk level. Emergency & Wellness: Includes a location-aware hospital finder (scanning local databases) and a gamified "Breathwork Studio" to help users manage acute anxiety during attacks.

How we built it - We architected the application using a modern, high-performance stack:

Frontend: Built with React and TailwindCSS for a responsive, mobile-first interface. We utilized Framer Motion for the "Box Dynamic" animations and the breathing game visualization. Design System: We leveraged the 21.dev component library to implement a "Clinical Zen" aesthetic, utilizing Glassmorphism and Bento Grids to organize dense data hierarchies cleanly. Data Layer: We integrated Open-Meteo and OpenAQ APIs to fetch real-time environmental data. The Logic Core: We engineered a custom heuristic engine in JavaScript to handle the conversions: $$Cigarettes = \frac{PM2.5}{22} \times \frac{ExposureMinutes}{60}$$ State Management: We built a robust local state engine to handle the "Symptom Pattern" presets and location-based hospital lookups without requiring a heavy backend.

Challenges we ran into - Making Invisible Data Visible: The biggest UX challenge was visual hierarchy. Early versions felt like a spreadsheet. We solved this by creating the "Hero Toxicity Card," using color theory (Orange/Red gradients) to draw attention to the most critical metric (Cigarette Equivalent) immediately. Location-Aware Logic: Without access to paid Google Maps APIs, implementing the "Nearby Hospital" feature was tricky. We engineered a "Mock Database Strategy," creating an internal dictionary of major city health networks that the app queries dynamically based on the user's selected location. Visual Consistency: Balancing the "Medical" look with a "Futuristic" feel was hard. We iterated through multiple themes before landing on "Luminous Glassmorphism"-a blend of clean slate backgrounds with neon data accents.
Accomplishments that we're proud of - The "Shock" Factor: Successfully implementing the mathematical model that converts air pollution into lost life expectancy. It turns a boring stat into an emotional trigger for health preservation. The UI/UX Polish: Achieving a "Seed-Stage Startup" look within the hackathon timeframe. The app feels native, tactile, and incredibly responsive. The Pattern Engine: Moving beyond simple buttons to a "Preset System" for symptoms, which drastically reduces the time-to-value for chronic patients.
What we learned - UX Writing is Engineering: Changing a label from "High Pollution" to "≈ 3 Cigarettes Inhaled" fundamentally changes how a user interacts with the software. State Architecture: Managing multi-factor dependencies (where Weather + Symptoms + Pollen all affect one Risk Score) taught us the importance of clean, modular state logic.
What's next for AsthmaShield - IoT Integration: We plan to connect with smart inhalers (via Bluetooth) to auto-log usage frequency. True ML Backend: We aim to replace our heuristic logic tree with a TensorFlow Lite model that learns the user's specific triggers over months of usage. Community Data: Aggregating anonymous symptom logs to create a "Hyper-Local Asthma Heatmap" for city planners.