# CoolBlock: Building an Urban Heat-Risk Dashboard with React and AWS
CoolBlock is a React-based urban heat-risk dashboard developed as part of our hackathon project. It aims to make heat-related information easier to explore through an interactive map, visual risk indicators, and a cooling intervention planning interface. This project focuses on using technology and data visualization to support awareness of urban heat challenges, with future plans for real-world weather data integration and AWS-based deployment.
Introduction
Urban heat is becoming a major challenge for cities around the world. Rising temperatures can affect public health, outdoor workers, and vulnerable communities. Understanding heat-risk information can help people identify potential hotspots and explore ways to make cities safer.
To address this challenge, our team developed CoolBlock, a heat-risk dashboard concept as part of our hackathon project. In this blog, I will share our idea, frontend development journey, key features, technologies, and future plans.
The Problem
Urban areas can experience different levels of heat because of buildings, roads, limited green spaces, and other environmental factors. However, understanding and exploring heat-related information can be difficult without a clear visual interface.
We wanted to create a dashboard that could make heat-risk information easier to explore and help users understand potential cooling interventions.
Our Solution: CoolBlock
CoolBlock is a heat-risk dashboard designed to bring map visualization, heat-related indicators, and cooling intervention planning together in one interface.
Our goal is to create a user-friendly platform that can eventually integrate reliable weather data and location-based heat-risk analysis to support better urban planning.
Key Features
1. Heat-Risk Dashboard
The dashboard presents heat-related indicators in a visual format, allowing users to understand the information at a glance.
2. Interactive Map
The application includes a map interface designed to help users explore locations and visualize potential heat-risk zones.
3. Temperature and Risk Indicators
Visual cards demonstrate how temperature-related information and heat-risk indicators can be presented clearly.
4. Cooling Intervention Planning
The interface explores the concept of planning cooling interventions and estimating potential budgets for future urban heat mitigation efforts.
5. User-Friendly Interface
We focused on creating a structured dashboard with visual components that make the application easier to navigate and understand.
[Insert Screenshot 1: Main CoolBlock Dashboard]
Figure 1: The CoolBlock heat-risk dashboard interface.
[Insert Screenshot 2: Map Interface]
Figure 2: Map-based visualization in the application.
Note: Describe only the features that are actually implemented in your current version. If some values are illustrative or based on mock data, make that clear.
Technology Stack
We used modern frontend technologies to build the application:
- React.js: For building reusable UI components.
- JavaScript: For frontend functionality and interactions.
- Vite: For the development environment.
- Tailwind CSS: For styling the interface.
- Leaflet: For map visualization.
- Git and GitHub: For version control and code management.
This technology stack helped us build the frontend and establish a foundation for future development.
Development Journey
We began by setting up the React application with Vite and creating the main dashboard layout.
Next, we worked on the visual components, map interface, and dashboard sections. We also used Git and GitHub to manage our code and maintain the project repository.
During development, we learned how to organize a dashboard interface, work with frontend tools, and manage code changes using Git.
Challenges and Learnings
Developing CoolBlock gave us practical experience in frontend development, component-based UI design, map visualization, and version control.
One important learning was that a useful dashboard needs more than an attractive interface. Its information should be understandable, and real-world applications need reliable data sources and properly validated calculations.
The project also helped us identify areas where further integration and testing would be necessary.
Future Scope
We plan to improve CoolBlock by exploring the following possibilities:
- Integration with reliable weather and temperature data sources.
- Backend development for heat-risk analysis.
- Improved location-based risk visualization.
- Better cooling intervention and budget estimation.
- Deployment using suitable AWS services.
- Testing with realistic data to improve reliability.
These are future goals and will depend on the project's development progress.
Conclusion
CoolBlock has been a valuable learning experience for our team. Through this project, we explored how frontend development, maps, and data visualization can be combined to communicate urban heat challenges.
We hope to extend the project with reliable data integration, improved analysis, and a suitable deployment architecture.
Explore the Project
Thank you for reading about our CoolBlock project and development journey!
Enjoyed reading this content? Let the author know!
Your likes, comments, shares, and saves help creators reach more builders.
Loading recommendations
Loading article