Log inSign up
project logo

shiwofo

vps-panel

Public
Remixed
NimbusVPS — a modern simulated VPS control panel UI
Edit with AI
1 Branch
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
index.ts
README.md

☁ NimbusVPS — Cloud Control Panel (Simulation)

A sleek, modern VPS control panel UI — purely a front-end simulation, no real infrastructure behind it. Built with client-side React + Hono on Val Town.

Features

  • 📊 Live dashboard with fleet summary stats (servers, avg CPU/RAM, monthly cost)
  • 🖥️ Server cards with animated status dots and real-time usage bars
  • ⚡ Live simulation — CPU / RAM / network metrics tick and drift every 1.5s
  • 🎛️ Detail drawer with circular gauges, sparkline charts & full spec sheet
  • 🔌 Power controls — start / stop / reboot (with reboot animation), snapshot
  • ⌨️ Fake terminal — try uptime, df -h, top, neofetch, ping, ls
  • 🔍 Search & filter by name / IP / region and running/stopped status
  • ➕ Deploy new simulated servers on the fly
  • 🌗 Dark, glassy UI with Tailwind (via Twind) — zero build step

Everything is mock data generated in the browser. No servers are real. 🙂

Architecture

Rendering mermaid diagram...

File structure

index.ts                       ← Hono backend (serves frontend)
frontend/
  index.html                   ← HTML shell (Twind + React)
  index.tsx                    ← React entrypoint
  components/
    App.tsx                    ← Dashboard, state, live simulation loop
    ServerCard.tsx             ← Grid card + status badge
    ServerDetail.tsx           ← Slide-over: gauges, charts, power, console
    Charts.tsx                 ← GaugeRing, Sparkline, StatBar primitives
    mockData.ts                ← Fake server generation + metric simulation

Make it real?

Val Town's runtime is fetch-only (no raw TCP/UDP), so a real VPS panel would talk to a provider's HTTP API (e.g. Hetzner, DigitalOcean, Vultr). Swap the functions in mockData.ts for real API calls and keep the UI as-is.