A modern web application to visualize and analyze Strava activity data, built with Vue 3, Vite, and Tailwind CSS. This project fetches running and walking activities from the Strava API, caches them in Firebase Firestore, and provides an interactive dashboard to explore recent activities, stats, weekly progress, and customizable goals.

🚀 Live Demo | 🏃‍♂️ My Strava Profile

• View recent running and walking activities in a sortable table
• Filter by date, name, and activity type (runs or walks)
• Responsive design optimized for desktop and mobile

• Display total distance, average pace, and longest activity
• Options to combine or separate run/walk data
• Real-time calculations based on selected filters

• Visualize weekly activity trends using custom chart components
• Track performance over time with interactive charts

• Overall Goals: Set distance goals (e.g., 500 km) with start date tracking
• Weekly Goals: Set weekly distance targets (e.g., 38 km) and monitor progress
• Toggle between combined (run + walk) or type-specific goals

• Floating sidebar navigation with smooth scrolling
• Glassmorphism design using Tailwind CSS
• Responsive layout for all device sizes

• Real-time data fetching from Strava API
• Firebase Firestore caching for improved performance
• Optimized data loading and filtering

• Vue 3 (Options API)
• Vite (Build tool)
• Tailwind CSS (Styling)

• Node.js
• Express.js

• Strava API (Activity data)
• Firebase Firestore (Data caching)

• Netlify (Frontend)
• Render (Backend)

Before you begin, ensure you have the following installed:

• Node.js (v16 or higher)
• npm or yarn
• A Strava account with API access
• A Firebase project with Firestore enabled

git clone https://github.com/your-username/strava-activity-visualizer.git
cd strava-activity-visualizer

npm install

Create a .env file in the root directory:

VITE_API_URL=http://localhost:3000/api/activities

Create a .env file in the backend directory:

STRAVA_CLIENT_ID=your_strava_client_id
STRAVA_CLIENT_SECRET=your_strava_client_secret
STRAVA_REFRESH_TOKEN=your_strava_refresh_token
FIREBASE_PROJECT_ID=your_firebase_project_id
FIREBASE_PRIVATE_KEY=your_firebase_private_key
FIREBASE_CLIENT_EMAIL=your_firebase_client_email

• Strava API: Get credentials from Strava API Settings
• Firebase: Generate service account credentials from your Firebase project console

cd backend
npm install
node server.cjs

In the root directory:

npm run dev

Open http://localhost:5173 in your browser.

1. Push your code to a GitHub repository
2. Connect the repository to Netlify
3. Set build command: npm run build
4. Set publish directory: dist
5. Add environment variable: VITE_API_URL pointing to your backend

1. Deploy the backend directory to Render as a Node.js service
2. Set all required environment variables in Render's dashboard
3. Configure start command: node server.cjs

1. Authorize Strava: On first load, authorize the app to access your Strava data
2. Explore Activities: Use tabs to view runs, walks, or combined data
3. Apply Filters: Filter by name, date range, or number of activities
4. Sort Data: Click column headers to sort by date, distance, time, or pace

1. Overall Goals: Navigate to the Overall Goals section and set your distance target
2. Weekly Goals: Set weekly distance goals and track your progress
3. Goal Types: Toggle between combined activities or specific activity types

• Use the floating sidebar (desktop) for quick navigation
• Smooth scrolling between sections
• Responsive design adapts to your device

strava-activity-visualizer/
├── backend/                    # Node.js/Express backend
│   ├── server.cjs              # API server for Strava and Firebase
│   └── ...
├── src/                        # Vue 3 frontend
│   ├── components/             # Vue components
│   │   ├── WeeklyChart.vue     # Weekly progress chart
│   │   ├── Counter.vue         # Goal counter component
│   │   └── ...
│   ├── services/               # Service layer
│   │   ├── firebase.js         # Firebase configuration
│   │   └── ...
│   ├── App.vue                 # Main application component
│   ├── main.js                 # Application entry point
│   └── assets/                 # Static assets
├── .env                        # Frontend environment variables
├── vite.config.js              # Vite configuration
├── package.json                # Dependencies and scripts
└── README.md                   # Project documentation

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

• Follow Vue 3 best practices
• Use Tailwind CSS for styling
• Write descriptive commit messages
• Test your changes thoroughly

Karl Louise Rito

• 🌐 Strava Profile
• 💻 Passionate about running and coding
• 🚀 Building tools to help athletes track their progress

This project is licensed under the MIT License - see the LICENSE file for details.

• Strava for providing an excellent API
• Vue.js community for amazing documentation
• Firebase for reliable backend services
• Tailwind CSS for beautiful, responsive design
• All the runners and walkers who inspire us to keep moving! 🏃‍♀️🚶‍♂️

⭐ Star this repo if you find it helpful!

© 2025 Karl Louise Rito