C3G11_HACKVOCATE

Team Name

Hackvocate

Group Member Name

NUR AFIFAH BINTI ABDUL RALI (LEADER) ADINA NUR SYIFA BINTI AZLAN TEOH SHU YING

Story

Malaysia AirSense began with a simple question: How can we help Malaysians protect themselves when the air quality changes without warning? Our team realized that while API data exists, it isn’t always easy for everyday users to interpret or access quickly. So we designed a tool that turns complex environmental data into clear visuals, interactive maps, and actionable health advice.

From mapping districts to crafting a clean interface, we focused on one mission—making air quality information understandable, accessible, and useful. Malaysia AirSense empowers users to check conditions instantly, recognize symptoms early, and make informed choices to stay safe.

Inspiration

Poor air quality has become a rising concern in many Malaysian communities, yet most people lack clear, accessible information to protect themselves. Our team wanted to build a tool that empowers the public especially students and daily commuters to make safer decisions using real-time, understandable data.

What it does

Malaysia AirSense visualizes air quality across districts with an interactive map, color-coded API categories, a search tool, health symptom checks, and personalized safety advice. It helps users quickly assess their environment and take preventive steps.

How we built it

We developed the system using HTML, CSS, and JavaScript with Mapbox for interactive geospatial visualization. District data is stored in a structured JSON file, and custom logic powers the search, filtering, symptoms questionnaire, dynamic UI, and health alerts. The interface is optimized for clarity, responsiveness, and minimal scrolling.

Challenges we ran into

-Ensuring accurate layout alignment across different screen sizes. -Creating a clean interface without overwhelming users with too much information.

Structuring the JSON dataset realistically and designing believable API categories.
Integrating Mapbox markers and UI elements smoothly within a limited timeframe.

Accomplishments that we're proud of

Delivering a fully functional map-based air quality tracker within a hackathon timeframe.
Designing a compact, user-friendly interface that reduces clutter and scrolling.
Creating a symptom-based health advisory system to guide users during poor air quality days.
Building a feature set aligned with public health and community awareness.

What we learned

We learned how to work with geospatial tools, JSON data modeling, and responsive UI design under pressure. We also deepened our understanding of Malaysia’s API system and how environmental data can be translated into human-centered insights.