Risk Map

Inspiration

We were going to participate in this competition under the Agriculture and Food system track however, we couldn't find any good ideas for the project. So the first 2 hours were brainstorming ideas. Until someone mentioned a map related project. So we check some features of Google Maps and came up with a map that warns its users when enter a dangerous zone where an incident has occurred.

What it does

It records user's input of location if the user is within 2 kilometers and the zone radius then display it as a red circle . When the user return to the map page a warning or notification will appear at the top of the screen when the user is within that zone. The zone will eventually change color to yellow which indicates the incident is starting to settle down and turn green to signify it's mostly settled. However, users can update this danger zone using the upvote feature which can be done by clicking the danger zone and click Upvote to refresh the zone to red again. As more Upvotes are accumulated, the border of the zone eventually turns thicker to signify that the incident is likely a horrible.

How we built it

We use Next.js as our main framework for the app. Because Next.js use React, we can create the web element one by one using components. We then arrange the component into one complete web pages. Then, we add the functionality and reactivity using useState, useEffect, zustand, and some API calls also database. With these, we can create our Risk Map web application.

Challenges we ran into

When adding a feature to signify the range of input the user can report we included a blue circle zone of 2 km. However, the bug was in the Upvote feature because the blue circle is layered on top of the danger zones you can't click the zones within the radius.

Accomplishments that we're proud of

Our first collaborative projects. Most of us work on solo projects so we finally get to experience how to work in a team. First time connecting a database to project. We managed to finish what we can with the allocated time.

What we learned

We experienced how to solve a real world problem regardless of the result. How to cooperate with other developers in real-time. Just talk it out and a solution will come.