ibuzzardo · ibuzzardo · Mar 1, 2026 · Mar 1, 2026
diff --git a/.env.example b/.env.example
@@ -0,0 +1,2 @@
+VPS_API_KEY=your-key-here
+PORT=4002
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,43 @@
+# Dependencies
+node_modules/
+
+# Next.js
+.next/
+out/
+
+# Production
+build/
+dist/
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+
+# nyc test coverage
+.nyc_output
+
+# IDE
+.vscode/
+.idea/
+
+# OS
+.DS_Store
+Thumbs.db
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  experimental: {
+    appDir: true
+  }
+}
+
+module.exports = nextConfig
diff --git a/package.json b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "vps-command-center",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 4002",
+    "build": "next build",
+    "start": "next start -p 4002",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "^15.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "systeminformation": "^5.21.20",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@types/node": "^20.8.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.51.0",
+    "eslint-config-next": "^15.0.0",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5",
+    "typescript": "^5.2.2"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/app/api/system/route.ts b/src/app/api/system/route.ts
@@ -0,0 +1,38 @@
+import { NextResponse } from 'next/server'
+import * as si from 'systeminformation'
+import { SystemMetrics } from '@/lib/types'
+
+export async function GET(): Promise<NextResponse<SystemMetrics | { error: string }>> {
+  try {
+    const [cpu, mem, disk, network] = await Promise.all([
+      si.currentLoad(),
+      si.mem(),
+      si.fsSize(),
+      si.networkStats()
+    ])
+
+    const uptime = si.time().uptime
+
+    const metrics: SystemMetrics = {
+      cpu: cpu.currentLoad,
+      memory: {
+        used: mem.used,
+        total: mem.total
+      },
+      disk: disk.length > 0 ? disk[0].use : 0,
+      network: {
+        rx: network.length > 0 ? network[0].rx_bytes : 0,
+        tx: network.length > 0 ? network[0].tx_bytes : 0
+      },
+      uptime: uptime
+    }
+
+    return NextResponse.json(metrics)
+  } catch (error) {
+    console.error('Error fetching system metrics:', error)
+    return NextResponse.json(
+      { error: 'Failed to fetch system metrics' },
+      { status: 500 }
+    )
+  }
+}
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -0,0 +1,20 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --primary: #3B82F6;
+  --secondary: #9CA3AF;
+  --background: #0B1120;
+  --foreground: #F9FAFB;
+  --muted: #374151;
+  --accent: #3B82F6;
+  --destructive: #EF4444;
+  --card: #111827;
+}
+
+body {
+  font-family: 'Inter', system-ui, sans-serif;
+  background-color: var(--background);
+  color: var(--foreground);
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,24 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'VPS Command Center',
+  description: 'Self-hosted VPS monitoring dashboard',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}): JSX.Element {
+  return (
+    <html lang="en">
+      <body className={`${inter.className} bg-background text-foreground min-h-screen`}>
+        {children}
+      </body>
+    </html>
+  )
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -0,0 +1,123 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { SystemMetrics } from '@/lib/types'
+
+export default function Dashboard(): JSX.Element {
+  const [metrics, setMetrics] = useState<SystemMetrics | null>(null)
+  const [loading, setLoading] = useState<boolean>(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchMetrics = async (): Promise<void> => {
+    try {
+      const response = await fetch('/api/system')
+      if (!response.ok) {
+        throw new Error('Failed to fetch metrics')
+      }
+      const data = await response.json()
+      setMetrics(data)
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchMetrics()
+    const interval = setInterval(fetchMetrics, 3000)
+    return () => clearInterval(interval)
+  }, [])
+
+  const formatBytes = (bytes: number): string => {
+    const gb = bytes / (1024 * 1024 * 1024)
+    return `${gb.toFixed(2)} GB`
+  }
+
+  const formatUptime = (seconds: number): string => {
+    const days = Math.floor(seconds / 86400)
+    const hours = Math.floor((seconds % 86400) / 3600)
+    const minutes = Math.floor((seconds % 3600) / 60)
+    return `${days}d ${hours}h ${minutes}m`
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-secondary">Loading system metrics...</div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-destructive">Error: {error}</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-6">
+      <h1 className="text-3xl font-bold mb-6">VPS Command Center</h1>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {/* CPU Usage */}
+        <div className="bg-card border border-muted rounded-lg p-4 shadow-sm">
+          <h2 className="text-lg font-semibold mb-2">CPU Usage</h2>
+          <div className="text-2xl font-bold text-primary">
+            {metrics?.cpu.toFixed(1)}%
+          </div>
+        </div>
+
+        {/* Memory Usage */}
+        <div className="bg-card border border-muted rounded-lg p-4 shadow-sm">
+          <h2 className="text-lg font-semibold mb-2">Memory</h2>
+          <div className="text-2xl font-bold text-primary">
+            {metrics ? formatBytes(metrics.memory.used) : '0 GB'}
+          </div>
+          <div className="text-sm text-secondary">
+            of {metrics ? formatBytes(metrics.memory.total) : '0 GB'}
+          </div>
+        </div>
+
+        {/* Disk Usage */}
+        <div className="bg-card border border-muted rounded-lg p-4 shadow-sm">
+          <h2 className="text-lg font-semibold mb-2">Disk Usage</h2>
+          <div className="text-2xl font-bold text-primary">
+            {metrics?.disk.toFixed(1)}%
+          </div>
+        </div>
+
+        {/* Network RX */}
+        <div className="bg-card border border-muted rounded-lg p-4 shadow-sm">
+          <h2 className="text-lg font-semibold mb-2">Network RX</h2>
+          <div className="text-2xl font-bold text-primary">
+            {metrics ? formatBytes(metrics.network.rx) : '0 GB'}
+          </div>
+        </div>
+
+        {/* Network TX */}
+        <div className="bg-card border border-muted rounded-lg p-4 shadow-sm">
+          <h2 className="text-lg font-semibold mb-2">Network TX</h2>
+          <div className="text-2xl font-bold text-primary">
+            {metrics ? formatBytes(metrics.network.tx) : '0 GB'}
+          </div>
+        </div>
+
+        {/* Uptime */}
+        <div className="bg-card border border-muted rounded-lg p-4 shadow-sm">
+          <h2 className="text-lg font-semibold mb-2">Uptime</h2>
+          <div className="text-2xl font-bold text-primary">
+            {metrics ? formatUptime(metrics.uptime) : '0d 0h 0m'}
+          </div>
+        </div>
+      </div>
+
+      {/* TODO: Sprint 2 - Add PM2 process management */}
+      {/* TODO: Sprint 2 - Add deployed projects section */}
+      {/* TODO: Sprint 2 - Add web terminal */}
+    </div>
+  )
+}
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -0,0 +1,13 @@
+export interface SystemMetrics {
+  cpu: number;
+  memory: {
+    used: number;
+    total: number;
+  };
+  disk: number;
+  network: {
+    rx: number;
+    tx: number;
+  };
+  uptime: number;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -0,0 +1,28 @@
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: '#3B82F6',
+        secondary: '#9CA3AF',
+        background: '#0B1120',
+        foreground: '#F9FAFB',
+        muted: '#374151',
+        accent: '#3B82F6',
+        destructive: '#EF4444',
+        card: '#111827'
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif']
+      }
+    },
+  },
+  plugins: [],
+}
+export default config
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "es6"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}