๐ก Inspiration
The expanded BRICS+ coalition represents over 45% of the worldโs population, vast industrial hubs, and critical global ecosystems like the Amazon, Siberian taiga, and Southeast Asian rainforests. Yet, transboundary pollution, wildfire smoke plumes, and climate anomalies do not respect national borders.
When biomass burning occurs in the peatlands of Indonesia or crop residue fires burn in South Asia, prevailing winds carry toxic PM2.5 and aerosol plumes across international boundaries into neighboring populations. Historically, climate data has remained isolated inside fragmented national dashboards. We built BRICSVue to create a unified, real-time, AI-driven climate intelligence and early warning shield connecting all 11 BRICS sovereign members (Brazil, Russia, India, China, South Africa, Egypt, Ethiopia, Iran, Saudi Arabia, UAE, and Indonesia).
๐ What It Does
BRICSVue is a comprehensive environmental intelligence platform providing real-time satellite telemetry, predictive AI forecasting, and cross-border incident detection:
- ๐ฐ๏ธ Live NASA Satellite Telemetry: Integrates NASA FIRMS VIIRS satellite thermal anomaly feeds in real time, tracking active wildfires and industrial heat clusters across all member states.
- ๐จ Real-Time Air Quality & Atmospheric Indexing: Monitors continuous multi-pollutant levels ($PM_{2.5}$, $PM_{10}$, $CO$, $NO_2$, $SO_2$, $O_3$) and weather telemetry via Open-Meteo across major metropolitan airsheds.
- ๐ค Explainable AI Forecasting (XGBoost + SHAP): Predicts AQI spike trajectories ($+3h$, $+6h$, $+12h$, $+24h$) based on meteorological factors, wind velocity, and satellite thermal signatures, backed by feature-importance explainability.
- ๐ Transboundary Plume Movement Modeling: Simulates atmospheric Gaussian plume dispersion along wind vectors to calculate estimated arrival times and percentage pollution surges in downstream countries.
- ๐ง ClimateAI Assistant: An intelligent environmental conversational agent powered by Google Gemini (Gemini 2.5 Flash), offering instant insights into sovereign environmental conditions.
- ๐บ๏ธ Interactive Multi-Layer Geospatial Map: Custom Leaflet interface with live toggleable layers for AQI hotspots, thermal fire clusters, wind vectors, and projected risk zones.
- ๐ธ Citizen Science Incident Reporting: Enables citizens to report localized pollution events with built-in computer vision image analysis (smoke, fire, and industrial haze classification).
- ๐ Sovereign Environmental Comparison: Cross-nation analytics comparing air quality risks, historical 7-day trajectories, and thermal anomaly rankings.
๐ ๏ธ How We Built It
BRICSVue was engineered with a production-ready, decoupled full-stack architecture:
- Frontend:
- Built with React 18 and Vite, styled using Tailwind CSS.
- Interactive spatial mapping powered by Leaflet / React-Leaflet with custom coordinate projections.
- Real-time data visualization and trend analysis utilizing Recharts.
- Custom universal flag engine ensuring authentic, high-DPI sovereign flag rendering across all mobile and desktop operating systems.
- Backend API & WebSockets:
- Powered by FastAPI (Python 3.11) running on Uvicorn with asynchronous HTTPX workers for multi-source parallel data ingestion.
- Real-time bi-directional telemetry broadcasted via persistent WebSockets (
/ws/live).
- AI & Machine Learning Engine:
- XGBoost & Scikit-learn for atmospheric forecasting.
- SHAP for interpretable prediction factor attribution.
- Google Gemini API for context-aware climate NLP reasoning.
- Pillow & NumPy for heuristic computer vision analysis on citizen photo reports.
- Cloud Infrastructure:
- Frontend deployed and globally CDN-cached on Firebase Hosting (
bricsvue-ai.web.app). - Python FastAPI backend containerized with Docker and deployed on Render (
bricsvue-api.onrender.com). - Automated CI/CD pipelines via GitHub Actions.
- Frontend deployed and globally CDN-cached on Firebase Hosting (
โก Challenges We Ran Into
- Handling Multi-National Satellite Scale: Querying and aggregating NASA VIIRS bounding boxes for 11 transcontinental countries simultaneously required engineering background caching loops and graceful fallback mechanisms to prevent API rate limiting.
- SPA Rewrites vs. API Decoupling: On static Firebase Hosting, standard single-page app rewrites initially routed
/api/...calls toindex.html. We resolved this by building a dedicated Axios interceptor and deploying the FastAPI ASGI server to cloud infrastructure with strict CORS and WebSocket support. - Cross-Platform Emoji Font Fragmentation: Windows desktop font engines (
Segoe UI Emoji) lack regional indicator flag glyphs, rendering country flags as letters. We solved this by developing an automated asset pipeline with local retina-sharp SVGs and a universal<CountryFlag>component.
๐ Accomplishments That We're Proud Of
- Delivering a live, sub-second streaming experience connecting satellite feeds from NASA, Open-Meteo, and Google Gemini.
- Implementing resilient offline fallbacks so the entire application remains fully interactive and informative regardless of network conditions.
- Building a truly unified, cross-border perspective on climate data for all 11 BRICS sovereign members.
๐ What We Learned
- Advanced geospatial visualization techniques and plume dispersion physics modeling.
- The power of Explainable AI (SHAP) in turning black-box environmental models into actionable advisories for policymakers and citizens.
- Orchestrating a hybrid multi-cloud deployment bridging Firebase Hosting and containerized FastAPI ASGI servers.
๐ฎ What's Next for BRICSVue
- Copernicus Sentinel-5P Integration: Ingesting ESA satellite data for high-resolution tropospheric methane ($CH_4$) and greenhouse gas tracking.
- Direct Sensor Interoperability: Partnering with open sensor networks (such as PurpleAir and national meteorological departments) for micro-station hyper-local calibration.
- Mobile PWA & Emergency Push Notifications: Developing automated mobile push advisories for sudden transboundary smoke events.
Built With
- axios
- css3
- docker
- fastapi
- firebase-hosting
- git
- github
- google-gemini-api
- html5
- javascript
- leaflet.js
- nasa-firms
- open-meteo
- python
- react
- recharts
- render
- scikit-learn
- tailwind-css
- vite
- websockets
- xgboost
Log in or sign up for Devpost to join the conversation.