Build Status Page Dashboard

[ibuzzardo]

Overview

Build a self-hosted status page dashboard using Next.js 15 (App Router) that monitors a configurable list of HTTP endpoints, pings them on an interval, and displays their current status (up/down) with response times. Dark-themed UI on port 4003.

Requirements

• Next.js 15 App Router with TypeScript strict mode
• Server runs on port 4003 (configurable via PORT env var)
• Endpoints to monitor are defined in a config.ts file as an array of {name, url, expectedStatus} objects
• API route GET /api/status pings all configured endpoints using fetch() with a 5-second timeout and returns JSON array of results: {name, url, status: "up"|"down", responseTime: number, checkedAt: string}
• Dashboard page at / displays each endpoint as a card with:
  • Service name
  • Green dot + "Operational" when status is "up"
  • Red dot + "Down" when status is "down"
  • Response time in milliseconds
  • Last checked timestamp
• Auto-refreshes every 30 seconds via client-side polling
• Shows a summary header: "All Systems Operational" (green) or "X Services Down" (red)
• Dark theme: background #0B1120, cards #111827, borders #374151, text #F9FAFB/#9CA3AF, green #22C55E, red #EF4444
• Font: Inter via next/font/google
• Responsive grid: 1 column on mobile, 2 on tablet, 3 on desktop
• Loading skeleton state while fetching

File Structure

package.json
tsconfig.json
next.config.js
tailwind.config.ts
postcss.config.js
src/lib/config.ts              # Array of endpoints to monitor with name, url, expectedStatus
src/lib/types.ts               # TypeScript interfaces: Endpoint, StatusResult
src/app/globals.css            # Tailwind directives + dark theme CSS variables
src/app/layout.tsx             # Root layout with Inter font, dark class, metadata
src/app/page.tsx               # Client component: dashboard with status cards, auto-refresh
src/app/api/status/route.ts    # GET handler: pings all endpoints, returns status array

Dependencies

• next@^15.0.0 — React framework with App Router
• react@^18.0.0 — UI library
• react-dom@^18.0.0 — React DOM renderer
• tailwindcss@^3.3.5 — Utility CSS framework
• autoprefixer@^10.4.16 — PostCSS plugin for Tailwind
• postcss@^8.4.31 — CSS processing
• typescript@^5.0.0 — Type safety
• @types/node@^20.0.0 — Node.js type definitions
• @types/react@^18.0.0 — React type definitions
• @types/react-dom@^18.0.0 — React DOM type definitions

Design Specification

• Background: #0B1120
• Card background: #111827
• Card border: #374151
• Primary text: #F9FAFB
• Secondary text: #9CA3AF
• Status green: #22C55E
• Status red: #EF4444
• Font: Inter (via next/font/google)
• Card style: rounded-lg, border, p-4, shadow-sm
• Grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4

Default Monitored Endpoints (in config.ts)

export const endpoints: Endpoint[] = [
  { name: "Google", url: "https://www.google.com", expectedStatus: 200 },
  { name: "GitHub", url: "https://github.com", expectedStatus: 200 },
  { name: "Cloudflare", url: "https://1.1.1.1", expectedStatus: 200 },
];

Acceptance Criteria

• npm install && npm run build completes without errors
• npm start serves the app on port 4003
• GET /api/status returns a JSON array with status for each configured endpoint
• Each result has: name (string), url (string), status ("up" or "down"), responseTime (number), checkedAt (ISO string)
• Dashboard renders all endpoint cards with correct status colors
• Summary header shows green "All Systems Operational" when all up, red "X Services Down" otherwise
• Dashboard auto-refreshes every 30 seconds
• Loading skeleton shows on initial load
• Dark theme renders correctly (dark background, light text)
• Responsive grid works on mobile/tablet/desktop
• TypeScript compiles with strict: true

Edge Cases

• Endpoint times out (>5s) → status: "down", responseTime: 5000
• Endpoint returns non-expected status code → status: "down"
• Endpoint DNS fails → status: "down" with caught error
• All endpoints down → header shows "3 Services Down" in red
• fetch throws network error → catch and report as "down"
• Config has zero endpoints → show "No endpoints configured" message