With the advent of COVID-19, getting enough exercise and fresh air is an issue people are facing. Regular exercise can improve your physical and mental health considerably; thus, we wanted to introduce the exciting practice of getting off your butt and exploring the world around you.

What it does

Trailblazer provides an assortment of trails for you to hike based on your location. The routes for these trails are then conveniently visualized on Google Maps and Google StreetView.

How we built it

We built Trailblazer using React, Node.js, Python, and an assortment of node packages. We use the React navigator module to grab the geographic coordinates, which are then processed by Hiking Project's public data API. After retrieving a set of nearby trails, the user is prompted to select one available. Once a trail is chosen, we grab the GPX (GPS Exchange Format), which is used to describe waypoints, tracks, and routes. From there, we convert the GPX to GeoJSON, a format readily feedable to the Google Maps API, displaying the selected route. To render StreetView, we feed Google's Geocoding API relevant trail metadata to get the closest, available, yet recognizable StreetView to the selected trail's geographic location.

Challenges we ran into

Building a React app for the first time comes with many challenges. With the way the Routes piece together different components and the syntax having a learning curve, it was often frustrating to figure out even the simplest of errors. We ran into difficulties with managing asynchronous functions. When making API requests, blocks containing multiple functions would run concurrently rendering any form of linear debugging to the console useless. Furthermore, we spawned another thread in the middle of an API route to load a Python script to web scrape, returning data back to our API. We ran into issues when trying to web scrape GPX files. The parsing of hidden and dynamically loading input fields proved to be difficult.

Accomplishments that we're proud of

Although we ran into many barriers, our ability to bounce back and overcome is something that we're proud of. Though countless errors stopped us for long periods of time every few hours or so, we continued to march on and complete the goals we had set at the beginning of the hackathon.

What we learned

Our overall knowledge of interactions between front-end and back-end web development, API usage, and web scraping increased tremendously over the past 36 hours.

What's next for Trailblazer

We believe that Trailblazer has plenty of potential, and, much like all great apps, room for improvement. We would like to see trails visualized in 3D space using Google Earth as well as real-time location tracking on the trail to show your relative position at any point in time. Additionally, an improved UI/UX would make the site just a touch more pleasing.

Built With

Share this project: