STIOPG - Papoi - Root Routes

Root Welcome Screen (background credits: _Vingart_ on Pinterest)

Inspiration ˙⋆✮⋆˚࿔

Many young adults struggle with getting active/getting outside, and connecting with other people, as well as connecting with nature and the land around them.

Health is like a domino effect — improving one aspect of it (such as mental health) improves other aspects (like physical health). Getting outside is good for improving mental and physical health, which in turn leads to improved social well-being. Environmental health also affects mental and physical health, so we wanted an app that didn't just focus on the individual's health, but also fostered a connection with their community/local environment. We also noticed that although there are apps that track metrics such as heartbeats and steps taken, tracking the time the user spends outdoors is less common.

We wanted to give people who want to go outside more often an incentive to do so, provide a means to connect with other people in their community, foster a connection with the local landscape, and promote social connection through social change.

What it does 𖠰

The user enters their community within Calgary, as well as the time they are aiming to go outside. "Root Routes" starts a timer and gives the user a challenge — find a tree of a random species within your neighbourhood. The user can access a map within the app to see where the trees are located. Upon arriving at a tree, the user can ask the app to identify the tree. The app compares the user's location to the locations of trees in the database. If the tree species and location matches the user's location and their given species, the tree and the route information (whether they reached their goal time) are added to an entry under the "Routes" tab, so the user can look at the trees they've found.

At any tree they've been to, the user can leave a review on the tree or report the tree. Any user who has visited a particular tree can view reviews on it. Reporting the tree links to the City of Calgary's Contact Urban Forestry page.

How we built it 𖢥

We used Figma to make designs for the pages on the front end. We tried to keep our UI as simple and intuitive as possible, as ideally the user would not spend a lot of time looking at their mobile device while walking for safety reasons, as well as not to take away from their immersive time spent in nature.

The front end was made using React with Typescript and CSS. Vite was used along with this for running the development server. A new technology to us that we utilized was Leaflet.js (specifically for React) which is an open-source JavaScript library for building interactive maps.

The back end was created with FastAPI and SQLite with python. The City of Calgary tree dataset is imported by the back end to create our database, which can then be fetched through FastAPI via requests.

As usual, we used Git and GitHub for version control to foster clean and clear code development.

Challenges we ran into (╥﹏╥)

Coming up with ideas is not easy even when we have a lot of time to do so — finding an idea that was relevant to all parts of the prompt was tricky, and we struggled the most to incorporate a social connection aspect into our project. We felt that our project still hit the other criteria in a meaningful and novel way, so we pushed forward with this idea!
For one of our team members, who majors in Electrical Engineering, working with Typescript and React was difficult and unintuitive compared to working with other programming languages.
For all team members, the time crunch, while always trying to keep the prompt and main purpose in mind was challenging. To mitigate this, at regular intervals we checked in with our tasks of development, bringing it back to the "thesis" of the prompt!

Accomplishments that we're proud of ◝(ᵔᗜᵔ)◜

We are proud of getting a functioning back end. In a previous hackathon, we didn’t have the skills or the knowledge to try this out so we are glad we were able to tackle this problem. We were a bit worried about finishing the design and consistent UI of the application, but in the end we put together the system in a way that we can all be very proud of!
Another accomplishment we are proud of is our lack of AI usage in our project. Entering a hackathon with significant prizes and swag can make it easy to fall into the trap of vibe-coding and not understanding what "you" are building. AI was only used in functional prompts when we were stuck at a task, or needed help debugging a problem (e.g. ChatGPT, Gemini 3 models).

What we learned ¯\(ツ)/¯

New tech: FastAPI, SQLite, Leaflet.js
While researching Calgary's trees, we found lots of interesting sources (such as a map of trees owned by the City of Calgary, which we referenced to create the map in our app) and learned a lot. A major goal of the app (aside from getting the user outdoors) was to create a connection between the user and their environment, and for us, creating this app helped us see how we can strive for this connection ourselves.

What's next for Root Routes ⌯⌲

In the future, we could expand on the social connection aspect of the app. One idea that we had was to have a way to organize group walks with other people using the app within the user's community, but we weren't able to implement this.
In terms of our current implementation, we would also aim to polish our system in terms of both design and code quality. For example, we could further explore and bring depth to the map feature.