DisasterNearYou (DNY)

Inspiration

Although many phones today come with built-in earthquake alert systems, they often fall short in helping people understand the real-world aftermath, such as visible damage, blocked roads, or hazardous areas nearby.

What it does

DisasterNearYou is a web app that lets users:

Drop pins on a map showing where earthquake-related damage occurred
Upload photos, add descriptions, and get automatic address details
Drag pins to adjust locations, with auto-updated addresses
View other users' reports to stay informed on local hazards
Sign in/register with a simple user system, with a “remember me” option for convenience

How we built it

HTML/CSS/JavaScript for the frontend interface
Leaflet.js for rendering the interactive map and enabling draggable pins
Web Storage API (localStorage) to store:
- Users and login sessions
- Pin data (location, description, photo, timestamp)
Fetch API to call:
- Nominatim Reverse Geocoding API from OpenStreetMap to convert coordinates into readable addresses (auto-fills location info when placing pins)

APIs and Libraries Used:

Web Storage API; Store user data and pins locally
Fetch AP; Fetch address data from Nominatim
Nominatim Reverse Geocoding; Convert coordinates to addresses
Leaflet.j; Render map and handle pin interactions

Challenges we ran into

Working as a team, it was difficult at first to figure out how to assign tasks and understand what kind of work each person should do. We ran into challenges separating the frontend from the backend.
We faced a lot of coding issues — HTML/CSS can be surprisingly sensitive, and even small changes sometimes broke the layout.
We were still learning how to effectively use JavaScript, which made implementing features slower than expected.
We attempted to use MongoDB to avoid relying on browser storage, but we ran into connection issues that kept breaking the app, so we pivoted back to localStorage.
Learning how to use APIs — and even finding the right ones to bring our idea to life — took a lot of trial and error.
We may have been a little too ambitious, trying to build multiple features within a limited time frame.
Three of us got sick, and everyone was running on very little sleep
Facing difficulties in sharing code files due to lack of knowledge on Github

Accomplishments that we're proud of

Using AI tools such as Curser, we were able to debug and learn how to implement the JS code.
Implemented full pin system: draggable markers, popups with images and descriptions, dynamic address updates
Used OpenStreetMap & Nominatim API to convert coordinates into real locations
Built our own login/register system using just localStorage
Created a working prototype for community-driven disaster mapping with zero backend

What we learned

We learned the importance of clearly communicating our goals and assigning tasks. At times, we struggled to decide what steps to take next, which taught us the value of planning and coordination.
We discovered how to use AI tools to our advantage — helping us debug issues and write cleaner, more efficient code.
We learned how to set up MongoDB locally, even though we eventually ran into integration issues.
We explored UX/UI design with Figma, and used Cursor to help convert those designs into actual code.
For several of us, this was our first time working with JavaScript, and we learned how to use it to bring interactivity to our app.
Most importantly, we learned a lot about collaborating as a team, dividing responsibilities, and supporting each other through challenges.