BreatheWise: Building an Air Quality Action Planner with AWS Amplify
BreatheWise is a web application that converts air-quality and weather data into simple, practical safety recommendations for everyday users.
BreatheWise: Building an Air Quality Action Planner with AWS Amplify
Air pollution is a daily problem in many cities. People often hear about AQI, PM2.5 and other pollutants, but the information is not always easy to understand or apply to daily life.
BreatheWise was created to make air-quality information more useful. Instead of showing only pollution numbers, it explains what those numbers mean and suggests practical actions users can take.
The problem
Many air-quality applications provide data but do not clearly answer questions such as:
- Is it safe to exercise outdoors today?
- Should children or older adults avoid outdoor activities?
- Should windows remain closed?
- When is the best time to go outside?
- What precautions should people take indoors?
BreatheWise addresses this problem by combining air-quality data, weather information and safety guidance in one simple interface.
What BreatheWise does
Users can search for a city or location and view the latest available environmental information.
The application displays:
- Air Quality Index
- PM2.5 levels
- PM10 levels
- Ozone levels
- Nitrogen dioxide levels
- Temperature
- Humidity
- Wind speed
- Current weather conditions
- 24-hour air-quality forecast
- Data source and update timestamp
The application also provides recommendations based on the pollution level.
For example:
- Good air quality: Normal outdoor activities are suitable.
- Moderate air quality: Sensitive people should monitor symptoms.
- Poor air quality: Reduce long outdoor activities and consider wearing a suitable mask.
- Very poor air quality: Avoid unnecessary outdoor exposure and keep indoor air clean.
The recommendations are educational and are not intended to replace professional medical advice.
Additional features
BreatheWise includes several features that make the information more practical:
Location search
Users can search for a city and select the correct location from the available results.
Health-based recommendations
The application provides guidance for different groups, including:
- General users
- Children
- Older adults
- People with asthma
- People with heart or respiratory conditions
Activity guidance
Users can understand whether activities such as walking, running, cycling or outdoor workouts are suitable for the current pollution level.
Indoor-air safety
The app provides suggestions such as:
- Keeping windows closed during pollution peaks
- Avoiding indoor smoke
- Using ventilation when outdoor air improves
- Using an air purifier when available
- Avoiding unnecessary burning or strong chemical fumes
Forecast information
The forecast helps users plan outdoor activities by showing how air quality may change during the day.
City comparison
Users can compare air-quality conditions between different locations.
Browser alerts
The application can notify users when pollution levels become unsafe, depending on browser permission and support.
Data freshness and error states
BreatheWise displays the data source and timestamp so users know when the information was updated.
If an API request fails or the data becomes unavailable, the application shows an error message instead of silently displaying misleading information.
Technology used
The frontend was built using:
- React
- TypeScript
- Vite
- HTML
- CSS
- JavaScript APIs
The application uses Open-Meteo services for weather and air-quality information.
Open-Meteo provides public environmental data that can be requested based on geographic coordinates. The app first finds the selected location, retrieves its latitude and longitude, and then requests the relevant weather and air-quality data.
How the application works
The basic flow is:
- The user searches for a city.
- The application finds matching locations.
- The user selects the correct location.
- The application retrieves the location coordinates.
- Weather and air-quality data are requested.
- The data is converted into readable values.
- The AQI level is calculated or interpreted.
- The user receives health and activity recommendations.
- The page displays the source and update timestamp.
The application also handles loading states, API errors and unavailable data.
How AWS was used
BreatheWise is hosted using AWS Amplify Hosting.
Amplify is connected to the GitHub repository. When new changes are pushed to the
master branch:- Amplify detects the new commit.
- It starts a build process.
- It installs the project dependencies.
- It runs the production build command.
- It deploys the generated frontend.
- The updated application becomes available through a secure HTTPS URL.
The live application is available at:
AWS Amplify was useful because it provided:
- GitHub integration
- Automatic deployments
- HTTPS hosting
- Production build support
- Deployment history
- Build logs for debugging
- A public application URL
The project does not require a custom backend for the current version because it mainly uses public environmental APIs. No secret API keys are exposed in the frontend.
Challenges faced
One of the main challenges was making city search useful and responsive. Search results can take time because the application must contact a location service before displaying suggestions.
Another challenge was handling inaccurate or similarly named locations. To improve this, the application displays location details and allows the user to select the correct city.
The deployment process also required troubleshooting the package manager configuration. The AWS build environment initially had a package-manager version issue, so the Amplify build configuration was updated to install and use the correct pnpm version.
Future improvements
Possible future improvements include:
- More accurate local pollution-station data
- User accounts and saved locations
- A mobile application
- Health notifications
- Integration with official government pollution-monitoring stations
- Personal exposure tracking
- Pollen and wildfire-smoke information
- Offline support
- More accessibility options
- A backend for storing user preferences
- More detailed historical pollution charts
Conclusion
BreatheWise was built to make air-quality information easier to understand and more useful in daily life.
The goal is not only to show pollution numbers, but also to help people answer the practical question: “What should I do right now?”
By combining environmental data, clear explanations and actionable precautions, BreatheWise can help users make safer decisions about outdoor activities and indoor air quality.
Enjoyed reading this content? Let the author know!
Your likes, comments, shares, and saves help creators reach more builders.
Loading recommendations
Loading article