-
Landing screen
-
Environmental Score
-
Summary
Inspiration
I was inspired by the "Octopus Hackathon" theme of multitasking. I realized that checking your environmental health is a frustrating multitasking problem, you have to check one site for weather, another for air quality, and a third for UV index. I wanted to build one simple "octopus" app that reaches out to all these sources at once and gives you a single, easy-to-understand answer.
What it does
PlanetPulse is an AI-powered sustainability dashboard. A user types in any city, and the app fetches live temperature, humidity, UV index, and Air Quality Index (AQI) data. It then feeds all that raw data to the Gemini AI, which instantly writes a simple, actionable health summary in plain English, telling you what those numbers mean for your day.
How I built it
I built the frontend with simple, clean HTML, CSS, and JavaScript. For the backend, I built a secure, serverless function on Netlify. This function is the "brains": it calls the Open-Meteo API (for weather/AQI) and then securely calls the Google Gemini API (for the AI summary) by pulling the secret key from environment variables. It bundles all the data and sends it back to the client.
Challenges I ran into
The biggest challenge by far was security. I couldn't figure out how to use my Gemini API key without exposing it in my public GitHub repo. My first attempts to call it from the client-side script.js failed. This forced me to learn how to build and deploy a serverless function, which led to debugging 404 errors until I got my netlify.toml file and folder structure right.
Accomplishments that I'm proud of
I'm incredibly proud of building a full-stack, secure application in just a few days. Figuring out the serverless function to protect my API key was a huge win. I'm also very proud that the AI summary feature works perfectly, it correctly analyzes the data, identifies the biggest health risk, and gives genuinely useful, real-world advice.
What I learned
I learned the critical difference between client-side and server-side code and why you can never put secret API keys in a public JavaScript file. I learned how to create, test (using netlify dev), and deploy a serverless function. I also learned how to integrate multiple APIs (Open-Meteo and Gemini) into a single, cohesive service.
What's next for PlanetPulse
The next feature I'd add is a city-search autocomplete dropdown to make searching easier. After that, I'd love to add historical data charts to track environmental trends over time and a "favorites" list so users can save and quickly check their home cities.
Log in or sign up for Devpost to join the conversation.