S-WHOOP

An interactive fitness data visualization dashboard for WHOOP users. S-WHOOP expands upon WHOOP export data to provide visual insights, helping you understand your sleep patterns, workout performance, and recovery metrics at a glance. Built to be more approachable and user-friendly than WHOOP's own dashboard.

📸 Screenshots

Sleep Analysis

Workout Performance

Recovery Metrics

🚀 Getting Started

Installation

1. Clone the repository

   git clone <repository-url>
   cd S-WHOOP

2. Navigate to the client directory

   cd client

3. Install dependencies

   npm install

Running the Application

Development Mode

To run the application in development mode with module replacement:

npm run dev

The application will start on http://localhost:5173

Production Build

To create an optimized production build:

npm run build

To preview the production build locally:

npm run preview

Using the Application

1. Start the dev server using npm run dev in the client folder
2. Navigate to the Import page by clicking "Import" in the navigation bar
3. Select the WHOOP data files:
   • Navigate to client/src/assets/whoop-data/
   • Select all three CSV files:
     • sleeps.csv
     • workouts.csv
     • physiological_cycles.csv
4. View your dashboard by clicking "Dashboard" in the navigation bar
5. Explore your data through interactive charts and visualizations

Exporting Your WHOOP Data

To use your own WHOOP data:

1. Log in to your WHOOP account on the web or phone.
2. Navigate to your profile settings
3. Request a data export (May take up to 24 hours)
4. Download the CSV files
5. Replace the sample files in client/src/assets/whoop-data/ with your exported data

🛠️ Tech Stack

Core Technologies

• React (v19.1.1) - Modern UI library for building interactive interfaces
• Vite (v7.1.7) - Next-generation frontend build tool for fast development

Data Visualization

• Chart.js (v4.5.1) - Powerful and flexible charting library
• react-chartjs-2 (v5.3.1) - React wrapper for Chart.js

Styling

• Tailwind CSS (v4.1.17) - Utility-first CSS framework

Data Processing

• PapaParse (v5.5.3) - Fast and powerful CSV parser for JavaScript

👨‍💻 Contributors

• Adam Koepa - Solo Developer

---

Built as a solo project for Codeworks