-
Access our Dex of dozens of animal species!
-
Learn fun facts about the animals around you!
-
Start a Quest and keep track of the animals you encounter outside!
-
View a summary of your Quest and try to beat your high score!
-
Get a customized email with your Quest results!
Inspiration
Me and my teammate met in college, where we both studied Wildlife, Ecology, and Conservation. As avid gamers and fans of Pokémon, we wanted to merge all of our interests into one. Our goal was to make a fun, interactive, and educative app that people of all ages can enjoy.
We understand the importance of wildlife education and how that goes hand in hand with animal conservation. You can't protect and fight for a cause that you don't know about. We include facts about each animal and that includes their biggest threat. Overall, we hope that users learn more about the animals around them and are motivated to go out and explore!
What it does
AnimalDex is a Pokémon inspired application that brings the fictional universe to life by allowing users to discover and "catch" real animals. There is a Dex feature where users can browse dozens of species, search for specific ones, and learn fun facts about them all. They can then go on a timed Quest and see how many different animals they can spot.
How we built it
We started with creating a wireframe in Figma where we defined each page of our app. We used Vite and React to create our project. We also used an API for animal facts (Animals by API-Ninjas) and animal pictures (AWS S3). We gathered all of the pictures ourselves from free stock photos that we removed the background from. We split our app into two features: The Dex and the Quest. We used React Router DOM to handle user navigation and routing.
Challenges we ran into
Fetching from our AWS S3 bucket using AWS SDK was probably the most difficult part just because the documentation was not the best and we had to sift through a lot of different resources to configure our API properly. We had some issues deploying our code to GitHub Pages as well regarding our environmental variables, but figured it out through tutorials and other resources.
Accomplishments that we're proud of
Everything that we initially planned in our wireframe was accomplished. No API exists for transparent animal images, so we are proud of creating one ourselves. Also, sending emails to users was something we felt great about when we found the right software to use. We are just proud to see all of our ideas come to life.
What we learned
This was the first time either of us have used AWS S3, but we knew that made the most sense for all of the animal pictures we wanted to include. That was a fun learning experience creating that API. We also used EmailJS for the first time which is a useful service that allowed us to email a user their quest results. We also broadened and solidified our knowledge of React and React handlers such as various use cases of state, useEffect, and more.
What's next for AnimalDex
We definitely plan on adding more animals to our API; we want users to have access to hundreds of animals. We also want to revamp the design of the application to be more modern. A backend to our application would help persist user data so they can constantly keep track of the animals they discover around them.
Log in or sign up for Devpost to join the conversation.