Real-time domain monitoring dashboard for uptime, SSL, DNS, and expiry tracking
Full-featured domain monitoring dashboard that tracks uptime, SSL certificate status, DNS records, and domain expiration dates. Supports browser notifications, Slack/Discord webhooks, Web Audio alerts, and bulk CSV import/export. Runs two React apps from a single codebase — the dashboard and a marketing site.
Unified monitoring surface — DomainPulse is a modern React SPA that brings uptime, DNS, WHOIS, and SSL monitoring into one workflow instead of splitting critical domain intelligence across separate tools.
Built for fast operational signal — Checks run in the background, historical status is retained locally, and alerts can reach the browser, Slack, Discord, and Web Audio channels without adding heavy infrastructure.
Productized beyond a demo — Ships with a protected dashboard, bulk domain management, a dedicated marketing site, and a deployment-ready serverless API layer from a single codebase.
Uptime Monitoring — Latency tracking with history charts
SSL Tracking — Certificate status and expiry alerts
Domain Expiry — WHOIS-based expiration tracking
DNS Lookup — Full DNS record inspection
Groups and Tags — Organize domains into logical groups
Notifications — Browser, Slack, and Discord webhook support
Sound Alerts — Web Audio API notifications
CSV Import/Export — Bulk domain management
Password Auth — PBKDF2 + salt authentication
Web Worker — Non-blocking background monitoring
DomainPulse routes domain checks through a single authenticated API surface: Vercel serverless functions in production and an Express proxy during local development. Each monitoring pass follows a layered pipeline so the UI stays responsive while the app collects richer domain intelligence.
- Normalize and queue domains — User input is validated, normalized to a clean domain, and queued for checking by the monitoring hook or Web Worker batch runner.
- Measure uptime first —
/api/checkperforms a fastHEADrequest against the target domain to determine availability, status code, and latency. - Enrich results in parallel — After uptime succeeds, DomainPulse concurrently calls
/api/ssl,/api/whois, and/api/dnsto gather certificate validity, expiration metadata, registrar details, and live DNS records. - Persist and visualize state — Results are merged into the dashboard, appended to each domain's history, and stored in
localStorageso operators keep context across sessions. - Notify on meaningful changes — Status transitions can trigger browser notifications, Slack or Discord webhooks, and optional sound alerts for immediate operator feedback.
| Layer | Technology | Role |
|---|---|---|
| UI | React 19, TypeScript, Tailwind CSS v4 | Modern SPA interface for the dashboard and marketing site |
| Build & Dev Workflow | Vite 6, TSX, Concurrently | Fast local iteration, dual-app development, and production builds |
| Data Visualization | Recharts | Latency and status history charts |
| Icons & UI Assets | Lucide React | Lightweight iconography across the product |
| Monitoring Engine | Web Workers, Fetch API, Web Audio API | Background checks, responsive UI updates, and audible alerts |
| API Layer | Express (dev proxy), Vercel Serverless (prod) | Unified monitoring endpoints for uptime, DNS, WHOIS, and SSL checks |
| Network & Domain Intelligence | Node https, tls, dns |
Certificate inspection, DNS resolution, and domain reachability checks |
| Authentication & Security | PBKDF2, JWT, CORS controls, rate limiting | Password protection and guarded API access |
| Client Persistence | localStorage, sessionStorage |
Domain lists, settings, history, and authenticated session state |
| Testing & Quality | Vitest, Testing Library, Playwright, ESLint | Unit coverage, UI verification, end-to-end tests, and code quality checks |
| Deployment | Vercel, vercel.json rewrites |
Serverless production deployment and API routing |
- Node.js 18+
- npm
npm installUse the commands below to run the full monitoring dashboard with the local proxy server, or launch the standalone marketing site.
# Run dashboard + proxy server
npm run dev:all
# Open http://localhost:3000
# Run the marketing site
npm run dev
# Open http://localhost:3002- Install dependencies with
npm install. - Start the dashboard and proxy server with
npm run dev:all. - Open
http://localhost:3000to use the monitoring dashboard. - Run
npm run devin a separate session when you want to preview the marketing site onhttp://localhost:3002. - Build both apps for production with
npm run build:all.
Create .env.local:
VITE_PASSWORD_HASH=<your-pbkdf2-hash:salt>Generate a hash:
node -e "const crypto = require('crypto'); const salt = crypto.randomBytes(16).toString('hex'); const hash = crypto.pbkdf2Sync('your-password', salt, 100000, 32, 'sha256').toString('hex'); console.log(hash + ':' + salt);"| Command | Description |
|---|---|
npm run dev:all |
Dashboard + proxy server |
npm run dev |
Marketing site only |
npm run build:all |
Build both apps |
npm run lint |
ESLint |
npm run type-check |
TypeScript type checking |
npm run test |
Vitest unit tests |
npm run test:gui |
Playwright E2E tests |
Two React apps built from a single codebase:
| App | Entry | Port |
|---|---|---|
| DomainPulse | index.html / App.tsx |
3000 |
| Marketing Site | site.html / SiteApp.tsx |
3002 |
Local dev — Vite proxies
/api/*to Express on port 3001
Production — Vercel serverless functions via
vercel.jsonrewrites
| Variable | Required | Description |
|---|---|---|
VITE_PASSWORD_HASH |
Yes | PBKDF2 hash:salt for auth |
ALLOWED_ORIGINS |
No | CORS origins (comma-separated) |
Contributions are welcome. Keep changes focused, tested, and aligned with the existing product direction.
- Fork the repository and create a feature branch.
- Install dependencies with
npm install. - Run
npm run lint,npm run type-check, andnpm run testbefore opening a pull request. - Use
npm run test:guiwhen your change touches interactive dashboard behavior. - Open a pull request with a concise summary of the problem, approach, and user-facing impact.