[Dark Factory] Build a full-stack Next.js 15 dashboard with API routes for real-time VPS monitoring and management including system metrics, PM2 controls, project insights, and API-key authentication.

.env.example

@@ -1,6 +1,10 @@
-# Environment variables for Markdown Preview
-# Copy this file to .env.local and fill in your values
+# Server Configuration
+PORT=4002
 
-# Example: API keys, database URLs, etc.
-# API_KEY=your_api_key_here
-# DATABASE_URL=your_database_url_here
+# Authentication
+# Set this to enable API key authentication
+# If not set, auth is disabled (development mode)
+API_KEY=changeme-your-secure-api-key-here
+
+# Optional: Node Environment
+NODE_ENV=production

.gitignore

@@ -1,6 +1,10 @@
 # Dependencies
 node_modules/
-.pnpm-store/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
 # Next.js
 .next/
@@ -16,11 +20,8 @@ dist/
 .env.production.local
 
 # Logs
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
+logs
+*.log
 
 # Runtime data
 pids
@@ -35,8 +36,9 @@ coverage/
 # nyc test coverage
 .nyc_output
 
-# ESLint cache
-.eslintcache
+# Dependency directories
+node_modules/
+jspm_packages/
 
 # TypeScript cache
 *.tsbuildinfo
@@ -71,6 +73,7 @@ coverage/
 
 # Nuxt.js build / generate output
 .nuxt
+dist
 
 # Storybook build outputs
 .out

README.md

@@ -1,161 +1,107 @@
-# Markdown Preview
+# VPS Command Center
 
-A live Markdown preview web application built with Next.js 15 App Router. Users can type Markdown in the left panel and see a styled HTML preview update in real-time on the right panel.
+A self-hosted web dashboard for monitoring and managing a Linux VPS. Shows real-time system metrics, PM2 processes, deployed projects, and provides management controls.
 
 ## Features
 
-- ⚡ **Real-time preview** - Updates as you type with 200ms debouncing
-- 🎨 **Dark theme** - Beautiful dark UI with Tailwind CSS
-- 📱 **Mobile responsive** - Panels stack vertically on small screens
-- 🔒 **Secure** - HTML output is sanitized to prevent XSS attacks
-- 📋 **Copy to clipboard** - One-click HTML copying
-- 🚀 **Modern stack** - Next.js 15, React 19, TypeScript
+- **Real-time System Metrics**: CPU, memory, disk, network usage updated every 3 seconds
+- **PM2 Process Manager**: View, start, stop, and restart PM2 processes
+- **Project Scanner**: List deployed projects with git info and disk usage
+- **API Key Authentication**: Secure access with configurable API key
+- **Responsive Design**: Works on desktop, tablet, and mobile devices
+- **Dark Theme**: Professional dashboard aesthetic
 
-## Supported Markdown Features
+## Requirements
 
-- Headers (H1-H6)
-- **Bold** and *italic* text
-- ~~Strikethrough~~
-- `Inline code` and code blocks with syntax highlighting
-- [Links](https://example.com) and images
-- Tables (GitHub Flavored Markdown)
-- > Blockquotes
-- Ordered and unordered lists
-- Task lists with checkboxes
-- Horizontal rules
+- Node.js 18+
+- PM2 (for process management features)
+- Git (for project information)
+- Linux/Unix system (for system metrics)
 
-## Getting Started
-
-### Prerequisites
-
-- Node.js 18.0.0 or higher
-- npm (comes with Node.js)
-
-### Installation
+## Installation
 
 1. Clone the repository:
 ```bash
 git clone <repository-url>
-cd markdown-preview
+cd vps-command-center
 ```
 
 2. Install dependencies:
 ```bash
 npm install
 ```
 
-3. Copy environment variables (optional):
+3. Configure environment variables:
 ```bash
-cp .env.example .env.local
+cp .env.example .env
+# Edit .env with your settings
 ```
 
-4. Start the development server:
+4. Build the application:
 ```bash
-npm run dev
+npm run build
 ```
 
-5. Open [http://localhost:3000](http://localhost:3000) in your browser.
-
-## Available Scripts
-
-- `npm run dev` - Start development server
-- `npm run build` - Build for production
-- `npm run start` - Start production server
-- `npm run lint` - Run ESLint
-- `npm run type-check` - Run TypeScript compiler check
-
-## API Endpoints
-
-### Health Check
-- **GET** `/api/health` - Returns `{ status: "ok" }`
-
-## Project Structure
-
-```
-src/
-├── app/
-│   ├── layout.tsx         # Root layout with dark theme
-│   ├── page.tsx           # Main page with MarkdownEditor
-│   ├── globals.css        # Global styles and prose overrides
-│   └── api/
-│       └── health/
-│           └── route.ts   # Health check endpoint
-├── components/
-│   ├── MarkdownEditor.tsx # Main editor component
-│   └── SampleMarkdown.ts  # Default markdown content
-├── lib/
-│   └── markdown.ts        # Markdown processing utilities
-└── types.ts               # TypeScript type definitions
+5. Start the server:
+```bash
+npm start
 ```
 
-## Technology Stack
+The dashboard will be available at `http://localhost:4002`
 
-- **Framework**: Next.js 15 with App Router
-- **Language**: TypeScript (strict mode)
-- **Styling**: Tailwind CSS with @tailwindcss/typography
-- **Markdown Processing**: 
-  - unified
-  - remark-parse
-  - remark-gfm (GitHub Flavored Markdown)
-  - remark-rehype
-  - rehype-stringify
-  - rehype-sanitize
-
-## Mobile Responsiveness
-
-The application is fully responsive and tested at these breakpoints:
-- **Mobile**: 320px and up (stacked layout)
-- **Tablet**: 768px and up (side-by-side layout)
-- **Desktop**: 1280px and up (optimized spacing)
+## Environment Variables
 
-## Security
+- `PORT` - Server port (default: 4002)
+- `API_KEY` - API key for authentication (optional, disables auth if not set)
+- `NODE_ENV` - Node environment (development/production)
 
-- All HTML output is sanitized using `rehype-sanitize`
-- No dangerous HTML elements or attributes are allowed
-- XSS protection through content sanitization
+## Development
 
-## Browser Support
+Run in development mode:
+```bash
+npm run dev
+```
 
-- Modern browsers with ES2017+ support
-- Clipboard API for copy functionality (with fallback)
-- JavaScript required for functionality
+## Authentication
 
-## Contributing
+If `API_KEY` is set in environment variables:
+- All pages require authentication
+- Login at `/login` with the API key
+- Session stored in secure httpOnly cookie
 
-1. Fork the repository
-2. Create a feature branch
-3. Make your changes
-4. Run tests and linting
-5. Submit a pull request
+If `API_KEY` is not set:
+- Authentication is disabled (development mode)
+- All features accessible without login
 
-## License
+## Project Structure
 
-MIT License - see LICENSE file for details.
+- `/` - Dashboard with system metrics
+- `/processes` - PM2 process manager
+- `/projects` - Deployed projects overview
+- `/login` - Authentication page
 
-## Environment Variables
+## API Endpoints
 
-Currently, no environment variables are required for basic functionality. See `.env.example` for future configuration options.
+- `GET /api/system` - System metrics
+- `GET /api/pm2` - PM2 processes list
+- `POST /api/pm2/:id/restart` - Restart process
+- `POST /api/pm2/:id/stop` - Stop process
+- `POST /api/pm2/:id/start` - Start process
+- `GET /api/projects` - Deployed projects
+- `POST /api/auth` - Authentication
 
-## Performance
+## Deployment
 
-- Debounced input processing (200ms)
-- Efficient re-rendering with React hooks
-- Optimized bundle size with tree shaking
-- Fast development with Next.js Hot Module Replacement
+For production deployment:
 
-## Troubleshooting
+1. Set `NODE_ENV=production`
+2. Configure a strong `API_KEY`
+3. Use a process manager like PM2:
 
-### Build Issues
-- Ensure Node.js version is 18.0.0 or higher
-- Clear node_modules and reinstall: `rm -rf node_modules package-lock.json && npm install`
-- Check TypeScript errors: `npm run type-check`
+```bash
+pm2 start npm --name "vps-center" -- start
+```
 
-### Runtime Issues
-- Check browser console for JavaScript errors
-- Ensure JavaScript is enabled
-- Try hard refresh (Ctrl+F5 or Cmd+Shift+R)
+## License
 
-### Clipboard Issues
-- Clipboard API requires HTTPS in production
-- Fallback method available for older browsers
-- Check browser permissions for clipboard access
+MIT License

next.config.js

@@ -3,12 +3,29 @@ const nextConfig = {
   experimental: {
     appDir: true,
   },
+  output: 'standalone',
   typescript: {
     ignoreBuildErrors: false,
   },
   eslint: {
     ignoreDuringBuilds: false,
   },
+  env: {
+    PORT: process.env.PORT || '4002',
+  },
+  async headers() {
+    return [
+      {
+        source: '/api/:path*',
+        headers: [
+          {
+            key: 'Cache-Control',
+            value: 'no-store, no-cache, must-revalidate, proxy-revalidate',
+          },
+        ],
+      },
+    ]
+  },
 }
 
 module.exports = nextConfig

package.json

@@ -1,39 +1,49 @@
 {
-  "name": "markdown-preview",
-  "version": "0.1.0",
-  "private": true,
+  "name": "vps-command-center",
+  "version": "1.0.0",
+  "description": "Self-hosted web dashboard for monitoring and managing a Linux VPS",
+  "type": "module",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 4002",
     "build": "next build",
-    "start": "next start",
+    "start": "next start -p 4002",
     "lint": "next lint",
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "unified": "^11.0.4",
-    "remark-parse": "^11.0.0",
-    "remark-gfm": "^4.0.0",
-    "remark-rehype": "^11.1.0",
-    "rehype-stringify": "^10.0.0",
-    "rehype-sanitize": "^6.0.0",
-    "@tailwindcss/typography": "^0.5.10",
-    "classnames": "^2.3.2"
+    "typescript": "^5.0.0",
+    "tailwindcss": "^3.0.0",
+    "postcss": "^8.0.0",
+    "autoprefixer": "^10.0.0",
+    "systeminformation": "^5.0.0",
+    "pm2": "^5.0.0",
+    "simple-git": "^3.0.0",
+    "lucide-react": "^0.460.0",
+    "clsx": "^2.0.0",
+    "zod": "^3.22.0"
   },
   "devDependencies": {
-    "typescript": "^5.3.3",
-    "@types/node": "^20.10.5",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
-    "tailwindcss": "^3.4.0",
-    "postcss": "^8.4.32",
-    "autoprefixer": "^10.4.16",
-    "eslint": "^8.56.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "eslint": "^8.0.0",
     "eslint-config-next": "^15.0.0"
   },
   "engines": {
-    "node": ">=18.0.0"
-  }
+    "node": ">=18.0.0",
+    "npm": ">=8.0.0"
+  },
+  "keywords": [
+    "vps",
+    "dashboard",
+    "monitoring",
+    "pm2",
+    "system-metrics",
+    "next.js"
+  ],
+  "author": "VPS Command Center",
+  "license": "MIT"
 }