Every day on the road, we see cute innocent creatures that unfortunately lost their lives due to drivers who did not see them out on the roads. We built this website/app so that awareness can be brought to this issue so that we can try to reduce the impact of humans on animals.

It's a multi-user live map where users can add markers that mark the locations of animals spotted. The markers also contain a description of the animal(s).

• Frontend: Built with Next.js and React. We used Tailwind CSS for quick styling and shadcn/ui for quick components.
• Mapping: Powered by Leaflet and React-Leaflet, allowing for custom popups while being free.
• Multi-User: Implemented via Socket.io. This allows for a low-latency requests while having the same data as the server.

We're proud of being able to make a proper front design and also create a working map. (Honestly just everything about this project).

We ran into some issues when implementing the multi-user features. It was slow to repeatedly ask the server for the markers, so we had to use socket.io to easily manage communication between the server and the client. Additionally, sending all of the makers every time that they were updated was slow and unnecessary, and we had to implement updates that only added new content.

Through this project, we learned a lot about how to effectively build a backend server that continuously communicates with the frontend and ensures that the data is consistent, even when there's sketchy internet.

In the future, some additional features that we could add include:

• *AI Species Recognition: Using the images that are already stored in the server, we could add more accuracy to the species identification using a computer vision model.
• Better Storage: Using a database to store the data, allowing for persistent memory across multiple runs.
• Filters: Show specific species or filter based on geographical locations.
• Mobile Apps: Create a mobile app that makes reporting even easier, making Wildlife Tracker more widespread and accessible.