the fitness log · setup
For curious visitors and technical contributors
Just visiting? You do not need to set anything up. The dashboard works as soon as you open it. The rest of this page explains how it works behind the scenes, and how a developer would stand up their own copy.

how it works, in plain English

Susan wears a WHOOP wristband. WHOOP runs a developer service that lets approved applications read a wearer's data, with the wearer's permission. Susan created an application for this dashboard once, gave it permission to read her data, and stored a long-lived credential on the server that hosts the page.

When Susan opens the dashboard and clicks Refresh, the server uses that credential to pull her last 180 days of recovery, sleep, strain, and workouts from WHOOP. It saves the result as a single file on the server. That file is the public snapshot.

Anyone who opens the dashboard URL reads that snapshot. They do not log in. They do not need a WHOOP account. They never touch the WHOOP servers. They just read what Susan last published.

Why this design. Putting the snapshot on the server keeps the public reader experience fast and private. No visitor data is collected, no third-party trackers run, and visitors are not exposed to Susan's WHOOP credentials.
For developers

if you're forking this project

The rest of this page is the technical reference for setting up your own copy of the dashboard. It is not needed to view this dashboard. Skip it unless you are deploying a fork.

01register a whoop developer app

  1. Go to developer-dashboard.whoop.com and sign in with your WHOOP account.
  2. Click Create new app.
  3. Name it anything (for example, Fitness Log).
  4. For Redirect URI, enter your site URL followed by /api/auth/callback. Example: https://your-site.netlify.app/api/auth/callback.
  5. Enable these scopes: offline, read:profile, read:recovery, read:cycles, read:sleep, read:workout, read:body_measurement.
  6. Save the app. Copy the Client ID and Client Secret for the next step.

02set environment variables in netlify

In your Netlify project, go to Project configuration → Environment variables and add these four values:

WHOOP_CLIENT_ID        = (from step 1)
WHOOP_CLIENT_SECRET    = (from step 1)
WHOOP_REDIRECT_URI     = https://your-site.netlify.app/api/auth/callback
SESSION_SECRET         = (a random 32+ character string)
Generate SESSION_SECRET in Terminal: 
openssl rand -hex 32
Or use any password manager's random-string generator. This value is used to encrypt the owner's WHOOP credentials at rest. Keep it private.

03deploy

Connect your GitHub repository to Netlify (recommended), or drag a build folder onto app.netlify.com/drop. Once connected to Git, every push to main triggers an automatic deploy. The serverless functions for authentication, snapshot reading, and snapshot writing build without configuration.

If you are updating an existing deploy, confirm the Redirect URI in your WHOOP developer app still matches your site URL exactly before reconnecting.

04connect once, then refresh as needed

Open the deployed dashboard. Click Owner sign-in. You will be sent to WHOOP, where you click Grant, and then returned to a live dashboard showing your last 180 days of data.

The credential WHOOP grants you persists for 90 days of normal use and renews automatically in the background. Click Refresh on the dashboard at any time to pull fresh data from WHOOP. Each refresh automatically updates the public snapshot.

05how public read mode works

Visitors with the dashboard URL see the most recent published snapshot. They do not need a WHOOP account, they are not asked to log in, and their browser never contacts WHOOP directly. The snapshot is read from server-side storage.

Only the signed-in owner can write a new snapshot. Signing out clears the owner's session in the browser but leaves the published snapshot in place. The last published view remains visible until the owner publishes a new one.

06what gets stored, and where

← Back to dashboard