A real-time, premium server monitoring dashboard for Cloudways managed fleets. Built with Next.js 16, TypeScript, Supabase, and Plotly.js.
- Real-time Telemetry — CPU, Memory, Disk, Network, MySQL, Memcached, Varnish, and more.
- Multi-Provider Aware — Automatically filters and normalizes metrics for DigitalOcean, AWS, GCP, Vultr, Linode, and Kyup.
- Fleet Management — Dedicated Admin Portal to manage servers, users, and cross-platform assignments.
- Secure RBAC — Integrated Supabase Auth with Role-Based Access Control (Admin vs. User).
- User Self-Service — Profile management for display names and secure password updates.
- Adaptive Logo Engine — Intelligent brightness detection for SVG and image logos with automated inversion for consistent branding.
- Interactive Analytics — High-performance Plotly.js line charts with hover tooltips and dynamic time ranges (1h to 6M).
- Viewport-Optimized UI — A strictly light-themed, professional interface locked to the viewport with internal scrolling.
- Responsive & Mobile Ready — Fully optimized experience across desktop, tablet, and mobile devices.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Auth & Database | Supabase (Auth + PostgreSQL + RLS) |
| Language | TypeScript |
| Styling | TailwindCSS |
| Charts | Plotly.js |
| Icons | Google Material Symbols |
- Node.js ≥ 20.9
- A Supabase Project
- Cloudways API Credentials (Email + API Key)
git clone https://github.com/sayedibnmasud/cloudwaysServerMonitor.git
cd cloudwaysServerMonitor
npm installCreate a .env.local file in the root directory:
# Cloudways API Integration
CLOUDWAYS_API_KEY=your_cloudways_api_key
CLOUDWAYS_EMAIL=your_email@example.com
# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your_supabase_anon_key
SUPABASE_SECRET_KEY=your_service_role_key # For server-side admin actions
# Site Configuration
NEXT_PUBLIC_SITE_URL=http://localhost:3000Ensure your Supabase project has the following tables:
profiles: Links toauth.users, storesemail,full_name, androle('admin' | 'user').servers: Stores server metadata (ID, Name, Provider Type, Logo URL,is_activeflag).user_servers: Join table for assigning specific servers to standard users.
npm run devAccessible only to users with the admin role. Allows full CRUD operations on servers and users, and management of server-to-user assignments. Role enforcement is handled at the layout/page level (not in the proxy) to avoid redundant DB queries on every request.
The landing page for users to search, filter, and select from their assigned server fleet. Features a stabilized search bar for a smooth filtering experience.
Located at the top-right of every page, providing instant access to Profile Settings, Admin Management, and Logout.
src/
├── app/
│ ├── admin/ # Management Portal (Users & Servers)
│ ├── actions/ # Server Actions (Auth, Cloudways, Admin)
│ ├── api/ # Metrics API endpoints (graph & overview)
│ ├── auth/ # Supabase Auth callback handler
│ └── login/ # Authentication & Password Reset views
├── components/ # Reusable UI (Charts, Modals, Dropdowns)
├── lib/ # Core logic (Supabase, Utils, Metrics)
└── proxy.ts # Session refresh & Route protection
MIT © 2026 Sayed Ibn Masud — see LICENSE for details.