Inspiration

The inspiration for this project really just came from our own knowledge of the importance of the environment. We wanted to create a change in our own, unique way to help save animals from endangerment and extinction.

What it does

The centerpiece of Animalia is the two-player game. A question is sent from the server to both players at the same time, and the first player to answer it correctly wins the point. The player with the most points at the end of nine questions wins. Surrounding the game are many other features, including a global chat system, rating system, leaderboard, statistics pages, and even various facts about endangered species from the U.S. Fish and Wildlife Service.

How we built it

We built Animalia by utilizing Replit's real time collaboration features. We built the frontend on a Bootstrap template to make a more appealing user experience. We used HTML, CSS, and JavaScript on the client side, and python for the backend functions like logins and accounts. The backend creates dynamic content on the pages with a Flask server using the Jinja templating engine. The game itself was created using websockets. The server runs a socket server, which both players of the game connect to. The socket server distributes questions and handles answers, points, and ratings. Questions come from an open API about animals. The chat system works similarly, but using websocket broadcasts as the chat is global to all online users. The ratings and accuracy of users is stored in a CockroachDB server in the cloud, which is similar to PostgreSQL. The endangered animal facts on the front page use the ECOS REST API provided by the US FWS. We also use an javascript API to get a unique picture for users on their profile page based on their username.

Challenges we ran into

On the way, we ran into many road bumps, but learned valuable lessons from them at the end. For one, we were not entirely familiar with Bootstrap’s CSS before this hackathon, which caused a lot of head-scratching for seemingly simple tasks. Additionally, we weren’t sure how to develop a websocket server in python. We overcame this by using the websockets library’s documentation. We also had to deal with the quotas that our database provider (CockroachDB) set for the free tier. We did this by caching the user data for specific actions and updating the cache every 5 minutes. Another issue we ran into was when we made a profile page. This page had an accuracy statistic, which was calculated by the number of questions answered correctly divided by the number of questions asked. If the user was new, the number of questions asked would be 0, and because it is impossible to divide by 0, it caused an error. We resolved this by not calculating the user’s accuracy until the user has answered a question.

Accomplishments that we're proud of

We are proud that we were able to put together this app in such a short period of time, since this was our first hackathon ever. We’re also proud we were able to find a good, socially practical use for many of the technologies we had learned previously.

What we learned

As beginners, we really learned a lot throughout this hackathon. We learned how to use many different libraries and technologies. These include websockets in Python, which were really interesting to see integrated into our webapp. We learned more about frontend development, including Bootstrap and web design.

What's next for Animalia

In the future, we may expand the scope of the program. We may find more APIs, or even dynamically generate questions through web scraping and natural language processing. Additionally, we might use the infrastructure of the site to expand into other subjects that need more attention from the general public.

Share this project:

Updates