Uptime Monitor Dashboard

A real-time web application for monitoring the status of multiple web services and databases. Built with Next.js 14 and React 18, featuring a modern dark-themed interface.

Features

• Real-time status monitoring with automatic refresh every 60 seconds
• Parallel health checks for all configured services
• Visual status indicators:
  • Up (green): Service is operational and responsive
  • Down (red): Service is unavailable or not responding
  • Slow (yellow): Service responds but takes more than 2 seconds
• Response time display in milliseconds
• Global status indicator showing overall system health
• Clickable service links for web services
• Manual refresh button
• Responsive design (mobile, tablet, desktop)

Monitored Services

The dashboard monitors the following services:

• Lueurvivante APP - Web application
• Villasospel - Astro.js one-page site
• Mealie - Recipe management application
• Recette Mealie - Recipe JSON converter
• Prompt - AI prompt manager
• Jetson - Jetson Orin Nano portfolio
• Lueurvivante WEB - Marketing site
• Lueurvivante DB - PocketBase database

Tech Stack

• Next.js 14 - React framework with App Router
• React 18 - UI library
• TypeScript - Type safety
• Tailwind CSS - Styling
• Lucide React - Icons
• Docker - Containerization

Getting Started

Prerequisites

• Node.js 20 or higher
• npm or yarn

Installation

# Clone the repository
git clone <repository-url>
cd Dashboard

# Install dependencies
npm install

# Start development server
npm run dev

The application will be available at http://localhost:3000.

Production Build

# Build for production
npm run build

# Start production server
npm run start

Docker Deployment

Using Docker Compose

docker-compose up -d

The dashboard will be available at http://localhost:8095.

Using Docker directly

# Build the image
docker build -t uptime-monitor .

# Run the container
docker run -p 8095:80 uptime-monitor

Configuration

Service configuration is located in src/lib/monitor.config.ts:

export const MONITOR_CONFIG = {
  slowThreshold: 2000,      // Response time threshold for "slow" status (ms)
  requestTimeout: 10000,    // Request timeout (ms)
  refreshInterval: 60000,   // Auto-refresh interval (ms)
};

To add or modify monitored services, edit the services array in the same file.

API

GET /api/check

Returns the status of all monitored services.

Response:

{
  "services": [
    {
      "name": "Service Name",
      "url": "https://example.com",
      "status": "up",
      "responseTime": 150,
      "statusCode": 200
    }
  ],
  "allOperational": true
}

Project Structure

src/
├── app/
│   ├── api/check/route.ts    # Status check API endpoint
│   ├── globals.css           # Global styles
│   ├── layout.tsx            # Root layout
│   └── page.tsx              # Home page
├── components/
│   ├── Dashboard.tsx         # Main dashboard component
│   ├── Header.tsx            # Header with refresh button
│   └── StatusCard.tsx        # Service status card
├── lib/
│   └── monitor.config.ts     # Service configuration
└── types/
    └── monitor.ts            # TypeScript definitions

License

Private project.