PulseWatch Frontend

A modern, responsive, and drop-in React component for uptime monitoring and status pages. This package provides the full frontend interface for the PulseWatch monitoring system, decoupled from the authentication layer so it can be easily integrated into existing admin dashboards or internal tools.

Features

• 📊 Real-time Monitoring Dashboard: View status, uptime percentages, and response times.
• 📈 Interactive Charts: Visual history of latency and uptime.
• 🔔 Notifications Management: Configure alerts for your monitors.
• 🌓 Dark/Light Mode: Built-in theme support.
• 🔌 Socket.io Integration: Live updates for monitor status.

Installation

npm install pulsewatch-frontend
# or
yarn add pulsewatch-frontend
# or
pnpm add pulsewatch-frontend

Usage

Import the component and the CSS styles in your React application:

import { PulseWatch } from "pulsewatch-frontend";
import "pulsewatch-frontend/style.css";

function App() {
  return (
    <div style={{ height: "100vh" }}>
      <PulseWatch apiBase="https://api.your-uptime-service.com" />
    </div>
  );
}

Props

| Prop | Type | Description | | --------- | -------- | -------------------------------------------------------------------------------- | | apiBase | string | The base URL of your PulseWatch backend API (e.g., http://localhost:3000/api). |

Backend Requirement

This package requires a compatible PulseWatch backend running. Ensure your backend returns the expected data format for monitors, results, and notifications.

Development

To build the library locally:

npm run build

The output will be in the dist folder.