QuackTrack

Inspiration

We were inspired by the GrizzHacks theme, ducks, and noticed a gap in the market for bird identification and tracking, specifically for native Michigan ducks. Our goal is to develop a web application that empowers the public to assist researchers in tracking these ducks within their natural habitats, while also educating users about the various native duck species.

What it does

QuackTrack is a platform that allows users to upload photos of ducks along with the locations where they were spotted. This data is then mapped to provide researchers with valuable insights into the distribution of specific duck species. Additionally, users who upload photos can identify the species themselves. To further enhance user experience, QuackTrack features a chatbot that allows users to describe a duck's appearance and receive species identification based on the description.

How we built it

The frontend components are made using React, and Javascript. We first built out the UI, and then designated the 25 species of ducks native to Michigan (and 1 species of rubber duck). Then, we used the Google Maps API to create the interactive map, with different colored pins for each different species of duck. For the identification component, we used the Google Cloud Vision API, which let us use GenAI to reliably differentiate between species. The API makes flags for each image, and then uses the difflib library to perform fuzzy matching to find the best fit match among the 26 potential types. Then, using Node js, this type is passed back to the frontend, which then specifies the location to put a pin on the map, as well as the color of the pin that should match the species.

Challenges we ran into

Integrating the Google map API into the React components. We had some API authenticity issues that caused the maps to not show up. Additionally, we also had issues connecting SQL, React Components, and the Gemini model. Most of the documentation on using geocoding (conversion from word address to coordinates for the google maps) was not in the React.js framework. This means we had to invent a new way to use this API with Google Maps in React.js. Because

Accomplishments that we're proud of

We are proud to have a functioning project that is aesthetic pleasing and with so many different components such as a chatbot, an interactive front-end, and a robust database. This project has the most components that any of us has worked on at once. We now feel more confident in how programs and different file types come together to create a complex application like this project.

What we learned

Doing this project has taught us a variety of lessons we would have not learned in a classroom and helped prepare us for future classes and our careers. For instance, we learned how to connect and manage SQL databases with a popular front-end framework called React.js. Additionally, we learned how to manage our time as a team efficiently with so many vastly different components. We learned how to assign tasks so we would all work on different tasks in parallel and merging them together at the end. This gave us a glimpse into our job environment in the future.

What's next for QuackTrack

As of currently, QuackTrack focuses on the 25 native duck species in Michigan (plus rubber ducks). In the future, we would like to have QuackTrack to include more species of ducks in more areas. If this works out well, we hope to also expand to other bird species or animals. Additionally, our database components are currently quite simple, and we would like to integrate some AI analysis of the changing information in the database so that users can get live updating information about the migration patterns of the species.

We would also like to expand the number of platforms it is on, specifically, we would like an ios app so that more people can easily access the app. This will increase the availability and accessibility of the app while also increasing number of collectors for the database.

Built With

• gemini
• google-gemini
• google-maps
• javascript
• python
• react
• react.js
• sql
• sqlite