Runnr is a lightweight, PWA-capable running dashboard built with Next.js + TypeScript. It syncs with Strava to visualize routes, track gear and personal records, and provides race predictions, pacing strategies, and training plans.
I've started ramping up my running lately, and Runnr started as a fun side project to stay motivated — plus a chance to tinker with Strava's API.
- Weekly Streaks: Track your consistency with week-by-week progress.
- Personal Records: Automatically detects and tracks your PRs across common distances (1k to Marathon).
- Kudos Analytics: Monitor your social engagement and community support.
- Gear Tracking: Keep an eye on your shoe distance (km) and health.
- Race Predictions: Get realistic race time estimates based on your actual training volume and intensity.
- Pacing Strategies: Generate even, negative, or positive split strategies for your next race.
- Global Performance: Compare your times against global and regional runner averages to see where you stand.
- Training Plans: Customized training insights based on your performance data.
- Custom Route Generation: Plan running routes on the map with your target distance.
- Interactive Mapping: Click to set start locations and generate round-trip routes.
- Route Statistics: Get distance, duration, and elevation data for planned routes.
- Activity Heatmap: Visualize all your running routes on an interactive map.
- Today's Summary: A quick snapshot of your latest run, weekly progress, and upcoming goals right on the dashboard.
- Framework: Next.js 15 (App Router, Turbopack)
- Language: TypeScript
- Database: PostgreSQL with Prisma ORM
- UI & Styling: Tailwind CSS, Shadcn UI
- Charts: Recharts
- PWA: Service Worker + Web App Manifest (offline / installable)
- External APIs: Strava API v3, OpenRouteService
- State Management: React Context
- Date Utilities: date-fns
- Runtime: Node.js 20.x
- Node.js 20+
- A Strava account (for API credentials)
- A PostgreSQL database (local or cloud-hosted)
-
Clone the repository:
git clone https://github.com/bjarkeef/runnr.git cd runnr -
Install dependencies:
npm install # or bun install -
Configure Strava API:
- Log in to Strava
- Go to Strava API Settings
- Create a new application with these details:
- Application Name:
Runnr(or your preferred name) - Category:
Training - Website:
http://localhost:3000 - Authorization Callback Domain:
localhost
- Application Name:
- Copy your Client ID and Client Secret
-
Environment Setup: Create a
.env.localfile in the root directory:# Database DATABASE_URL="postgresql://user:password@host:port/dbname" DIRECT_URL="postgresql://user:password@host:port/dbname" # Strava OAuth STRAVA_CLIENT_ID="your_client_id" STRAVA_CLIENT_SECRET="your_client_secret" STRAVA_REDIRECT_URI="http://localhost:3000/api/auth/callback" # Route Planning OPENROUTESERVICE_API_KEY="your_openrouteservice_key" # Optional: control starting center for route planner (defaults to Odense, DK) NEXT_PUBLIC_ROUTE_PLANNER_LAT="55.4038" NEXT_PUBLIC_ROUTE_PLANNER_LNG="10.4024"
⚠️ Do NOT commit.env.local- store secrets in environment/platform secrets only in production -
Initialize Database:
npx prisma generate npx prisma db push
-
Run Development Server:
npm run dev # or bun run dev -
Open the app: Navigate to http://localhost:3000
- Open the app in your browser
- Click Connect with Strava
- Authorize the app to access your Strava data
- You'll be redirected back to the app
- Navigate to Settings or wait for the initial sync to complete
- Visit the Stats page to see your running history
| Variable | Required | Description |
|---|---|---|
DATABASE_URL |
✅ | Prisma database connection string (pooled connection) |
DIRECT_URL |
✅ | Direct database connection for migrations |
STRAVA_CLIENT_ID |
✅ | Your Strava OAuth client ID |
STRAVA_CLIENT_SECRET |
✅ | Your Strava OAuth client secret (keep secret!) |
STRAVA_REDIRECT_URI |
✅ | OAuth callback URL (must match Strava settings) |
OPENROUTESERVICE_API_KEY |
✅ | API key for route planning and elevation data |
-
Prerequisites:
- Vercel account at vercel.com
- Prisma Cloud account at cloud.prisma.io (optional, for managed PostgreSQL)
- Strava OAuth app created
-
Set Up PostgreSQL Database:
- Use Prisma Cloud, Neon, or any PostgreSQL provider
- Obtain connection strings:
DATABASE_URL(pooled connection)DIRECT_URL(direct connection for migrations)
-
Deploy via GitHub Integration:
- Push your code to GitHub
- Go to vercel.com/new
- Import your GitHub repository
- Configure:
- Framework Preset: Next.js
- Build Command:
npm run build(orbun run build) - Output Directory:
.next
-
Configure Environment Variables in Vercel:
STRAVA_CLIENT_ID=<your_strava_client_id> STRAVA_CLIENT_SECRET=<your_strava_client_secret> STRAVA_REDIRECT_URI=https://your-app.vercel.app/api/auth/callback OPENROUTESERVICE_API_KEY=<your_api_key> DATABASE_URL=<from_database_provider> DIRECT_URL=<from_database_provider>⚠️ Important: Update your Strava OAuth redirect URI to match your Vercel domain! -
Run Database Migrations: After first deployment, run migrations:
vercel env pull .env.local bunx prisma migrate deploy
-
Update Strava OAuth Settings:
- Go to strava.com/settings/api
- Update Authorization Callback Domain:
your-app.vercel.app
- Store all secrets only in environment/config secrets—never commit them to version control
- Use server-only env variables for sensitive keys (e.g.,
STRAVA_CLIENT_SECRET,OPENROUTESERVICE_API_KEY) - Cookies storing tokens are
httpOnlyandsecurein production - OAuth tokens are securely stored and refreshed automatically
This project is licensed under the MIT License - see the LICENSE file for details.
Maintained with ❤️ — PRs welcome!