Supabase Status Page

Open-source status page and health monitoring dashboard for your Supabase projects.

A lightweight, self-hosted status dashboard and heartbeat service.

Status provides a clean public status page backed by scheduled health checks. It is designed to be deployed once per application, making it ideal for monitoring websites, APIs, internal tools, or any service with a single heartbeat endpoint.

Unlike traditional monitoring platforms, Status is intentionally minimal. It focuses on one thing—recording the health of a single application and presenting it in a beautiful, fast, and easy-to-understand interface.

---

Features

• 🚀 Modern Next.js 15 application
• 📊 Public status dashboard
• ❤️ Heartbeat endpoint for scheduled checks
• 📈 Historical latency graph
• 📅 Recent health check history
• 📉 Automatic uptime calculations
• 🌙 Light / Dark / System theme
• ⚡ Server Components first architecture
• 🔒 Secure API endpoint
• 🎨 Minimal monochrome design
• ☁️ Vercel ready
• 🗄️ Supabase powered

---

Demo

status.almagos.com

---

Philosophy

Status intentionally does not try to become another monitoring platform.

It does not:

• monitor dozens of services
• manage incidents
• send pages
• replace Datadog
• replace Grafana

Instead, it answers a very simple question:

Is my application healthy?

Everything else is built around that principle.

---

Architecture

                Scheduler
      (Cloudflare / n8n / Cron)

                 │
                 ▼

       POST /api/heartbeat

                 │
                 ▼

          Health Check Logic

                 │
                 ▼

             Supabase

                 │
                 ▼

          Public Dashboard

The scheduler is intentionally external.

This makes the application portable and scheduler-agnostic.

Supported schedulers include:

• Cloudflare Workers Cron
• n8n
• GitHub Actions
• Vercel Cron
• Any service capable of sending an HTTP POST request

---

Technology Stack

• Next.js 15
• TypeScript
• Tailwind CSS
• shadcn/ui
• Supabase
• Vercel

---

Folder Structure

app/
components/
lib/
public/
types/

README.md

The codebase follows the standard Next.js App Router structure.

---

Environment Variables

NEXT_PUBLIC_APP_NAME=My Application

NEXT_PUBLIC_HOME_URL=https://example.com

NEXT_PUBLIC_PRIVACY_URL=https://example.com/privacy

NEXT_PUBLIC_TERMS_URL=https://example.com/terms

NEXT_PUBLIC_SUPABASE_URL=

NEXT_PUBLIC_SUPABASE_ANON_KEY=

SUPABASE_SERVICE_ROLE_KEY=

HEARTBEAT_SECRET=

---

Database

Create the following table.

create table health_checks (

    id uuid primary key default gen_random_uuid(),

    checked_at timestamptz not null default now(),

    status text not null,

    response_time_ms integer,

    http_status integer,

    error_message text,

    created_at timestamptz default now()

);

---

Heartbeat Endpoint

POST /api/heartbeat

This endpoint:

• measures response time
• records success
• records failures
• stores latency
• updates dashboard metrics

The endpoint is intended to be called by an external scheduler.

Example:

Every hour

↓

POST /api/heartbeat

↓

Database updated

↓

Dashboard reflects latest state

---

Dashboard

The public status dashboard displays:

• Current Status
• Response Time
• Last Successful Check
• Uptime
• Latency History
• Recent Checks

All information is calculated from the health_checks table.

No cached status is stored.

---

Themes

Status supports:

• Light
• Dark
• System

The application automatically follows the user's operating system preference when configured to System.

---

Security

The heartbeat endpoint should never be publicly writable.

Recommended protection:

• Shared secret
• Authorization header
• Cloudflare Access
• IP allowlisting

Choose the mechanism that best fits your deployment.

---

Deployment

Deploy to Vercel.

Configure:

• Environment Variables
• Supabase Project
• Custom Domain

Connect any scheduler capable of making an authenticated HTTP POST request to the heartbeat endpoint.

No additional infrastructure is required.

---

Local Development

Install dependencies.

npm install

Run development server.

npm run dev

Open:

http://localhost:3000

---

Scheduler Examples

The application works with any scheduler.

Examples include:

• Cloudflare Workers Cron
• n8n
• GitHub Actions
• Vercel Cron
• Cron jobs
• UptimeRobot

As long as the scheduler can perform an authenticated POST request, Status will work.

---

Branding

All branding is configured through environment variables.

No project-specific names are hardcoded.

This allows the same repository to be reused across multiple deployments.

Examples:

status.almagos.com

status.projectvinci.org

status.company.com

---

Design Principles

Status is built around a few simple principles.

• Simplicity over complexity
• Fast by default
• Minimal dependencies
• Scheduler agnostic
• One deployment monitors one application
• Beautiful enough to leave public

---

Roadmap

Potential future enhancements include:

• Incident timeline
• Response time percentiles
• Availability heatmap
• Email notifications
• Webhook notifications
• Slack integration
• Discord integration
• Multi-region heartbeat support
• Status badges
• RSS/Atom feeds
• JSON status endpoint
• Public API
• Custom branding
• Multiple heartbeat endpoints

These features are intentionally excluded from the initial release to keep the project focused & lightweight.

---

License

MIT