Enduro Stats
EnduroStats is a fitness app that helps users track activities, set goals, and monitor progress with a sleek, responsive design. Currently undergoing a complete ground-up refactor with improved architecture.
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.
Future Improvements:
- Implementing API caching with revalidation and stale-while-revalidate to reduce Strava API requests
- Planning to add friend tracking and activity comparison features
- Need to implement a persistent backend using Supabase/PostgreSQL for social features
- Looking to expand backend development experience through user data management and authentication
Related Blog Posts:
Strava API Integration
Learn how I integrated the Strava API into my fitness tracking app
Enduro Stats Refactor
The complete refactor of my fitness tracking app with improved architecture
Screenshots:
