Enduro Stats
EnduroStats is a fitness app that helps users track activities, set goals, and monitor progress with a sleek, responsive design.
Technologies Used:
Project Links:
Explanation:
A personalized fitness dashboard built to track my running progress and visualize activity data from Strava as I trained for the 2024 Toronto Waterfront Marathon. This project started as a personal tool for myself and evolved into a public-facing web app designed to help other runners easily track performance trends and gain insight into their training.
Challenges and Key Features:
- Implemented secure OAuth 2.0 authentication flow with Strava using Next.js API routes for user connection and activity fetching.
- Developed backend API logic for token handling, caching, and pagination to optimize API requests and stay within rate limits.
- Built an interactive, data-driven dashboard that visualizes complex datasets — making performance trends easy to understand at a glance.
- Designed a fully responsive UI focused on clarity and usability across devices.
Implementation Details:
To integrate with the Strava API, I implemented OAuth authentication to securely obtain and store access tokens. I created API routes using Next.js to handle the OAuth callback, exchange the authorization code for an access token, and store the token securely in cookies. Additionally, I set up API routes to fetch user activity data from the Strava API using the stored access token. To ensure efficient data handling, I implemented caching and pagination mechanisms. This approach allowed me to securely and efficiently fetch and display running statistics in the application, providing valuable insights and visualizations for users.
What I Learned:
- Gained a deeper understanding of React and Next.js, including server-side rendering and client-side navigation.
- Enhanced my skills in frontend development, focusing on responsive design and user experience.
- Acquired skills in API development and integration, including authentication and data handling.
- Learned best practices fro data visualization and handling large datasets.
Changes:
The website was built to be a personal dashboard for me to track my running statistics and visualize my progress, but as I got more comfortable with interacting with the Strava API, I decided to make it a public website to help other runners. In the future I plan to add more features to the website to help runners in their training journey. Also I would like to add the ability to add friends and compare runs and rides. Much of the features I would like to add are more dependent on an actual database and backend, which I am working on learning.
Screenshots:
