One pressing problem students experience, especially during virtual learning and the pandemic, is staying active. In school, students have mandatory Physical Education class, but the motivation to exercise during remote learning and social distancing falls off dramatically. So the challenge for us was: How can we encourage people to stay active while still maintaining social distancing rules? Our solution was Walk The World. Since many tourist destinations are now closed, such as museums or national parks, we decided to offer virtual visits as an end “reward” for walking, with various cultural landmarks along the way. In fact, we joked that it’s somewhat similar to Pokémon Go, one of our big inspirations. We realized this web app could help non-students as well, as they can have an incentive to exercise during the pandemic while learning about regional cultures and landmarks.

What it does

Our web app tracks the distance the user travels, and after certain checkpoints, a cultural or educational experience will be available. Under the homepage, the user is given a quick overview of what experiences our project hopes to create, as well as previews of educational incentives. Our second page, the how to page, breaks the process of tracking and earning distance down into a few brief steps and also reminds the user to adhere to social distancing guidelines. On the final page, the tracker page, the web app can return the number of miles already reached, and display how many more are needed to reach the goal. Checkpoints leading up to a final destination that corresponds to the goal distance are collected and screened to make sure they are above four star establishments (if there are none available that are rated above four stars, we provide a random one). Moreover, our project continuously looks for farther and farther establishments to ensure maximized distance and to provide newer experiences that the user may not have already encountered. To illustrate what our web app does, here’s an example:

~Let’s say two of our group members start using our web app and go for a 6 mile walk. They choose Times Square as their goal destination and put in their goal distance of 6 miles. Our project will map a route ending at Times Square with a cumulative distance of 6 miles and arbitrary checkpoints throughout. For example, the route may look like this: Essex Crossing--> Hamilton Fish Park--> Tenement Museum--> World Trade Center-->...-->Times Square. These checkpoints are chosen randomly within the vicinity of the preceding checkpoint, and the cumulative distance between the checkpoints will be equivalent to the goal distance of the user. Our hope is that in this way, users will discover new places virtually and be motivated to walk and reach their goals.

How we built it

We first used Figma to create a wireframe so we could express the vision we had in our heads. We used Adobe Illustrator for designing the logo. HTML, CSS, and Javascript were used to create the user experience. Python was used as well to track the distance traveled and to retrieve data about nearby establishments, allowing the web app depth. To connect the frontend and backend, we used Flask with Python. We worked together on the web app using an extension called Live Share through Visual Studio Code which allowed us to simultaneously edit code. For those of us editing remotely, we used the Visual Studio Code extension Live HTML & JS Previewer v2 and to preview the web app.

Challenges we ran into

Our team was not experienced in connecting the frontend design with the backend data, so we encountered many difficulties while trying to do so. In fact, we ended up not being able to properly integrate the two ends. We asked for help from Chris, a mentor, and were able to receive some resources to help with this challenge. Moreover, one of our group members mainly worked on the backend while the other two primarily worked on the frontend. This distribution of roles made it difficult for those of us working on the frontend (who were not very experienced with backend) to understand what the variables represented, what the key value pairs were used for, and how location data was utilized. We also had trouble organizing the preview images on the first page into an equally-spaced format with the same sizes. We tried several solutions with Flexbox and CSS grid, sharing resources such as Flexbox Froggy to resolve this challenge. A more general challenge we encountered was that for two of our members, this was our first hackathon. Our most experienced member gave several lessons and code walkthroughs to help increase understanding and knowledge. Moreover, attending the workshops, such as the Introduction to Github and Version Control workshop, was very valuable for learning more about hackathons, understanding concepts in computer science, and gaining skills. In general, when running into challenges, our approach was to communicate with each other, use resources, try different solutions, and ask for help.

Accomplishments that we're proud of

We’re extremely proud of our project, because we were able to utilize location to create a functional web app fulfilling our MVP (minimum viable product) in a short amount of time, all while getting to know each other. We had never worked together as a group before, so throughout the project not only were we hacking but also learning more about each other. We’re proud that we were able to create something that addresses physical education and virtual learning through cultural institutions and landmarks, parts of the remote learning experience that we are concerned about. We’re also very happy about how we handled communicating virtually, with Discord calls, sharing screenshots and examples to communicate our ideas, and collaborating through Live Share. In general, we’re proud that we kept an open mind and tried lots of new things during this hackathon, incorporating Google Places API, Google Geocode API and also attending workshops to learn about concepts new to us such as neural networks, data science, and AR/VR.

What we learned

We learned a lot about frontend/backend development as the majority of our team has never participated in a hackathon before so a project that contained this many parts was the first of its kind for us. Despite our inexperience, our team consistently made an effort to learn as much as possible. Thus, on Saturday night, when our web app had all of the essential components, our team spent an hour going through the backend code together, one of us presenting and sharing his screen and two of us watching and asking questions. This helped us all to reach a general understanding of what was going on with the backend and made the project and submission more cohesive. It was through our resilience in the face of challenges, that we were able to learn a lot about new languages and syntax such as CSS rules and Python dictionaries. While working as a newly-formed team, we learned about the strengths and weaknesses of each team member and assigned roles accordingly.

What's next for Walk the World

We hope to expand on our minimum viable product In the future, features we would like to include are the option to create password-protected accounts, a feature to race friends, leaderboards, more modes (users can select destinations as their start and end goals), a display of most popular destinations, and a feature to import data from Apple Health, Strava, Nike Run Club, and other apps/devices which track fitness levels. In general, we would like to improve the user experience by adding more fun and helpful features. We would also like to develop relationships with other businesses and educational establishments to possibly offer discounts as rewards for completing distance goals at those locations.

Built With

Share this project: