Chilladelphia

• 

  Home page

Inspiration

Philadelphia, like many urban cities, is grappling with rising temperatures due to climate change, industrialization, and the urban heat island effect. We noticed that extreme heat is making it unsafe for many communities, especially during summer months. Chilladelphia was inspired by the need to provide residents with real-time resources and actionable insights to help them stay cool and safe.

What it does

Help cool down Philly! The main page features a heat map that visually highlights the hottest and coolest areas around Philadelphia. By entering your address, you can instantly see how “chill” your neighborhood is. Using our computer vision algorithm, we analyze the ratio of greenery in your area, giving you a personalized chill rating. This rating helps you understand the immediate state of your environment. Chilladelphia goes beyond just information—it provides actionable suggestions like planting trees, painting rooftops lighter, and other eco-friendly tips to actively cool down your community. Plus, you can easily find nearby cooling centers, water stations, and shaded areas to help you beat the heat on the go

How we built it

We built Chilladelphia with a strong focus on user experience and seamless access to location based data. For user authentication, we integrated Propel Auth, which provided a quick and scalable solution for user sign-ups and logins. This allowed us to securely manage user sessions, ensuring that personal data, like location preferences, is handled safely.

On the frontend, we used React to create a dynamic and responsive user interface. This enabled smooth interactions, from entering an address to viewing real-time temperature and air quality updates. To style the app, we utilized Tailwind CSS, which allowed us to rapidly prototype and design components with minimal code. Axios was implemented for handling API requests, efficiently fetching environmental data and user-specific suggestions. The frontend also leverages React Router to manage navigation, making it easy for users to explore different parts of the app.

For the backend, we set up a Node.js server with Express to handle API requests and data routing. The core of our data storage is MongoDB, where we store geospatial information like cooling center locations and tree-planting sites. MongoDB’s flexibility allowed us to efficiently store and query data based on the user’s location. We also integrated external APIs to get coordinates and map data. To manage authentication securely across both the backend and frontend, we utilized Propel Auth to handle user session tokens and login states.

For the data generation, we used python to compile images of university city by downloading sections of university city from sattelite images. We then use DetecTrees, a Python library that uses a pre-trained model to identify tree pixels from aerial images. We then were able to calculate what percentage of the image was green space to give users an idea of how green the area around them is.

Challenges we ran into

One of the biggest challenges was getting high resolution satellite imagery that would work well for our purposes. After testing out over 5 different APIs, we ended up having to wrap a google maps scraper, which worked best for our needs.

Accomplishments that we're proud of

We’re proud of creating a solution that can have real impact in our neighboring Philly communities. The recent heat waves in the northeast have been dangerous and put our peers and community at risk, and we are excited to take steps in the right direction to mitigate the issue.

What we learned

We've expanded our tech stack -- several of us used MongoDB, Express.js, PropelAuth, and many other tools for the first time this weekend.

What's next for Chilladelphia

Next, we plan to scale Chilladelphia by integrating more data - we had limited storage in our database and weren't able to cover as much of Philly as we wanted to, but we hope to do more in the future! We also want to partner with local governments and environmental organizations to further expand the app's resource database and promote city-wide efforts in cooling down Philadelphia.

Built With

• express.js
• javascript
• mongodb
• node.js
• python
• tailwindcss