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

Peetiphat — Tue, 07 Apr 2026 15:56:10 +0000

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!

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

Peetiphat — Mon, 06 Apr 2026 10:34:44 +0000

Introduction: The Runner's Dilemma

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 User Guide (how the app works) and a System Document (how the app is built), breaking down the architecture choices and the underlying tech stack.

Part 1: The User Guide 🚀

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

1. Smart Dashboard & Strava Sync

The heart of the app automatically connects to your Strava account. By navigating through a seamless OAuth flow, the app continuously syncs your recent activities. It fetches exact distances, elevation gains, and activity times, displaying them in interactive user interfaces.

2. Gear & Shoe Tracker

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

3. Dynamic Weather & Route Visualization

Using the OpenWeather API, the application pulls live weather data directly into your dashboard, helping you decide whether to grab a windbreaker or sunscreen.
Additionally, the Route Tracker converts complex Strava polyline data into beautiful, smooth SVG maps showing your favorite custom runs.

Part 2: System Architecture 🛠️

Under the hood, The Endurance Log relies on a modern, robust JavaScript ecosystem. Let's look at the system architecture.

The Technology Stack

Frontend: Next.js (App Router), React 19, Tailwind CSS v4, Lucide React (for iconography).
Backend: Next.js API Routes handle server-side logic and third-party API communication.
Database & ORM: PostgreSQL managed flawlessly by Prisma ORM (@prisma/client).
3rd Party Integrations: Strava API (OAuth 2.0 & Webhooks) and OpenWeatherMap, with mapping utilities by Mapbox (@mapbox/polyline).

Data Models & Prisma Schema

The database architecture is centered around four main entities:

Activity: Unifies synchronized Strava runs and manual entries. It avoids duplicates by enforcing unique constraints on the stravaId.
Gear: Tracks shoe lifecycle, including images and default status.
Route: Stores saved paths using encoded polyline strings.
UserSettings: Securely holds Strava OAuth tokens (Client ID, Secret, and Refresh Token) to maintain a persistent connection with the Strava API without forcing the user to log in daily.

Strava OAuth Flow integration

Instead of storing sensitive User passwords, The Endurance Log redirects users to https://www.strava.com/settings/api. Once authorized, Strava returns a refresh token. The backend securely saves this inside the Postgres database, allowing background data syncing via Next.js server actions.

Conclusion

The Endurance Log isn't just a data wrapper—it’s a highly tailored dashboard bridging the gap between raw GPS data and actionable training insights. Whether you want to prevent overusing your shoes, map out your best routes, or simply admire your lifetime mileage, the system is built to scale alongside your fitness goals!

Have you built fitness tech or integrated with Strava? Drop a comment below!

Forem: Peetiphat

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

Introduction: The Runner's Dilemma

Part 1: Comprehensive User Guide 🚀

1. Smart Dashboard & Seamless Strava Sync

2. Intelligent Gear & Shoe Tracker

3. Dynamic Weather & Route Map Visualization

4. Consolidated Settings System (New Update)

Part 2: Advanced System Architecture & Documentation 🛠️

The Technology Stack (System Dependencies)

Relational Data Models (Prisma Schema Docs)

Architectural Flow: Database-Driven Settings & OAuth Integration

Conclusion

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

Introduction: The Runner's Dilemma

Part 1: The User Guide 🚀

1. Smart Dashboard & Strava Sync

2. Gear & Shoe Tracker

3. Dynamic Weather & Route Visualization

Part 2: System Architecture 🛠️

The Technology Stack

Data Models & Prisma Schema

Strava OAuth Flow integration

Conclusion