MadDash

A React-based run tracker for the UW Madison community. Plan custom routes via Google Maps, track live GPS progress, and calculate calories burned on the go.

Comment

Inspiration

Running around the UW-Madison campus offers great views, but planning the perfect route and tracking metrics accurately can be a hassle. We wanted to build a tailored solution for the local running community that did not just map a run, but actively tracked live progress and provided dynamic health metrics in real-time.

How we built it

MadDash was developed using React and Vite for a fast, responsive frontend. We integrated the Google Maps JavaScript API, utilizing the Directions and Places services for custom route generation and autocomplete. For live tracking, the app hooks into the browser's navigator.geolocation API to consistently watch the user's position.

To calculate the precise distance traveled between GPS coordinates, we implemented the Haversine formula:

$$a = \sin^2\left(\frac{\Delta\varphi}{2}\right) + \cos\varphi_1 \cdot \cos\varphi_2 \cdot \sin^2\left(\frac{\Delta\lambda}{2}\right)$$

$$c = 2 \cdot \text{atan2}\left(\sqrt{a}, \sqrt{1-a}\right)$$

$$d = R \cdot c$$

For dynamic calorie estimation, the app calculates the Metabolic Equivalent of Task (MET) based on real-time pace. The core logic relies on this formula:

$$\text{MET} = \frac{90}{\text{Pace}}$$

This value is clamped between 6 and 14, and then plugged into the final calorie equation:

$$\text{Calories} = \text{MET} \times \text{Weight} \times \text{Duration}$$

Challenges we ran into

Handling asynchronous state in React while managing continuous live GPS data streams was tricky. The browser's geolocation API can sometimes return jumpy or inaccurate coordinates, which required careful handling to smooth out the distance calculations. Additionally, configuring the Google Maps SDK to seamlessly draw and update routes dynamically took significant troubleshooting, especially when integrating the Places autocomplete feature with the live map.

What we learned

Building MadDash solidified our understanding of React state management and modern frontend build tools like Vite. Applying computer science and data science principles to implement geographic algorithms directly into a web app was highly rewarding. We also gained practical experience managing third-party API integrations and handling real-world, noisy data like live GPS signals.

Share this project:

Updates