Inspiration
During major natural disasters, things change fast. Communities struggle to get quick updates on everything, and official emergency announcements take too long. Given this issue, I was inspred to build CrisisMap to provide neighborhoods with a free and simple way to instantly share safety details with each other.
What it does
CrisisMap is both a live and crowdsourced disaster response dashboard. It displays an interactive map where users can choose incident type, such as a flood, a blocked road, or a safe shelter, and click anywhere on the map to drop a color-coded pin. Anyone else using the website can then click on those pins to open up a text bubble that shows the exact incident type and additional user notes.
How I built it
I built the entire user interface using React, and to make the map interactive, I used a JavaScript map engine called Leaflet, along with a library called React-Leaflet to make it work smoothly inside my React code. Also, to avoid paying for advanced map graphics, I connected the app to OpenStreetMap to pull real-world street grid images onto the screen for free.
Challenges I ran into
My biggest challenge was handling state management in React because at first, when I added a new pin, the map would either not update at all or completely reset. I learned that you can't change arrays directly in React using methods like .push(). To fix this, I used the spread operator to copy old data first before adding new pins. Another challenge was figuring out how to make the pins point precisely to the correct street, but luckily I found out that I could manually shift the pin's tip using pixel coordinates.
What I learned
I learned how to read and understand technical documentation for third-party libraries like Leaflet, in addition to gaining more experience with Node.js and Vite to compile code. Most importantly, I learned a better way of thinking, where a big problem like a "live disaster map" would be broken down into smaller, more manageable pieces like dropdowns and coordinates.
Log in or sign up for Devpost to join the conversation.