Fish Outta Water

Inspiration

Our inspiration behind the project came when we were discussing our hobbies and one of our team members mentioned that they had went fishing the week before and was talking about the terrible state of the lake. His nearby lake had been infested with the common carp and had killed of the diverse fish. After this we realized that this problem could be solved if people, particularly fisherman, were more aware of what are the invasive species in their local area and how to catch them.

What it does

Our website shows users a map the different invasive species of fish near their homes and across the US. We display scientific information upon click the fish icon on the map, tips on how to catch the type of fish as well as a picture so that fishers know what to look out for. Users are also given a link to directions to where they can find that type of fish. We also have a recipes tab which display a wide array of recipes for ever invasive species of fish in the US! Finally to better spread the message to other fisherman we created a social media tab where users can anything from their results out a certain pond to unique recipes.

How we built it

The first thing we did was layout a plan for what we wanted our project to look like. We decied on a cholor scheme as well as the different tabs and features we wanted to integrate. The first course of technical action was to start clustering fish together as there was over 500,000 data points and we realized that displaying those on a map could be confusing for users and would have cause the website to crash. We then worked on creating a basic template for every page on our site. Using next.js allowed us to conserve allot of time as we could create components such as the nav bar and footer that we could use in every web page. We then worked on trying out different maps to display our Invasive Fish Tracker. We ended up choosing leaflet due to its lazy loading as well being able to use a csv for our pins. We then moved to our recipes section. Here we created box for every type of fish in our data base allowing you to search for a specific one. Then when we wanted to create a recipe for each fish we decided on prompt the OpenAI api to create one for us. We also decided that if we wanted to reach a larger impression it would be good to create a social media/form where people can talk about anything they would like. After we created all the base features we decided to add some smoothing as well as animation components to add a artistic aspect to our project. After this the team realized that new fishers might have a hard time catching and identifying the invasive fish from the ones that are not. We added feature where users can see a picture of what the fish they are looking for and some tips to catch it using the OpenAI api.

Challenges we ran into

Our first big challenge was in clustering data. We tried around 10 different clustering algorithms weighing their pros and cons until we could find one which gave the results that we were looking for. The computation time was quite long as each model took around 30 mins to create an output as 500,000 entries along with the data being 2d proved to hard to work with. Next was picking out which map we were going to use, we wanted something that would highlight the terrain around but be easy on the server side as the amount of pins we had were still allot. We found leaflets lazy loading to be the best solution to our problems as rendering sections of the map at a time created better load times for the map. After this we attempted to add tips using and adding images to the pins on the map. This took the most time as when we got it to work the map kept glitching causing the map to move on its own. We found a work around for this by editing the leaflet map directly.

Accomplishments that we're proud of

We’re incredibly proud of creating a fully functional, user-friendly tool that can serve both amateur and professional fishers alike. One of our biggest achievements is successfully clustering and visualizing a large dataset of 500,000 entries without crashing the site. It was a technical challenge that took a lot of optimization and innovation. Another achievement is integrating OpenAI’s API into the platform to generate helpful fishing tips and custom recipes for each invasive species. We’re also proud of the interactive map, which offers users the chance to explore their local area and identify invasive species, complete with images and directions to help them catch and manage those species.

What we learned

Through this project, we learned how to manage and optimize large datasets for performance, especially in a web app environment. We explored various clustering algorithms and analyzed their strengths and weaknesses to find the best solution for our dataset. We also gained experience in frontend development using Next.js and enhanced our design skills by incorporating smooth animations and transitions to improve user experience. Furthermore, by integrating APIs such as OpenAI’s, we learned how to streamline the process of retrieving and displaying dynamic content. Finally, since this was the first hackathon for most of our members we are very proud that we were able to combine our mixed skill sets to create such an amazing product!

What's next for Fish Outta Water

We plan to expand the scope of our platform beyond the United States by integrating data from other countries and ecosystems. This will involve acquiring more data on invasive species worldwide and further improving our clustering algorithms to accommodate a growing database. We also want to create a mobile version of our website to make it even more accessible for users on the go. Another exciting feature in the works is a leaderboard for fishers to share their catches, encouraging friendly competition and promoting conservation efforts. Lastly, we’d like to collaborate with environmental agencies to provide real-time data updates on invasive species and develop partnerships with local communities to help manage their waters more effectively.