A complete and modern web dashboard for real-time monitoring of server performance

• Real-time monitoring of CPU, memory, disk usage, and temperature sensors
• Hardware sensors integration for temperature, humidity, pressure, and gas levels
• Document scanner feature with email sending capability
• Navigate and control the dashboard with keyboard only
• Process monitoring with resource usage details
• Logs viewer
• Kiosk mode for full-screen display on dedicated monitors
• Cache Ram usage monitoring and clearing

View active processes on the server along with their CPU and memory usage.

Access and view system logs directly from the dashboard.

Scan documents using a connected scanner and send them via email directly from the dashboard.

You can try the live demo here.

• Node.js v24.x or higher
• pnpm (recommended) or npm
• PM2 (optional, for production deployment)

• Hardware sensors support (for temperature monitoring, I used an Lilygo T-display with an ATH20 + BMP280 and a MQ-125 gas sensor; you can find the code in the extras/code.ino folder)

# Clone the repository
git clone  repository-url>gt;

cd kiosk


# Install dependencies
pnpm install



# Build the project
pnpm build



# Start the server with pm2
pm2 start ecosystem.config.js



# Start the websocket for the environment sensors (optional)
pm2 start pnpm --name sensor-ws -- tsx sensors-ws-server.ts



# Save the pm2 process list and configure it to start on boot
pm2 save



# Or start in development mode
pnpm devv

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

To monitor hardware sensors like temperature, humidity, and gas levels, you can use an ESP32 microcontroller with appropriate sensors (e.g., ATH20 for temperature/humidity, BMP280 for pressure, MQ-125 for gas detection).

You can find the Arduino code and PlatformIO configuration in the extras/code.ino directory for a Lilygo T-Display board.

Run the application in full-screen kiosk mode on a dedicated monitor, perfect for server rooms or monitoring stations.

• A monitor connected to your server
• Chromium or Firefox browser with kiosk mode support
• A minimal window manager (like Openbox)

sudo apt update
sudo apt install --no-install-recommends \
  xserver-xorg x11-xserver-utils xinit openbox chromium-browserer

sudo adduser kiosk
sudo usermod -aG audio,video,tty,dialout kioskk

nano /home/kiosk/.xinitrc

Add the following lines:

#!/bin/bash


# Disable screen blanking and power management
xset s off
xset -dpms
xset s noblank

k

# Wait for X to be fully started
sleep 2



# Launch Chromium in kiosk mode
chromium-browser \
  --noerrdialogs \
  --disable-infobars \
  --disable-session-crashed-bubble \
  --kiosk \
  http://localhost:3000t:3000

chmod +x /home/kiosk/.xinitrc

Edit the getty service for TTY1:

sudo mkdir -p /etc/systemd/system/[email protected]
sudo nano /etc/systemd/system/[email protected]/override.conff

Add the following lines:

[Service]

ExecStart=

ExecStart=-/sbin/agetty --autologin kiosk --noclear %I $TERM

sudo systemctl daemon-reexec
sudo systemctl daemon-reload
sudo systemctl restart getty@tty1y1

nano /home/kiosk/.bash_profile

Add the following lines:

if [[ -z $DISPLAY &∓& $XDG_VTNR -eq 1 ]]; then
  startx

fi

sudo reboot

After reboot, the system should automatically:

1. Log in the kiosk user on TTY1
2. Start the X server
3. Launch Chromium in full-screen mode
4. Display the dashboard at http://localhost:3000

pm2 startup
pm2 savee

pnpm dev      # Start development server with hot reload
pnpm build     # Build for production
pnpm start     # Start production server
pnpm lint      # Run ESLint code linting

kiosk/
├── app/                  # Next.js App Directory
│   ├── api/              # API Routes
│   │   ├── cache/        # Endpoint to clear memory cache
│   │   ├── disk/         # Endpoint to get disk usage
│   │   ├── logs/         # Endpoint to fetch system logs
│   │   ├── stats/        # Endpoint to get CPU, memory stats and sensors
│   │   ├── processes/    # Endpoint to get active processes
│   │   ├── sendMail/     # Endpoint to send scans email
│   ├── components/       # Components specific to app routes
│   │   ├── modals/       # Dialog and modals
│   │   └── utilities/    # Utility components
│   ├── services/         # Scan and demo service
│   └── scans/            # Scanned files route
├── components/           # Components used across the app
│   ├── scanner/          # Scanner components
│   └── ui/               # shadcn UI components
├── hooks/                # Hooks
├── lib/                  # Utilities and helpers
├── pages/                # API Routes for scanner and JWT validation
├── extras/               # PlatformIO configuration with Arduino code, send mail route
└── public/               # Static files
      # Static files

Create a .env file in the root of the project with the following variables:

# Mail server configuration (for scanner feature)

MAIL_SERVICE_URL="your_mail_service_url"

JWT_SECRET_KEY="your_mail_server_secret_key"


# Server configuration

HOSTNAME="your_server_hostname"


# WiFi configuration (displayed in scanner QR codes)

NEXT_PUBLIC_WIFI_SSID="your_wifi_ssid"

The application supports a demo mode for testing without requiring real server data or hardware sensors. This is useful for development and testing purposes.

To enable demo mode, add the following environment variable to your .env file:

NEXT_PUBLIC_DEMO_MODE=true

When enabled, the dashboard will display simulated data for all monitoring features.

• GET /api/stats - Fetch CPU, memory usage, and sensor data
• GET /api/disk - Get disk usage information
• GET /api/cache - Retrieve cached sensor data
• GET /api/logs - Fetch system logs
• GET /api/processes - List active processes with resource usage

• POST /api/sendMail - Send scanned documents via email
• GET /scans/[file] - Retrieve a specific scanned file

AI helped me with code snippets, autocompletion, debugging, bug fixes, formatting raw data and styling suggestions

This project is licensed under the MIT License. See the LICENSE file for details.