Project Story: CityPulse Montréal 2035
Inspiration
We were inspired by the environment and nature, thinking about what the future will look like. By 2035, cities will face even bigger challenges with climate change, pollution, and urban heat. We wanted to build something that could help city planners make better decisions—a tool that shows where problems are and suggests how to fix them.
The idea was simple: what if planners had a map that shows where the city is most stressed and uses AI to recommend solutions? That's how CityPulse Montréal 2035 was born.
What We Learned
This project taught us a lot. We learned how to work with map data and coordinate systems, which was way more complicated than we expected. We figured out how to build interactive web maps that can handle thousands of data points without freezing. We also learned how to use AI APIs like Groq and Gemini to generate helpful explanations and stories about the data.
Most importantly, we learned how to build a full application from scratch—from downloading raw data to creating a working web app that people can actually use.
How We Built It
We started by downloading data from Montréal's open data portal. There were 9 different datasets: air quality, heat islands, noise measurements, traffic, trees, and more. Each one came in a different format (CSV, GeoJSON, etc.) and we had to figure out how to combine them all.
We created a grid covering Montréal with about 21,500 cells. For each cell, we calculated stress levels from six different factors: air pollution, heat, noise, traffic, transit access, and social vulnerability. Then we combined them into one "City Stress Index" score from 0 to 100.
On the backend, we built a Flask API that serves this data. The frontend is a Next.js app with an interactive map. You can click on any cell to see details, toggle different layers (trees, planting sites, etc.), and use sliders to model different 2035 scenarios.
We also integrated AI: Groq generates quick summaries explaining why each area is stressed, and Gemini creates longer narratives about what the city could look like in 2035 with different policies.
Challenges We Faced
The Map Wouldn't Load
This was probably our biggest headache. The map just wouldn't show up at all. We spent hours trying to figure out why—turned out it was a bunch of WebGL errors and issues with how Next.js handles map components. We had to make sure everything rendered on the client side, not the server.
Getting Montréal to Fit Right
The map wasn't fitting Montréal properly at first. The grid was going outside the city boundaries, and coordinates were all messed up. We had to download the official city boundary files and clip our grid to match exactly. We also had to handle different coordinate systems that different datasets were using.
Putting All the Data Together
This was harder than we thought. We had data from 9 different sources, each in a different format. Some were CSV files, some were GeoJSON, some had coordinates in one system, others in a different one. Some files even used commas instead of dots for decimals (European format). We had to write code to handle all these variations and make sure everything ended up in the right place on the map.
Making It Fast Enough
At first, trying to show 21,000+ grid cells plus 100,000+ tree points made the browser freeze. We had to optimize a lot—only showing trees when you zoom in close, sampling data, and caching things on the client side.
Working with APIs
The AI APIs (Groq and Gemini) had rate limits and we had to handle errors gracefully. We added caching so we wouldn't call them over and over for the same thing.
Built for the "Build the World of Tomorrow" Hackathon – November 2025
Log in or sign up for Devpost to join the conversation.