Deervolution

Inspiration

With UTM being a commuter-heavy campus, many students tend to stay indoors or speedwalk through familiar paths. Recognizing students' love for the deer that roam the campus, we wanted to create an engaging way to encourage exploration of everyday surroundings (campus-related or not) and appreciation of nature. By gamifying wildlife photography, Deervolution fosters a deeper connection with the environment while subtly raising awareness of climate change and conservation efforts. But wait, there's more — the game creates an opportunity for students to bond over friendly competition, making campus exploration a shared and exciting experience

What it does

Deervolution is a mobile-friendly web app that motivates students to explore their surroundings through a Pokémon-style game. Users earn points by capturing photos of animals they encounter while walking. The app includes:

Secure sign-up and log-in to track user progress
In-app map to display the user’s location
Real-time animal icons on the map that appear when users (yourself or others) submit an animal picture, incentivizing others to walk to that location (icons despawn after about an hour)
Image upload and recognition to verify animals in submitted photos
Animal tracking system that logs captured species and assigns point values
Leaderboard ranking to display top users based on points earned
Personal profile tracking and displaying the number of each animal type captured

How we built it

Frontend: Typescript, CSS, Figma, Vite, React, Google Maps API The frontend was built with React + Vite, and the usual HTML components with our own CSS styling. We used TypeScript to ensure that types are declared for all variables and objects, ensuring reliability of our code. We mocked up designs of the app first in Figma, then used this as a guide to designing the app in code. Backend: Node.js, Express.js, PostgreSQL, Typescript, Python The backend is a Node.js server using the Express framework. We used Python to interact with our pretrained image classification model. Tying everything together is a PostgreSQL database that stores user authentication and information essential to running the app.

Challenges we ran into

Integrating the database was difficult, as we needed to determine a balanced level of efficient table relationships and indexing
Unexpected errors and bugs arose when deploying the web app, requiring heavy troubleshooting and debugging

Accomplishments that we're proud of

Deployed a working prototype of the mobile-friendly web app
Implemented a secure database system that manages user authentication, stores submitted pictures, and tracks user progress

What we learned

How to use SQL and Supabase to securely manage user authentication and track submissions
How to train an existing image recognition model for specific animals

What's next for Deervolution

Develop a mobile app version for a more seamless user experience
Introduce a competitive game mode, allowing users to challenge each other to capture the most animals within a set time