-
-
Our main page contains a 3D aquarium representing all your previous catches!
-
See where people are catching their fish!
-
Revisit your most impressive feats via our achievements system!
-
-
-
-
About the Project
TLDR:
Caught a fish? Take a snap. Our AI-powered app identifies the catch, keeps track of stats, and puts that fish in your 3d, virtual, interactive aquarium! Simply click on any fish in your aquarium, and all its details — its rarity, location, and more — appear, bringing your fishing memories back to life. Also, depending on the fish you catch, reel in achievements, such as your first fish caught (ever!), or your first 20 incher. The cherry on top? All users’ catches are displayed on an interactive map (built with Leaflet), where you can discover new fishing spots, or plan to get your next big catch :)
Inspiration
Our journey began with a simple observation: while fishing creates lasting memories, capturing those moments often falls short. We realized that a picture might be worth a thousand words, but a well-told fish tale is priceless. This spark ignited our mission to blend the age-old art of fishing with cutting-edge AI technology.
What We Learned
Diving into this project was like casting into uncharted waters – exhilarating and full of surprises. We expanded our skills in:
- Integrating AI models (Google's Gemini LLM) for image recognition and creative text generation
- Crafting seamless user experiences in React
- Building robust backend systems with Node.js and Express
- Managing data with MongoDB Atlas
- Creating immersive 3D environments using Three.js
But beyond the technical skills, we learned the art of transforming a simple idea into a full-fledged application that brings joy and preserves memories.
How We Built It
Our development process was as meticulously planned as a fishing expedition:
- We started by mapping out the user journey, from snapping a photo to exploring their virtual aquarium.
- The frontend was crafted in React, ensuring a responsive and intuitive interface.
- We leveraged Three.js to create an engaging 3D aquarium, bringing caught fish to life in a virtual environment.
- Our Node.js and Express backend became the sturdy boat, handling requests and managing data flow.
- MongoDB Atlas served as our net, capturing and storing each precious catch securely.
- The Gemini AI was our expert fishing guide, identifying species and spinning yarns about each catch.
Challenges We Faced
Like any fishing trip, we encountered our fair share of challenges:
- Integrating Gemini AI: Ensuring accurate fish identification and generating coherent, engaging stories required fine-tuning and creative problem-solving.
- 3D Rendering: Creating a performant and visually appealing aquarium in Three.js pushed our graphics programming skills to the limit.
- Data Management: Structuring our database to efficiently store and retrieve diverse catch data presented unique challenges.
- User Experience: Balancing feature-rich functionality with an intuitive, streamlined interface was a constant tug-of-war.
Despite these challenges, or perhaps because of them, our team grew stronger and more resourceful. Each obstacle overcome was like landing a prized catch, making the final product all the more rewarding.
As we cast our project out into the world, we're excited to see how it will evolve and grow, much like the tales of fishing adventures it's designed to capture.
Log in or sign up for Devpost to join the conversation.