Why I built Waypoint

With the start of the COVID-19 pandemic and the resulting shift to working from home, I lost access to the 1-mile loop trail right next to my office building. I’d made a habit of taking walks during lunch and at other points of the work day to get away from my desk and get some exercise. With the stress of the pandemic and the shelter-in-place order, it felt risky to go to local public trails, and my motivation to get outside and exercise decreased.

Shortly after that, I discovered Conqueror, and then many other virtual distance challenge companies. Many have their own apps that synchronize automatically with fitness tracking systems, but not all of them do. Some companies require you to submit proof of your distance travelled and the time it took via their website. Some simply ship your medals after registration, and use the honor system.

I wanted a way to track my distances that wasn’t a sheet of paper or a spreadsheet on my computer. After looking for a pre-made app or website, I didn’t find anything I liked and decided to make my own.

Waypoint uses the honor system for distance reporting, but in a way that puts ownership back in the user’s hands. It doesn’t require any personal data such as a screenshot (which has embedded metadata), map log, or GPS coordinates.

Using Waypoint to build my skills

I developed Waypoint using HTML, CSS, JavaScript, and the Bootstrap 5.1 framework. When I started working on it, I wasn’t very confident with JavaScript, so I used Waypoint as an opportunity to learn more. I had never built a website that stored user data in a database either, which proved to be another valuable learning opportunity.

Storing user data

My first version of Waypoint used localStorage to store and retrieve data from each user’s device. This worked well and was very fast, but came with some limitations:

• Users couldn’t synchronize data between devices
• Migrating data from one device to another was difficult to make secure and prevent hacking attempts
• User data wasn’t shared between web browsers on the same device
• If a user lost or reset their device, they would lose their Waypoint data

I tried setting up a MySQL database and quickly realized I didn’t know enough to make this a secure and reliable solution. Through developing my Living PokéDex Tracker web app, I learned about Firebase, and chose to migrate Waypoint to a Firebase back-end. This allowed for synchronized user data backed up to the cloud.

Designing the interface

I designed the interface from a mobile-first perspective, intending to streamline the web app for use on mobile devices. The base screen width is 375px to match the iPhone 6 and 7, and the interface scales up and rearranges as needed for larger devices.

I built it with a clean, intuitive, and simple interface that allows users to track distances for multiple challenges. They can either log one distance and add it to all active challenges, or enter distances for an individual distance challenge.

Screenshots