Inspiration
We were inspired by the urgent need to protect endangered species around the world. We wanted to create a fun, interactive way to educate people about conservation and show how different species are connected to different parts of the globe.
What it does
Protect Our Pals allows users to search for an animal species by name, view its endangerment status, and see the countries where it lives. The app features an interactive 3D globe that highlights regions associated with each species, making the learning experience more visual and engaging.
How we built it
We built the project using React for the frontend, and integrated libraries like react-globe.gl and three.js to power the interactive globe visualization. We used Axios to connect to the IUCN Red List API and fetch live data about endangered species. Our team also built clean, reusable components like a Hero Section and Feature Cards to organize the site layout.
Importantly, we came into this project with zero web development experience — we had never used React, worked with APIs, or even set up a basic web app before. We learned everything from scratch over the course of this hackathon: installing packages, setting up components, handling Git errors, troubleshooting build issues, and working with assets like images and JSON files. It was a real crash course in full-stack problem solving.
Challenges we ran into
There were many challenges, especially around managing React hooks, debugging API calls, loading external GeoJSON data for the globe, and solving Git workflow issues (like missing branches and remote conflicts). Setting up and correctly connecting all the libraries and assets without any prior web experience was definitely one of the toughest parts. We tried using three different APIs, but unfortunately, we couldn't get live data from the IUCN Red List to work. To keep moving forward and demonstrate our project, we built a small curated database with a few example endangered species.
Accomplishments that we're proud of
We're proud of integrating endangered species data into an interactive globe, creating a project that's both educational and visually appealing. We also learned how to collaborate effectively on a React project, even when facing unfamiliar libraries and tools.
What we learned
We learned a lot about working with APIs, handling asynchronous operations, and managing external libraries in a React environment. We also gained experience in project structure organization, using Git collaboratively, and troubleshooting complex frontend issues.
What's next for Protect Our Pals
We want to expand Protect Our Pals by adding more detailed information about each species, like photos, habitat descriptions, and conservation actions people can take. We want to write algorithms that can help recommend animals similar to the one currently being displayed, and the users will have the chance to choose to sort by family, location, or conservation status. We also plan to add user accounts where people can bookmark species they care about and track conservation news updates. Since our target audience is primary school students, we hope to make it more visually appealing and engaging.
Log in or sign up for Devpost to join the conversation.