WRAB - Walking, Running, and Biking

WRAB homepage
Creates a route with given start and end coordinates
Generates a round-trip route with given start coordinates and distance
Displaying hotspots
Popular locations page

Inspiration 💡

Throughout the summer, we’ve frequently gone on runs, walks, and bike rides due to their accessibility and time efficiency. STRAVA, a physical exercise tracker, has been invaluable for documenting our activities and connecting with friends and family. However, when preparing for a run (for instance), we like to plan out our route in advance to check the distance and get a general gist of where we are going. STRAVA doesn’t offer a free route generator, so we often waste a lot of time creating our own routes road by road. Additionally, when running long distances, carrying a water bottle can be quite cumbersome — instead, we typically search for a nearby water fountain or restroom after our run. Unfortunately, STRAVA does not provide information about such facilities on the map. To address these issues, we decided to create our own route generator and hotspot location saver called WRAB!

What it does 👀

Welcome to WRAB! Standing for Walking, Running, and Biking; WRAB is a convenient platform designed to enhance your outdoor activities. On the “CREATE A ROUTE” page, the map can produce a simple route using your start and end coordinates. In the “GENERATE A ROUTE” page, you are able to enter a start coordinate and a distance (eg. 1k, 3k, 10k) to generate a closed-loop exercise path. Coordinates can be entered with the format [longitude, latitude] or selected directly on the map. To prevent unnecessary cluttering, our website features pop-up notifications at the side that disappear after a set time. On the “POPULAR ROUTES” page, you will find well-known route locations with images as a preview. Lastly, our “EXPLORE” tool offers options to display markers, add new hotspot markers, save locations, and delete markers. You can choose from a variety of simple and intuitive icons for your hotspot markers.

How we built it 🤔

We began our project with a minimal functional HTML structure which was styled appropriately using CSS. Once the foundation was in place, we began to integrate the TomTom Map API into our webpage by using JavaScript to display a map. JavaScript was also used to handle user input, allowing us to implement features such as route display, route generation, and marker placement. By intertwining these web development tools—HTML for structure, CSS for styling, and JavaScript for functionality—we successfully implemented the TomTom Map API to create an operative and user-friendly tool for athletes.

Challenges we ran into ⚠️

GitHub Collaboration 🤝

For half our team, it was their first time collaborating using GitHub. At first, there were many merge conflicts we had to resolve due to miscommunication and lack of notifying each other. To address this, we created a discord channel specifically to ping and notify others before and after we committed to the repository. This improved communication and significantly reduced merge conflicts.

Map API Selection 🗺️

We also had difficulty finding a good map API to use as many of them required payments and tedious registration processes. We browsed through several lists and chose TomTom for its comprehensive features and accessibility, which suited our needs well.

Front-End Website Consistency 💻

A conflict that arose in the front-end aspect of our website was inconsistent page formatting when we worked on different sections of the project. To achieve the desired unified professional look, we shared a colour palette and standardized formatting elements (eg. buttons) across pages. This resulted in better visual unity, which ultimately improved user experience.

Back-End for Explore Page 💽

One major backend conflict was debugging our explore page. With the complexity of various combined features, we were confused on when markers would appear, when they would be hidden, and when they would be added. To resolve this issue, we cleaned up our code, deleting unnecessary variables and reordering it such that we were able to clearly identify when and what variables resetted to decide what needed to be changed. Organization was a crucial aspect to solving this issue.

Accomplishments that we're proud of 🥲

Collaboration 🤝

Despite our initial challenges with GitHub, we were able to establish effective communication practices through a dedicated Discord channel—reducing conflicts and improving our collaborative workflow. In addition, whenever someone encountered an issue with their code—whether front-end or back-end—all members of the team were notified and assisted in resolving the problem.

Time Management ⏱️

Given the tight 36-hour time constraint, time management was vital to the success of our team’s project. To maximize efficiency, we divided the project into defined tasks which were prioritized based on a democratic ranking system.

Learning 📖

Overall, this project mainly helped us to learn a lot about programming a website, pages, tools, maps, and even logos. We will elaborate more on this below:

What we learned 📚

In our project, which involved implementing the TomTom Map API with HTML, CSS, and JavaScript, we gained significant insights into the fundamentals of web development. We learned the importance of efficiently reading the documentation of an external API to be able to effectively integrate it into our web application. Through our various features—creating a route between two points, generating a route of a given distance, and marking the map—we were taught how to utilize the components of the map API alongside our JavaScript skills. In addition, we learned about the map latitude and longitude system, as well as spherical trigonometry to determine distances between two latitude/longitude points. Two of our members were new to web development and hackathons, and they felt that they made significant progress in beginning their web development journey. Lastly, the collaborative nature of the project helped us gain experience in the Git version control system — this will prove vital in our future endeavors, as our projects are bound to involve teamwork and effective code management practices.
Overall, this project—despite its brief 36 hours time constraint—provided a comprehensive learning environment in integrating other technologies alongside web development.

What’s next for WRAB 🔎

In the future, we plan to implement a login system that will allow users to save their routes to an account. This feature provides users with access to past/upcoming routes and the ability to publish them to contribute towards a community dataset. Additionally, the map API that we used didn’t include trails, we aim to enhance the user experience by integrating a new API that includes trails. Trails are a crucial component of walking/running/biking, as they offer individuals a more immersive experience in nature, reduce interruptions at traffic intersections, and provide bikers with challenging routes.