Polar HRV Bluetooth React App

This web application visualizes heart rate variability (HRV) and related metrics in real time using Bluetooth Low Energy (BLE) sensors such as the Polar H10 chest strap. Built with React, TypeScript, and Vite, it provides a modern, fast, and interactive experience for HRV analysis.

Features

• Connect to Polar H10 (and compatible BLE heart rate sensors) using Chrome or Edge browsers with Web Bluetooth API
• Live data streaming and visualization
  • Heart Rate (BPM) graph
  • HRV (RMSSD) graph
  • RR Intervals graph
• Disconnect and reconnect to sensors easily
• Error handling for Bluetooth connection issues
• Accessible, responsive UI with modern styling

Graphs

The app displays three real-time graphs:

1. Heart Rate Over Time: Shows beats per minute (BPM) sampled from the sensor
2. HRV (RMSSD) Over Time: Displays root mean square of successive differences (RMSSD), a common HRV metric
3. RR Intervals Over Time: Plots the intervals (in milliseconds) between heartbeats

Sensor Compatibility

• Polar H10: Fully supported for heart rate, RR intervals, and HRV
• Other BLE Heart Rate Sensors: May work if they support the standard Heart Rate Service (UUID: 0x180D) and RR interval data
• Advanced Data (ECG, PPG, ACC): Not currently supported in this app; only standard heart rate and RR interval data are visualized

Note: Some advanced features (like raw ECG/PPG/accelerometer data) require custom BLE services and are not available in most browsers or with all sensors. The app is optimized for Polar H10 and similar devices.

Getting Started

Prerequisites

• Node.js 22+
• npm (or yarn)
• Chrome or Edge browser (with Web Bluetooth API support)

Development

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

   The app will be available at http://localhost:5173

Building for Production

npm run build

Build artifacts are stored in the dist/ directory.

Preview Production Build

npm run preview

Usage

1. Open the app in Chrome or Edge (HTTPS or localhost required)
2. Click Connect to Polar H10 to pair with your sensor
3. View live graphs for heart rate, HRV, and RR intervals
4. Disconnect and reconnect as needed

Project Structure

src/
├── components/     # React components (BluetoothHRV, etc.)
├── assets/         # Static assets
├── App.tsx         # Main App component
└── main.tsx        # Application entry point

Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Limitations & Notes

• Web Bluetooth API is only available in supported browsers (Chrome, Edge) and requires HTTPS or localhost
• Sensor compatibility may vary; Polar H10 is recommended
• Advanced sensor data (ECG, PPG, ACC) is not visualized in this app

License

MIT