DEV Community

Peetiphat
Peetiphat

Posted on

Building 'The Endurance Log' 🏃‍♂️: A Full-Stack Next.js Strava Dashboard (Updated)

#nextjs #react #webdev #database

Introduction: The Runner's Dilemma

If you're a passionate runner, you likely use Strava to track your activities. But what about tracking the wear and tear on your favorite shoes? Or visualizing your long-term milestones in a custom dashboard alongside your local weather?

Enter The Endurance Log, a dynamic, full-stack application built to give you total control over your running analytics.

This article serves as both a comprehensive User Guide (detailing how the app works for runners) and an in-depth System Document (breaking down the architecture, schemas, and structural choices).

Part 1: Comprehensive User Guide 🚀

The Endurance Log is designed to be your pre- and post-run command center. Here are its core interactive features:

1. Smart Dashboard & Seamless Strava Sync

The heart of the app automatically connects to your Strava account. By navigating through a seamless OAuth flow natively integrated into a settings modal, the app continuously syncs your recent activities. It fetches exact distances, elevation gains, and activity times, dynamically plotting them directly in a personalized dashboard.

2. Intelligent Gear & Shoe Tracker

Running shoes have a lifespan—usually around 300 to 500 miles. Our Gear Tracker lets you input your current shoe roster, tag their brand/model, establish a starting mileage, and set a custom "target lifespan". As you log kilometers (via Strava or manually), you can visualize progressive wear-and-tear of your favorite pairs before they cause injuries, with detailed visual health bars.

3. Dynamic Weather & Route Map Visualization

Using the OpenWeather API, the application pulls live weather data into your dashboard to help coordinate outdoor activities. The app also features a dedicated Route Tracker that converts complex Strava polyline data into beautiful, smooth SVG map routes to catalog your favorite paths.

4. Consolidated Settings System (New Update)

System configurations, including the Strava API tokens (Client ID, Secret, and Refresh Token) are now administered entirely via a "System Settings & Integrations" UI. Environment variables for user keys are a thing of the past!

Part 2: Advanced System Architecture & Documentation 🛠️

Under the hood, The Endurance Log utilizes a bleeding-edge JavaScript ecosystem. The development principles focus on modularity, high performance, and rapid UI development.

The Technology Stack (System Dependencies)

  • Frontend: Next.js (App Router), React 19, Tailwind CSS v4 for a highly responsive brutalist aesthetic, Lucide React (for iconography).
  • Backend: Next.js API Routes (/app/api/*) securely handle internal logic, webhook processing, and external communication.
  • Database & ORM: PostgreSQL schema powered by Prisma ORM (@prisma/client) running on a local or remote server.
  • Integrations: Strava API (OAuth 2.0 & Webhooks), OpenWeatherMap, with advanced geometry parsing by Mapbox (@mapbox/polyline).

Relational Data Models (Prisma Schema Docs)

The database is strictly typed and relationship-driven:

  • Activity: Unifies synced Strava runs and manual entries. It avoids duplicates natively using the stravaId unique constraint and handles relation links to Gear.
  • Gear: The underlying tracking model for shoe lifecycle, integrating image links and Boolean toggles for isDefault.
  • Route: Persists encoded polyline strings and elevation checkpoints, allowing quick rendering.
  • UserSettings: Securely holds Strava OAuth tokens to maintain a persistent connection without enforcing daily logins. It securely isolates API keys away from .env files.

Architectural Flow: Database-Driven Settings & OAuth Integration

Instead of hardcoding sensitive user tokens or using inflexible .env parameters, The Endurance Log now handles dynamic credentials natively.
Users paste their API details into the dashboard. On execution, the application runs an OAuth redirect to https://www.strava.com/settings/api. Authorized refresh tokens are automatically updated in the Postgres database via dedicated Next.js server actions, guaranteeing reliable background synchronization loops without application downtime.

Conclusion

The Endurance Log represents more than just a typical data wrapper—it’s an end-to-end framework translating raw user paths into functional athletic insights. Whether mapping out custom workflows, evaluating precise database schemas, or extending the shoe lifecycle logic, the application remains scalable across both the front and back end.

Have you built fitness tech or integrated with Strava? Feel free to ask questions about the architecture or dive into the codebase!

Top comments (0)