Skip to content

anldrms/workout-tree

Repository files navigation

Apple Health Dashboard

A beautiful, privacy-first web application to visualize and analyze your Apple Health data. Transform your health export into insightful dashboards with detailed metrics, charts, and training analytics.

Apple Health Dashboard TypeScript Tailwind CSS

Features

Health Dashboard

  • Overview Statistics: Total workouts, distance, calories, and duration
  • Heart Rate Monitoring: Track heart rate trends and resting heart rate
  • Weight Progress: Monitor weight changes over time
  • Daily Activity: Steps, distance, calories, and exercise minutes
  • Sleep Analysis: Sleep duration and quality tracking
  • Workout Distribution: Visual breakdown of activities by type

Training Analytics

  • Performance Metrics: Average distance, duration, calories, and heart rate
  • Workout Trends: Track performance improvements over time
  • Pace Analysis: Monitor running/cycling pace (min/km)
  • Heart Rate Zones: Distribution of workout intensity
  • Detailed Workout History: Complete log with all metrics
  • Activity Filtering: Filter by workout type (Walking, Cycling, Running, etc.)

Privacy First

  • All data processing happens in your browser
  • No data is sent to any server
  • Your health data never leaves your device
  • No tracking or analytics

How to Use

1. Export Your Apple Health Data

  1. Open the Health app on your iPhone
  2. Tap your profile picture in the top right corner
  3. Scroll down and tap "Export All Health Data"
  4. Save the export.zip file

2. Upload and Visualize

  1. Visit the dashboard website
  2. Drag and drop your export.zip file or click to browse
  3. Wait for processing (happens in your browser)
  4. Explore your health insights!

Sample Data

To add your own sample-export.zip file for demonstration:

  1. Place your export.zip file in the public/ folder
  2. Rename it to sample-export.zip
  3. The "View Real Sample Dashboard" button will load this file

Note: Due to GitHub's file size limitations (100MB), sample export files are not included in the repository. The demo dashboard uses synthetic data for demonstration purposes.

For Developers

Installation

# Clone the repository
git clone https://github.com/anldrms/workout-tree.git
cd workout-tree

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000 to view the app.

Build for Production

# Build static site
npm run build

# The output will be in the 'out' directory

Deploy to GitHub Pages

  1. Push your code to GitHub repository
  2. Enable GitHub Pages in repository settings
  3. Set source to GitHub Actions
  4. The site will be available at https://yourusername.github.io/workout-tree

You can also use the included GitHub Actions workflow:

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: ./out
      - uses: actions/deploy-pages@v4

Tech Stack

  • Framework: Next.js 15 (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Charts: Recharts
  • Icons: Lucide React
  • Date Handling: date-fns
  • XML Parsing: fast-xml-parser

Project Structure

apple-health-dashboard/
├── app/
│   ├── page.tsx              # Landing page with upload
│   ├── dashboard/
│   │   └── page.tsx          # Health dashboard
│   ├── training/
│   │   └── page.tsx          # Training analytics
│   └── globals.css           # Global styles
├── components/
│   └── ui/
│       └── card.tsx          # UI components
├── lib/
│   ├── parser.ts             # XML parsing logic
│   ├── processor.ts          # Data processing
│   ├── types.ts              # TypeScript types
│   ├── utils.ts              # Utility functions
│   └── sampleData.ts         # Sample data for demo
└── public/                   # Static assets

Data Metrics

The dashboard processes and visualizes the following metrics:

Health Metrics

  • Heart Rate (avg, resting, max)
  • Heart Rate Variability (HRV)
  • Body Mass (Weight)
  • Height
  • Sleep Analysis
  • Steps Count
  • Distance (Walking/Running/Cycling)
  • Flights Climbed
  • Active Energy Burned
  • Basal Energy Burned
  • Exercise Time
  • Stand Hours

Workout Metrics

  • Activity Type
  • Duration
  • Distance
  • Calories Burned
  • Average Pace
  • Average Heart Rate
  • Maximum Heart Rate
  • Running Power
  • Running Stride Length
  • Running Vertical Oscillation
  • Running Ground Contact Time
  • Workout Routes (GPX data)

Contributing

Contributions are welcome! Feel free to:

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

License

MIT License - feel free to use this project for personal or commercial purposes.

Acknowledgments

Support

If you find this project helpful, please give it a star on GitHub!


Note: This project is not affiliated with Apple Inc. Apple Health is a trademark of Apple Inc.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors