strava-analyzer

Open App

Flask Python gpxpy Plotly Leaflet.js CartoDB

fitness visualization web maps gpx

Database

Strava Data Analyzer Pro

A comprehensive, professional web application for analyzing Strava export data with advanced visualization, maps, and insights.

✨ Features

🗺️ Interactive Maps

• Route Visualization: See your entire activity route plotted on interactive maps
• Start/End Markers: Color-coded markers showing start (green) and end (red) points
• Dark Theme Maps: CartoDB dark tiles for seamless dark mode integration
• Auto-fit Bounds: Map automatically zooms to fit your route perfectly

📸 Media & Photos

• Photo Integration: View all photos taken during activities
• Video Support: Play videos directly in the interface
• Media Gallery: Grid layout for easy browsing
• Linked to Activities: Photos automatically associated with their activities

📊 Advanced Analytics

• Dashboard View: Comprehensive overview with trends and statistics
• Activity Trends: Stacked bar chart showing activity types over time
• Top Activities: Leaderboard of your longest activities
• Type Distribution: Pie chart breakdown by activity type
• Elevation Stats: Ranking of activities with highest elevation gain

🏃 Individual Activity Insights

• Detailed Metrics View:
- Distance, time, pace, speed - Elevation gain, calories burned - Gear/equipment information
• Elevation Profile: Interactive chart showing elevation across distance
• Speed Analysis: Speed over distance to identify segments
• Smart Insights: AI-generated insights like:
- "🏃 Marathon distance! You've run over 42km!" - "⛰️ Challenging hills! 500m+ elevation gain!" - "🚀 Excellent speed! Elite pace!" - "🔥 High intensity! 1000+ calories burned!"

⚖️ Activity Comparison

• Multi-select: Compare 2+ activities side-by-side
• Side-by-Side Metrics: Distance, elevation, time, speed, calories
• Identify Patterns: See how different activities stack up

📱 Modern UI

• Professional Dark Theme: Strava-inspired color scheme
• Sidebar Navigation: Easy access to all views
• Responsive Design: Works on desktop, tablet, and mobile
• Smooth Animations: Hover effects and transitions
• Search & Filter: Quickly find specific activities

🎯 Supported Formats

• Strava Export ZIP: Complete exports with metadata, GPX files, FIT files, and media
• GPX Files: Individual GPX files with point-by-point data
• JSON Files: Individual activity JSON exports

📈 Data Extracted

From CSV metadata:

• All basic metrics (distance, time, speed, elevation)
• Heart rate data (max/average)
• Calories burned
• Gear/equipment
• Activity descriptions
• Start dates

From GPX files (when available):

• Point-by-point GPS coordinates
• Elevation profile
• Cadence data
• Detailed pace analysis

From media export:

• Photos and videos
• Captions
• Linked to activities

🚀 Installation

1. Create a virtual environment:

python3 -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

2. Install dependencies:

pip install -r requirements.txt

💡 Usage

1. Run the application:

python app.py

2. Open your browser to http://localhost:5000

3. Upload your Strava export: - ZIP Export: Upload complete Strava export for full analysis - Individual Files: Upload GPX or JSON files

4. Explore your data: - Dashboard: See trends and overview - Activities: Browse all activities, click to view details - Compare: Select multiple activities to compare - Activity Detail: View route on map, elevation profile, insights

🏗️ Project Structure

strava-analyzer/
├── app.py              # Flask application with parsing logic
├── requirements.txt     # Python dependencies
├── templates/
│   └── index.html     # Single-page application template
├── static/
│   ├── css/
│   │   └── style.css  # Modern dark theme styles
│   └── js/
│       └── app.js      # Full application logic
├── uploads/           # File storage and media serving
└── README.md          # This file

🛠️ Tech Stack

• Backend: Flask (Python 3)
• GPX Parsing: gpxpy
• Maps: Leaflet.js with CartoDB dark tiles
• Charts: Plotly.js (interactive)
• Frontend: Vanilla JavaScript (ES6+)
• Styling: Custom CSS with CSS variables

🎨 Key Design Decisions

• Single Page Application: Fast, responsive, no page reloads
• State Management: Simple client-side state for activity data
• Map Integration: Leaflet.js (no API key required)
• Performance: Lazy loading of charts, efficient DOM updates
• Accessibility: Semantic HTML, keyboard navigation support

📊 Analytics Features

Dashboard Charts:

• Activity trends by type over time (stacked bar)
• Top 5 longest activities
• Activity type distribution (pie chart)
• Elevation ranking (top 5 activities)

Activity Detail Charts:

• Elevation profile (line chart with area fill)
• Speed over distance (line chart)
• Media gallery (grid layout)
• Smart insights (auto-generated based on metrics)

🔍 Search & Filter

• Text Search: Filter by activity name or type
• Type Filter: Filter by activity type
• Sort Options: Sort by date, distance, calories, elevation

🌟 What's New (Pro Version)

• ✅ Interactive route maps with Leaflet.js
• ✅ Photo/video gallery integration
• ✅ Elevation profile charts
• ✅ Speed and pace analysis
• ✅ Activity comparison tool
• ✅ Smart insights generation
• ✅ Dashboard with trends
• ✅ Professional dark theme UI
• ✅ Sidebar navigation
• ✅ Search and filter
• ✅ Responsive design

📝 Development Notes

• The app extracts media from Strava exports and copies them to uploads/ for serving
• Map uses CartoDB dark tiles with CSS filters for dark theme
• Charts are rendered client-side for better performance
• State is managed in JavaScript for fast UI updates
• All views are in a single HTML file for instant switching

🎯 Performance

• Handles 600+ activities from typical Strava exports
• Lazy rendering of activity lists
• Efficient chart updates (only re-render when needed)
• Media files cached after initial upload
• Responsive design for all screen sizes

📱 Browser Support

• Chrome/Edge (recommended)
• Firefox
• Safari
• Modern browsers with ES6+ support