This content originally appeared on DEV Community and was authored by Nnaemeka Daniel John
BioDetect: Bringing the Natural World Closer to You!
The initial version of the app
It all started as a simple, personal project, a little idea I had when Google released the Gemini API. I’m that guy who stares at every leaf, butterfly, and flower but has zero clue about what I'm looking at. So, I thought: “Why not build an app that can identify plants and animals with just a photo?”
That’s how BioDetect was born, a fun side project to help satisfy my curiosity about the natural world. I initially built it as an API bare-bones tool: just make an POST request with a picture, and boom, you'd get some basic information in JSON format. I wasn’t planning on making it super fancy, just a backend-focused tool because that’s my domain of expertise as a backend engineer.
Entering the Google Gemini Developer Competition
Months later, while browsing online, I stumbled upon the Google Gemini Developer Competition. I thought, “Why not give BioDetect a shot?” It had potential, but it needed to go through a serious glow-up. It had to evolve from a cool personal project to something... extraordinary.
I began rethinking the entire experience. How could I make it more engaging? More polished? More creative?
Iterating and Simplifying: The Minimalist Approach
First off, I decided to revamped the front end to be minimalistic, yet intuitive. A clean interface makes a world of difference. The goal was to keep the experience simple but immersive, so I kept distractions to a minimum and let the information stand out.
The Butterfly Moment: Adding 3D Model Using WebGi
But then came the real game-changer: a 3D animated butterfly. I thought, why not add a visual element that captures the essence of nature’s beauty? I wanted users to feel like they were part of an enchanting world as they scrolled through the app. So I found an incredible 3D butterfly model by TPackard on Sketchfab.
That’s when I dipped my toes into WebGi, a powerful library that allows for interactive 3D models. As a backend engineer, this was a new frontier for me, but I loved the challenge. Creating and integrating the 3D butterfly, which flutters beautifully across the screen as you scroll, was no small feat. I had to really dig into frontend technologies and push myself beyond my usual comfort zone.
Code Snippet for animations on scroll
The React frontend was my canvas, and WebGi was my paintbrush. I spent countless nights experimenting, tweaking, and polishing to make the 3D butterfly animate seamlessly on scroll. In the end, I think it was totally worth it. The butterfly adds such a unique and interactive flair, making BioDetect not just functional but delightful.
The finished product
The Tech Behind BioDetect
Here’s the breakdown of how BioDetect works:
Python FastAPI Backend: This is the core of the app. When a user uploads an image, it gets processed by FastAPI. The backend sends the image to Google’s Gemini-1.5-Flash API, which analyzes it and returns a detailed description.
Data Parsing: The API response is packed with rich insights, so I wrote logic to parse out the key details like species, characteristics, and habitat. This keeps the user-facing data concise yet informative.
React Frontend: The frontend is built with React, designed to showcase the image and information in a clean, digestible format. I used React Hooks to manage the state of the application, ensuring a smooth and dynamic user experience.
3D Animation with WebGi: I wanted to go beyond static information, so I integrated a 3D butterfly animation using WebGi. As users scroll through the page, the butterfly interacts with the content, creating a captivating effect that brings the natural world to life.
Pushing Myself as a Developer
Building BioDetect wasn’t just a coding exercise, it was a learning journey. As someone who lives and breathes backend development, diving into frontend technologies like React and WebGi was challenging but incredibly rewarding. I grew as a developer, learning how to balance both the front and back ends of a project while keeping the user experience at the forefront.
There were definitely moments of frustration (especially with the 3D butterfly), but there’s something deeply satisfying about seeing your vision come to life. And now, with BioDetect, I’ve created something that blends education, technology, and design in a way that feels both informative and magical.
Try BioDetect and Support My Journey
I’d love for you to check out BioDetect and let me know what you think. Whether you’re a nature enthusiast or just curious about how it works, I promise it’s a fun and educational experience.
➡️ Try BioDetect
➡️ Watch the Demo Video
➡️ Vote for BioDetect
I’m really excited to see how far this project can go, and I’m grateful for any support you can give by voting or sharing!
Looking for Opportunities!
Finally, I’m currently on the lookout for opportunities as a backend or fullstack developer. If you know of any openings or can refer me to someone who is hiring, I’d love to chat. Feel free to reach out!
Thanks for joining me on this journey, BioDetect wouldn’t be where it is without the initial curiosity, countless hours of development, and a little push from the Google Gemini competition. I can’t wait to see what’s next!
Let’s build something incredible together!
Links:
This content originally appeared on DEV Community and was authored by Nnaemeka Daniel John
Nnaemeka Daniel John | Sciencx (2024-09-28T20:25:42+00:00) Building BioDetect: Turning a Simple React App into a 3D Butterfly Experience with WebGi. Retrieved from https://www.scien.cx/2024/09/28/building-biodetect-turning-a-simple-react-app-into-a-3d-butterfly-experience-with-webgi/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.