EcoDex

Inspiration

Our inspiration for EcoDex comes directly from the charm and exploration found in early retro Pokémon games. We wanted to capture that feeling of discovering creatures in your own environment, reminiscent of venturing into the tall grass. The pixel art style, the idea of identifying and learning about different species, and the goal of creating a personal collection ("Pokedex") of local wildlife all stem from those classic games. We aimed to blend that nostalgic gameplay loop with a real-world educational purpose: connecting users with the nature right outside their door

What it does

EcoDex identifies local wildlife from photos you take or upload. How it works:

Capture/Upload: Use your device's camera or upload an image file directly on the home page.
AI Identification: The image is sent to an AI model (Google Gemini), which identifies the species in the photo.
Get Results: The website displays the results on a new page, showing: The common name and scientific name of the species. Its status at your location (Native, Invasive, Endangered, or Common). A brief description of its role in the local ecosystem, and the original image you submitted.

How we built it

We built EcoDex using standard web technologies. The frontend uses HTML, CSS, and JavaScript to create the user interface, handle camera/upload functions, display results, and manage the gallery using browser storage (localStorage and sessionStorage). The backend runs on Node.js with the Express.js framework. This server securely handles the Google Gemini API key (stored in a .env file) and acts as a middleman: it receives the image data from the frontend, sends it along with a specific prompt to the Gemini API for identification, processes the AI's JSON response, and sends the cleaned-up data back to the user's browser.

Challenges we ran into

Getting the Google Gemini API connected was surprisingly tricky. We initially faced repeated API key not valid errors. Troubleshooting involved: Ensuring the correct API ("Generative Language API") was enabled in the Google Cloud project. Verifying the API key was correctly placed in the .env file and loaded by the server (fixing issues like undefined keys). Generate new keys after enabling the API to ensure validity. Finding the correct model name (gemini-1.5-flash-latest) for the API endpoint after older versions were deprecated, which caused 404 Not Found errors. Setting up a Node.js backend to securely handle the API key instead of exposing it in the frontend JavaScript. Making the website look and feel right involved several iterations: Layout Consistency: We initially had issues with the page layout shifting when elements like the camera view or loader appeared/disappeared. We fixed this by adjusting CSS, using visibility: hidden instead of display: none in some cases, setting min-height on dynamic elements, and ensuring proper centering rules (margin: auto, align-items: center) were applied to containers. Button Functionality: Implementing custom image buttons that change appearance on hover and click required adjustments. We switched between CSS-based image swapping (content: url(...)) and JavaScript-based src attribute changes, eventually settling on the JavaScript method using data- attributes for reliability. We also had to ensure the JavaScript correctly targeted the right HTML elements (button vs. a) and handled triggering hidden file inputs. Styling Details: Small details like removing the default blue focus outline on buttons (outline: none; box-shadow: ...;) and applying consistent styling (like the semi-transparent background and border) across different sections (gallery items vs. detail page) required specific CSS updates.

Accomplishments that we're proud of

We're proud of successfully integrating the Google Gemini AI to accurately identify wildlife from user images after overcoming several API key and model version challenges. We built a functional multi-page web application using HTML, CSS, and Node.js/Express, implementing features like camera access, image upload, and persistent local storage for the user's sighting gallery. Furthermore, all the UI/UX elements, including the custom button icons and layout concepts, were handmade in Photoshop to achieve a clean, uniform, retro-inspired aesthetic ✨. We also refined the interface based on usability testing, creating interactive button states and establishing a consistent layout. Transitioning to a secure backend to handle the API key was another significant accomplishment.

What we learned

Integrating the Google Gemini API taught us the importance of secure API key management. We learned that keys should never be exposed in frontend JavaScript. The solution was setting up a Node.js/Express backend to act as a proxy, securely storing the key in a .env file and accessing it via process.env. We also learned that simply having a key isn't enough; the corresponding API service (like the "Generative Language API") must be enabled within the correct Google Cloud project. Debugging API key invalid and 404 Not Found errors reinforced how crucial these configuration steps are. On the frontend, we gained practical experience structuring the user interface with HTML, creating different pages (index.html, results.html, gallery.html, detail.html) and linking them. We heavily utilized CSS for styling and layout, tackling challenges like: Implementing a responsive grid layout (display: grid) for the main controls. Using Flexbox (display: flex) for aligning items within columns and sections. Styling interactive elements, including creating custom image buttons ( with ) and handling their hover/active states using JavaScript to change image sources. Debugging visual inconsistencies caused by browser caching (requiring hard reloads) and layout shifts (addressed by techniques like setting min-height or using visibility: hidden).

What's next for EcoDex

A major goal is to fully embrace the retro Pokémon inspiration by using AI text-to-image generation (like DALL-E 3) to create unique, pixel-art style sprites for every species identified. Instead of relying on a limited set of pre-made images, the backend would take the identified species name (e.g., "Blue Jay") and prompt an image AI to generate a sprite in the specific "Gen 5 Pokedex" style. This would happen automatically the first time a new species is encountered, storing the generated sprite for future use. This would create a truly dynamic and stylized "Pokedex" that grows organically. Currently, EcoDex runs locally, meaning it's only accessible on the development machine and the camera feature requires specific browser allowances for localhost. The next crucial step is to deploy the application to a public web hosting service (such as Replit, Glitch, Vercel, or Netlify). Once deployed, the site will have a stable HTTPS URL. This allows us to properly connect the custom ecodex.tech domain via DNS records (A and CNAME) configured through the .tech Domains registrar. This move will make EcoDex accessible to anyone online and ensure features like camera access work reliably across all devices due to the secure connection.