🟢StatusPulse

A real-time website monitoring application built with Next.js and Convex. It tracks the latency and uptime of your services, visualizing performance with interactive graphs and sending alerts via Discord when services go down.

---

Live Demo: https://statuspulse.vercel.app

---

✨ Features

• Real-time Monitoring – Automated cron jobs check your endpoints every minute.
• Visual Analytics – Interactive latency history graphs using Recharts.
• Instant Alerts – Integration with Discord Webhooks to notify you immediately when a service is DOWN.
• Status History – Detailed logs of response times and status codes (200, 404, 500, etc.).
• Modern UI – Built with Tailwind CSS and Shadcn UI for a clean, dark-mode aesthetic.

---

🧠 Tech Stack

• Framework - Next.js
• Authentication - Clerk
• Backend & Database - Convex
• Styling - Tailwind CSS, ShadcnUI
• Language - TypeScript

---

⚙️ How It Works

1. The Monitor - You add a target URL (e.g., https://api.myapp.com) to the dashboard.
2. The Cron Job - A Convex Cron Job runs on a schedule (e.g., every 5 seconds), fetching the URL to check its status and measure latency.
3. The Alert - If the status is not 200 OK, the backend triggers a fetch request to your configured Discord Webhook URL to send an alert.
4. The UI - The frontend subscribes to the Convex database, updating the graphs in real-time without refreshing the page, in every 10 minutes concurrently.

---

📦 Installation & Setup

1️⃣ Clone the Repository

git clone https://github.com/Varshad-Potle/status-pulse
cd status-pulse

2️⃣ Install Dependencies

npm install

3️⃣ Setup Convex

npx convex dev

4️⃣ Environment Configuration

Create a .env file in the root directory and add your credentials:

CONVEX_DEPLOYMENT=your_Key
NEXT_PUBLIC_CONVEX_URL=your_key
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_key
CLERK_SECRET_KEY=your_key

5️⃣ Run the Application

npm run dev

App will be running at:

http://localhost:3000

---

🔔 How to Get a Discord Webhook

To receive alert notifications when your monitors go down, you need a Discord Webhook URL.

1. Open Discord (Web) and click on the text channel where you want to receive alerts.
2. Click on channel name to open dropdown and select Server Settings .
3. Go to Integrations in the left sidebar.
4. Click Webhooks -> New Webhook.
5. Name your bot (e.g., "Uptime Bot") and copy the Webhook URL.
6. Paste this URL into the "Discord Webhook URL" field when creating a new monitor in the dashboard.

---

🗂 Project Structure (High-Level)

├── convex/                   # Backend & Database Logic
│   ├── auth.config.ts        # Clerk/Convex auth configuration
│   ├── crons.ts              # Scheduled cron jobs (uptime checks)
│   ├── monitors.ts           # API mutations and queries
│   └── schema.ts             # Database schema definition
├── src/
│   ├── app/                  # Next.js App Router
│   │   ├── dashboard/        # Dashboard pages
│   │   ├── monitor/          # Individual monitor details
│   │   ├── convexClientProvider.tsx  # Convex React Provider wrapper
│   │   ├── layout.tsx        # Root application layout
│   │   └── page.tsx          # Landing page
│   ├── components/           # UI Components
│   │   ├── createMonitor.tsx # Modal/Form to add monitors
│   │   ├── deleteMonitor.tsx # Delete button logic
│   │   └── typeWriter.tsx    # Hero section animation
│   └── middleware.ts         # Authentication Middleware
└── .env.local                # Environment variables