CityScape

How we built it

CityScape was built using Next.js, React, and TypeScript, with Mapbox to create geospatial visualizations and 3D mapping layers.

We integrated spatial datasets to analyze urban surfaces, identify potential locations for new trees, and estimate environmental impact metrics such as carbon absorption. The results are rendered in an interactive map environment, where users can visualize proposed changes and explore the data through an AI-assisted planning interface.

Challenges we ran into

We ran into many merge conflicts, and we had a very fun (& annoying time resolving the bugs)! Integrating datasets, handling coordinate systems, and making everything align correctly within Mapbox required very careful debugging.

Accomplishments that we're proud of

For several of us, it was our first time using Claude Code, and we learned how to build an idea from scratch in a very short amount of time! We learned a ton about Mapbox, 3D building rendering, and how to use raw spatial/public data to create a clean, user-friendly design.

What's next for CityScape

Next, we want to validate CityScape with the people who actually design cities. We already talked to a civil engineers from the KW Region who confirmed just how powerful this could be. We plan to talk to even more city planners, civil engineers, and sustainability researchers in the Kitchener–Waterloo region to better understand how tools like this could support real planning tools.

At the same time, we plan to improve our rendering and visual design so that the platform can communicate insights more clearly. By refining the 3D map visuals, improving greenspace overlays, and making the interface more intuitive, we hope to make the impact of proposed changes easier to understand for both technical experts and everyday users!

Tech Stack: Next.js, TypeScript, Mapbox GL JS, React, Tailwind CSS, Vercel