try this shi

2025-10-13 13:53:48 -05:00
commit fc6d1237e9
24 changed files with 1345 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,34 @@
+# Dependencies
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json
+
+# Environment variables
+.env
+.env.local
+.env.production
+
+# Build outputs
+dist/
+build/
+*.log
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Minecraft data
+data/
+
+# Docker
+.dockerignore
+
--- a/QUICKSTART.md
+++ b/QUICKSTART.md
@@ -0,0 +1,101 @@
+# ⚡ Quick Start Guide
+
+Get your Minecraft Dashboard up and running in 3 simple steps!
+
+## Prerequisites
+- Docker and Docker Compose installed
+- Minecraft server running on `mcnet` network
+
+## 🚀 3-Step Setup
+
+### 1️⃣ Start Your Minecraft Server
+
+If not already running, start your Minecraft server with the provided configuration:
+
+```bash
+docker-compose -f docker-compose.minecraft.yml up -d
+```
+
+### 2️⃣ Launch the Dashboard
+
+Simply run:
+
+```bash
+./start-dashboard.sh
+```
+
+This will:
+- Create the `mcnet` network (if it doesn't exist)
+- Build the frontend and backend containers
+- Start all dashboard services
+
+### 3️⃣ Open the Dashboard
+
+Navigate to in your browser:
+```
+http://localhost:8080
+```
+
+## 🎮 Using the Dashboard
+
+### Features:
+- **🟢 Server Status** - See if your server is online
+- **👥 Player Count** - Monitor active players
+- **▶️ Start Button** - Start the Minecraft server
+- **⏹️ Stop Button** - Gracefully stop the server
+- **🔄 Auto-Refresh** - Updates every 5 seconds
+
+### Controls:
+- Click **START SERVER** to boot up your Minecraft server
+- Click **STOP SERVER** to safely shut it down (requires confirmation)
+- Click **🔄** to manually refresh the status
+
+## 🛑 Stopping the Dashboard
+
+When you're done:
+
+```bash
+./stop-dashboard.sh
+```
+
+Or manually:
+```bash
+docker-compose -f docker-compose.dashboard.yml down
+```
+
+## 📝 Useful Commands
+
+```bash
+# View logs
+docker-compose -f docker-compose.dashboard.yml logs -f
+
+# Restart the dashboard
+docker-compose -f docker-compose.dashboard.yml restart
+
+# Rebuild after making changes
+docker-compose -f docker-compose.dashboard.yml up -d --build
+```
+
+## ❓ Common Issues
+
+**Dashboard shows "Server Offline"**
+- Make sure Minecraft server is running: `docker ps | grep mc-java`
+- Verify RCON is enabled in your Minecraft configuration
+
+**Start/Stop buttons don't work**
+- Check Docker socket access: `docker inspect mc-dashboard-backend | grep docker.sock`
+
+**Can't access dashboard**
+- Verify port 8080 is not in use: `lsof -i :8080`
+- Check if frontend is running: `docker ps | grep mc-dashboard-frontend`
+
+## 📖 Need More Help?
+
+See the full documentation:
+- [README.md](README.md) - Complete documentation
+- [SETUP.md](SETUP.md) - Detailed setup guide
+
+---
+
+Enjoy your Minecraft Dashboard! 🎮⛏️
+
--- a/README.md
+++ b/README.md
@@ -0,0 +1,218 @@
+# 🎮 Minecraft Server Dashboard
+
+A beautiful, modern web dashboard to monitor and control your Minecraft server with real-time statistics and server management.
+
+![Minecraft Dashboard](https://img.shields.io/badge/Minecraft-Dashboard-brightgreen)
+
+## ✨ Features
+
+- 🎯 **Real-time Server Monitoring**
+  - Player count and online players list
+  - Server version and status
+  - Latency monitoring
+  - TPS (Ticks Per Second) tracking
+  
+- 🎮 **Server Control**
+  - Start server with one click
+  - Stop server gracefully (with confirmation)
+  - Automatic status refresh every 5 seconds
+  
+- 🎨 **Beautiful UI**
+  - Modern gradient design
+  - Minecraft-themed color palette
+  - Responsive layout for all devices
+  - Smooth animations and transitions
+  - Real-time status indicators
+
+## 🏗️ Architecture
+
+### Backend
+- **Node.js + Express** - RESTful API server
+- **RCON Integration** - Direct communication with Minecraft server
+- **Docker API** - Container management for start/stop functionality
+- **minecraft-server-util** - Server status queries
+
+### Frontend
+- **React 18** - Modern UI framework
+- **Vite** - Lightning-fast build tool
+- **Tailwind CSS** - Utility-first styling
+- **Lucide React** - Beautiful icons
+- **Axios** - HTTP client
+
+## 🚀 Quick Start
+
+### Prerequisites
+- Docker and Docker Compose installed
+- Existing Minecraft server running on `mcnet` network
+
+### Installation
+
+1. **Clone or navigate to the project directory**
+   ```bash
+   cd mc
+   ```
+
+2. **Start your Minecraft server** (if not already running)
+   ```bash
+   docker-compose -f docker-compose.minecraft.yml up -d
+   ```
+
+3. **Build and start the dashboard**
+   ```bash
+   docker-compose -f docker-compose.dashboard.yml up -d --build
+   ```
+
+4. **Access the dashboard**
+   - Open your browser to: `http://localhost:8080`
+
+### Development Mode
+
+For local development without Docker:
+
+**Backend:**
+```bash
+cd backend
+npm install
+npm run dev
+```
+
+**Frontend:**
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+## 📁 Project Structure
+
+```
+mc/
+├── backend/
+│   ├── src/
+│   │   └── index.js          # Express API server
+│   ├── Dockerfile
+│   └── package.json
+├── frontend/
+│   ├── src/
+│   │   ├── App.jsx           # Main React component
+│   │   ├── main.jsx
+│   │   ├── index.css
+│   │   └── App.css
+│   ├── public/
+│   ├── index.html
+│   ├── Dockerfile
+│   ├── nginx.conf
+│   ├── vite.config.js
+│   └── package.json
+├── docker-compose.dashboard.yml
+└── README.md
+```
+
+## 🔧 Configuration
+
+### Environment Variables
+
+Create a `.env` file based on `.env.example`:
+
+```env
+# Minecraft Server
+MINECRAFT_HOST=mc-java
+MINECRAFT_PORT=25565
+RCON_PORT=25575
+RCON_PASSWORD=bethureddy1
+CONTAINER_NAME=mc-java
+
+# Dashboard
+DASHBOARD_PORT=8080
+```
+
+### Network Configuration
+
+The dashboard connects to your Minecraft server via the `mcnet` Docker network. Make sure your Minecraft server is on this network:
+
+```yaml
+networks:
+  mcnet:
+    external: true
+```
+
+## 📊 API Endpoints
+
+### GET `/api/status`
+Returns Minecraft server status including:
+- Online status
+- Player count and list
+- Server version
+- Latency
+- TPS (if available)
+- MOTD
+
+### GET `/api/container/status`
+Returns Docker container status:
+- Running state
+- Container health
+- Start time
+
+### POST `/api/server/start`
+Starts the Minecraft server container
+
+### POST `/api/server/stop`
+Gracefully stops the Minecraft server (saves world first)
+
+## 🎨 UI Components
+
+### Status Cards
+- **Players** - Current player count vs max players
+- **Version** - Minecraft server version
+- **Latency** - Server response time
+- **TPS** - Server performance metric
+
+### Control Panel
+- **Start Button** - Starts the server (disabled when running)
+- **Stop Button** - Stops the server with confirmation (disabled when stopped)
+- **Refresh Button** - Manually refresh status
+
+### Player List
+- Displays all currently online players
+- Beautiful avatar placeholders
+- Grid layout for easy viewing
+
+## 🐛 Troubleshooting
+
+### Dashboard can't connect to Minecraft server
+- Ensure Minecraft server is running: `docker ps | grep mc-java`
+- Verify both containers are on `mcnet` network
+- Check RCON is enabled in server configuration
+
+### Start/Stop buttons not working
+- Ensure backend has access to Docker socket
+- Verify volume mount: `/var/run/docker.sock:/var/run/docker.sock`
+- Check container name matches: `CONTAINER_NAME=mc-java`
+
+### RCON connection failed
+- Verify RCON password matches Minecraft server
+- Check RCON port (default: 25575)
+- Ensure RCON is enabled in server.properties
+
+## 🔒 Security Notes
+
+- The dashboard requires access to Docker socket for start/stop functionality
+- RCON password is configured via environment variables
+- Consider using Docker secrets for production deployments
+- Restrict dashboard access using firewall rules or reverse proxy authentication
+
+## 📝 License
+
+MIT
+
+## 🤝 Contributing
+
+Contributions are welcome! Feel free to submit issues and pull requests.
+
+## 💖 Acknowledgments
+
+- Built with React and Node.js
+- Minecraft server status via minecraft-server-util
+- RCON implementation using modern-rcon
+- Icons by Lucide React
+
--- a/SETUP.md
+++ b/SETUP.md
@@ -0,0 +1,241 @@
+# 🚀 Setup Guide for Minecraft Dashboard
+
+## Quick Setup (Recommended)
+
+### Step 1: Ensure Minecraft Server is Running
+
+First, make sure your Minecraft server is running. Save this as `docker-compose.minecraft.yml`:
+
+```yaml
+version: '3.8'
+
+services:
+  minecraft:
+    image: itzg/minecraft-server:latest
+    container_name: mc-java
+    environment:
+      EULA: "TRUE"
+      ENABLE_RCON: "true"
+      RCON_PASSWORD: "bethureddy1"
+      RCON_PORT: "25575"
+      TZ: "America/Chicago"
+      TYPE: "PAPER"
+      VERSION: "1.21.10"
+      MEMORY: "20G"
+    volumes:
+      - ./data:/data
+    expose:
+      - "25565"
+    restart: unless-stopped
+    networks:
+      - mcnet
+
+  nginx-stream:
+    image: nginx:1.27-alpine
+    container_name: mc-proxy
+    depends_on:
+      - minecraft
+    ports:
+      - "25565:25565/tcp"
+    volumes:
+      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
+    restart: unless-stopped
+    networks:
+      - mcnet
+
+networks:
+  mcnet:
+    driver: bridge
+```
+
+Start the Minecraft server:
+```bash
+docker-compose -f docker-compose.minecraft.yml up -d
+```
+
+### Step 2: Start the Dashboard
+
+Make the start script executable and run it:
+
+```bash
+chmod +x start-dashboard.sh
+./start-dashboard.sh
+```
+
+Or manually:
+```bash
+docker-compose -f docker-compose.dashboard.yml up -d --build
+```
+
+### Step 3: Access the Dashboard
+
+Open your browser and navigate to:
+```
+http://localhost:8080
+```
+
+## 🎯 What You'll See
+
+The dashboard displays:
+
+1. **Server Status** - Real-time online/offline indicator
+2. **Control Buttons** - Start and Stop your server
+3. **Player Count** - Current players vs max capacity
+4. **Server Version** - Minecraft version running
+5. **Latency** - Server response time
+6. **TPS** - Server performance (if available)
+7. **Online Players List** - Names of all connected players
+8. **MOTD** - Server message of the day
+
+## 🛠️ Troubleshooting
+
+### Dashboard shows "Server Offline" but server is running
+
+1. Check if both containers are on the same network:
+   ```bash
+   docker network inspect mcnet
+   ```
+
+2. Verify RCON is enabled on the Minecraft server:
+   ```bash
+   docker exec mc-java cat /data/server.properties | grep rcon
+   ```
+
+3. Check backend logs:
+   ```bash
+   docker logs mc-dashboard-backend
+   ```
+
+### Start/Stop buttons don't work
+
+The backend needs access to the Docker socket. Verify the volume mount:
+```bash
+docker inspect mc-dashboard-backend | grep docker.sock
+```
+
+Should show: `/var/run/docker.sock:/var/run/docker.sock`
+
+### Dashboard won't load
+
+1. Check if frontend is running:
+   ```bash
+   docker ps | grep mc-dashboard-frontend
+   ```
+
+2. Check frontend logs:
+   ```bash
+   docker logs mc-dashboard-frontend
+   ```
+
+3. Verify port 8080 is not in use:
+   ```bash
+   lsof -i :8080
+   ```
+
+## 🔄 Updates and Maintenance
+
+### Rebuild the Dashboard
+```bash
+docker-compose -f docker-compose.dashboard.yml up -d --build
+```
+
+### View Logs
+```bash
+# All services
+docker-compose -f docker-compose.dashboard.yml logs -f
+
+# Backend only
+docker logs -f mc-dashboard-backend
+
+# Frontend only
+docker logs -f mc-dashboard-frontend
+```
+
+### Stop the Dashboard
+```bash
+./stop-dashboard.sh
+```
+
+Or manually:
+```bash
+docker-compose -f docker-compose.dashboard.yml down
+```
+
+## 🔐 Security Considerations
+
+1. **Change RCON Password**: Update `RCON_PASSWORD` in both your Minecraft and dashboard configurations
+2. **Firewall**: Only expose port 8080 to trusted networks
+3. **Reverse Proxy**: Consider using nginx/traefik with authentication for production
+4. **Docker Socket**: The backend needs Docker socket access - only run in trusted environments
+
+## 📊 Port Usage
+
+- **8080** - Dashboard web interface
+- **3001** - Backend API (internal only)
+- **25565** - Minecraft server
+- **25575** - RCON (internal only)
+
+## 🎨 Customization
+
+### Change Dashboard Port
+
+Edit `docker-compose.dashboard.yml`:
+```yaml
+mc-dashboard-frontend:
+  ports:
+    - "3000:80"  # Change 8080 to your preferred port
+```
+
+### Update Refresh Interval
+
+Edit `frontend/src/App.jsx`, line with `setInterval`:
+```javascript
+const interval = setInterval(fetchStatus, 10000) // 10 seconds instead of 5
+```
+
+## 🐳 Docker Commands Reference
+
+```bash
+# Start everything
+docker-compose -f docker-compose.dashboard.yml up -d
+
+# Stop everything
+docker-compose -f docker-compose.dashboard.yml down
+
+# Rebuild and restart
+docker-compose -f docker-compose.dashboard.yml up -d --build
+
+# View logs
+docker-compose -f docker-compose.dashboard.yml logs -f
+
+# Restart a specific service
+docker-compose -f docker-compose.dashboard.yml restart mc-dashboard-backend
+
+# Remove everything including volumes
+docker-compose -f docker-compose.dashboard.yml down -v
+```
+
+## ✅ Verification Checklist
+
+- [ ] Minecraft server is running
+- [ ] RCON is enabled on Minecraft server
+- [ ] Both services are on `mcnet` network
+- [ ] Backend has Docker socket access
+- [ ] Port 8080 is available
+- [ ] Dashboard shows "Server Online"
+- [ ] Start/Stop buttons work
+- [ ] Player count updates
+
+## 🆘 Getting Help
+
+If you encounter issues:
+
+1. Check logs: `docker-compose -f docker-compose.dashboard.yml logs`
+2. Verify network: `docker network inspect mcnet`
+3. Test RCON: `docker exec mc-java rcon-cli -p bethureddy1 list`
+4. Restart everything: `./stop-dashboard.sh && ./start-dashboard.sh`
+
+---
+
+Happy Minecrafting! 🎮⛏️
+
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -0,0 +1,14 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install --production
+
+COPY . .
+
+EXPOSE 3001
+
+CMD ["npm", "start"]
+
--- a/backend/package.json
+++ b/backend/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "mc-dashboard-backend",
+  "version": "1.0.0",
+  "description": "Minecraft Server Dashboard Backend",
+  "main": "src/index.js",
+  "type": "module",
+  "scripts": {
+    "start": "node src/index.js",
+    "dev": "node --watch src/index.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "cors": "^2.8.5",
+    "minecraft-server-util": "^5.4.3",
+    "modern-rcon": "^1.2.1",
+    "dockerode": "^4.0.2"
+  }
+}
+
--- a/backend/src/index.js
+++ b/backend/src/index.js
@@ -0,0 +1,169 @@
+import express from 'express';
+import cors from 'cors';
+import { status } from 'minecraft-server-util';
+import Rcon from 'modern-rcon';
+import Docker from 'dockerode';
+
+const app = express();
+const PORT = process.env.PORT || 3001;
+
+app.use(cors());
+app.use(express.json());
+
+const MINECRAFT_HOST = process.env.MINECRAFT_HOST || 'mc-java';
+const MINECRAFT_PORT = parseInt(process.env.MINECRAFT_PORT || '25565');
+const RCON_PORT = parseInt(process.env.RCON_PORT || '25575');
+const RCON_PASSWORD = process.env.RCON_PASSWORD || 'bethureddy1';
+const CONTAINER_NAME = process.env.CONTAINER_NAME || 'mc-java';
+
+const docker = new Docker({ socketPath: '/var/run/docker.sock' });
+
+// Get server status
+app.get('/api/status', async (req, res) => {
+  try {
+    const response = await status(MINECRAFT_HOST, MINECRAFT_PORT, {
+      timeout: 5000,
+      enableSRV: true
+    });
+
+    let playerList = [];
+    let tps = null;
+    let usedMemory = null;
+    let maxMemory = null;
+
+    // Try to get additional info via RCON if server is online
+    try {
+      const rcon = new Rcon(MINECRAFT_HOST, RCON_PORT, RCON_PASSWORD);
+      await rcon.connect();
+      
+      // Get player list
+      const listResponse = await rcon.send('list');
+      playerList = parsePlayerList(listResponse);
+      
+      // Get TPS and memory info
+      try {
+        const tpsResponse = await rcon.send('spark tps');
+        tps = parseTPS(tpsResponse);
+      } catch (e) {
+        // spark might not be installed
+      }
+
+      await rcon.disconnect();
+    } catch (rconError) {
+      console.error('RCON error:', rconError.message);
+    }
+
+    res.json({
+      online: true,
+      version: response.version.name,
+      protocol: response.version.protocol,
+      players: {
+        online: response.players.online,
+        max: response.players.max,
+        list: playerList
+      },
+      motd: response.motd.clean,
+      latency: response.roundTripLatency,
+      tps: tps,
+      memory: {
+        used: usedMemory,
+        max: maxMemory
+      }
+    });
+  } catch (error) {
+    console.error('Status error:', error.message);
+    res.json({
+      online: false,
+      error: error.message
+    });
+  }
+});
+
+// Get container status
+app.get('/api/container/status', async (req, res) => {
+  try {
+    const container = docker.getContainer(CONTAINER_NAME);
+    const info = await container.inspect();
+    
+    res.json({
+      running: info.State.Running,
+      status: info.State.Status,
+      startedAt: info.State.StartedAt,
+      health: info.State.Health?.Status || 'unknown'
+    });
+  } catch (error) {
+    console.error('Container status error:', error.message);
+    res.status(500).json({ error: error.message });
+  }
+});
+
+// Start the Minecraft server
+app.post('/api/server/start', async (req, res) => {
+  try {
+    const container = docker.getContainer(CONTAINER_NAME);
+    const info = await container.inspect();
+    
+    if (info.State.Running) {
+      return res.json({ success: false, message: 'Server is already running' });
+    }
+    
+    await container.start();
+    res.json({ success: true, message: 'Server started successfully' });
+  } catch (error) {
+    console.error('Start error:', error.message);
+    res.status(500).json({ success: false, error: error.message });
+  }
+});
+
+// Stop the Minecraft server
+app.post('/api/server/stop', async (req, res) => {
+  try {
+    const container = docker.getContainer(CONTAINER_NAME);
+    const info = await container.inspect();
+    
+    if (!info.State.Running) {
+      return res.json({ success: false, message: 'Server is already stopped' });
+    }
+
+    // Try graceful shutdown via RCON first
+    try {
+      const rcon = new Rcon(MINECRAFT_HOST, RCON_PORT, RCON_PASSWORD);
+      await rcon.connect();
+      await rcon.send('save-all');
+      await rcon.send('stop');
+      await rcon.disconnect();
+    } catch (rconError) {
+      console.error('RCON shutdown error, using docker stop:', rconError.message);
+      await container.stop({ t: 30 }); // 30 second timeout
+    }
+    
+    res.json({ success: true, message: 'Server stopped successfully' });
+  } catch (error) {
+    console.error('Stop error:', error.message);
+    res.status(500).json({ success: false, error: error.message });
+  }
+});
+
+// Helper function to parse player list from RCON
+function parsePlayerList(response) {
+  const match = response.match(/There are \d+ of a max of \d+ players online: (.*)/);
+  if (match && match[1]) {
+    return match[1].split(', ').filter(name => name.length > 0);
+  }
+  return [];
+}
+
+// Helper function to parse TPS (if spark is installed)
+function parseTPS(response) {
+  const match = response.match(/TPS.*?(\d+\.?\d*)/);
+  if (match) {
+    return parseFloat(match[1]);
+  }
+  return null;
+}
+
+app.listen(PORT, '0.0.0.0', () => {
+  console.log(`🚀 Minecraft Dashboard Backend running on port ${PORT}`);
+  console.log(`📡 Monitoring Minecraft server at ${MINECRAFT_HOST}:${MINECRAFT_PORT}`);
+});
+
--- a/docker-compose.dashboard.yml
+++ b/docker-compose.dashboard.yml
@@ -0,0 +1,34 @@
+version: '3.8'
+
+services:
+  mc-dashboard-backend:
+    build: ./backend
+    container_name: mc-dashboard-backend
+    environment:
+      - MINECRAFT_HOST=mc-java
+      - MINECRAFT_PORT=25565
+      - RCON_PORT=25575
+      - RCON_PASSWORD=bethureddy1
+      - CONTAINER_NAME=mc-java
+      - PORT=3001
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    restart: unless-stopped
+    networks:
+      - mcnet
+
+  mc-dashboard-frontend:
+    build: ./frontend
+    container_name: mc-dashboard-frontend
+    ports:
+      - "8080:80"
+    depends_on:
+      - mc-dashboard-backend
+    restart: unless-stopped
+    networks:
+      - mcnet
+
+networks:
+  mcnet:
+    external: true
+
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -0,0 +1,23 @@
+FROM node:20-alpine as builder
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+RUN npm run build
+
+# Production stage
+FROM nginx:1.27-alpine
+
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
+
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/minecraft-icon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+    <title>Minecraft Server Dashboard</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
+
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@@ -0,0 +1,25 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /api {
+        proxy_pass http://mc-dashboard-backend:3001;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+}
+
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "mc-dashboard-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "axios": "^1.6.0",
+    "lucide-react": "^0.294.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "vite": "^5.0.8"
+  }
+}
+
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+
--- a/frontend/public/minecraft-icon.svg
+++ b/frontend/public/minecraft-icon.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect width="100" height="100" fill="#8B4513"/>
+  <rect x="10" y="10" width="30" height="30" fill="#654321"/>
+  <rect x="60" y="10" width="30" height="30" fill="#654321"/>
+  <rect x="10" y="60" width="30" height="30" fill="#654321"/>
+  <rect x="60" y="60" width="30" height="30" fill="#654321"/>
+  <rect x="35" y="35" width="30" height="30" fill="#A0522D"/>
+</svg>
+
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -0,0 +1,2 @@
+/* Additional custom styles if needed */
+
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -0,0 +1,234 @@
+import { useState, useEffect } from 'react'
+import axios from 'axios'
+import { 
+  Play, 
+  Square, 
+  Users, 
+  Activity, 
+  Server, 
+  Clock, 
+  Zap,
+  RefreshCw
+} from 'lucide-react'
+import './App.css'
+
+const API_URL = import.meta.env.VITE_API_URL || '/api'
+
+function App() {
+  const [serverStatus, setServerStatus] = useState(null)
+  const [containerStatus, setContainerStatus] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [actionLoading, setActionLoading] = useState(false)
+  const [lastUpdate, setLastUpdate] = useState(null)
+
+  const fetchStatus = async () => {
+    try {
+      const [serverRes, containerRes] = await Promise.all([
+        axios.get(`${API_URL}/status`),
+        axios.get(`${API_URL}/container/status`)
+      ])
+      setServerStatus(serverRes.data)
+      setContainerStatus(containerRes.data)
+      setLastUpdate(new Date())
+      setLoading(false)
+    } catch (error) {
+      console.error('Error fetching status:', error)
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchStatus()
+    const interval = setInterval(fetchStatus, 5000) // Update every 5 seconds
+    return () => clearInterval(interval)
+  }, [])
+
+  const handleStart = async () => {
+    setActionLoading(true)
+    try {
+      await axios.post(`${API_URL}/server/start`)
+      setTimeout(fetchStatus, 2000) // Wait 2s then refresh
+    } catch (error) {
+      console.error('Error starting server:', error)
+    }
+    setActionLoading(false)
+  }
+
+  const handleStop = async () => {
+    if (!window.confirm('Are you sure you want to stop the server?')) {
+      return
+    }
+    setActionLoading(true)
+    try {
+      await axios.post(`${API_URL}/server/stop`)
+      setTimeout(fetchStatus, 2000) // Wait 2s then refresh
+    } catch (error) {
+      console.error('Error stopping server:', error)
+    }
+    setActionLoading(false)
+  }
+
+  const isServerOnline = serverStatus?.online && containerStatus?.running
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-white text-2xl flex items-center gap-3">
+          <RefreshCw className="animate-spin" size={32} />
+          Loading...
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen p-8">
+      <div className="max-w-6xl mx-auto">
+        {/* Header */}
+        <div className="text-center mb-12">
+          <h1 className="text-5xl font-bold text-white mb-4 drop-shadow-lg">
+            ⛏️ Minecraft Server Dashboard
+          </h1>
+          <p className="text-white/80 text-lg">
+            Monitor and control your Minecraft server
+          </p>
+        </div>
+
+        {/* Status Overview Card */}
+        <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 mb-8 border-4 border-white/20">
+          <div className="flex items-center justify-between mb-6">
+            <div className="flex items-center gap-4">
+              <div className={`w-4 h-4 rounded-full ${isServerOnline ? 'bg-green-400 pulse-glow' : 'bg-red-400'}`}></div>
+              <h2 className="text-3xl font-bold text-white">
+                {isServerOnline ? 'Server Online' : 'Server Offline'}
+              </h2>
+            </div>
+            {lastUpdate && (
+              <div className="text-white/60 text-sm flex items-center gap-2">
+                <Clock size={16} />
+                Updated {lastUpdate.toLocaleTimeString()}
+              </div>
+            )}
+          </div>
+
+          {/* Control Buttons */}
+          <div className="flex gap-4 mb-8">
+            <button
+              onClick={handleStart}
+              disabled={actionLoading || (containerStatus?.running && isServerOnline)}
+              className="minecraft-button flex-1 bg-green-500 hover:bg-green-600 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-bold py-4 px-8 rounded-lg flex items-center justify-center gap-3 text-lg"
+            >
+              <Play size={24} />
+              Start Server
+            </button>
+            <button
+              onClick={handleStop}
+              disabled={actionLoading || !containerStatus?.running}
+              className="minecraft-button flex-1 bg-red-500 hover:bg-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-bold py-4 px-8 rounded-lg flex items-center justify-center gap-3 text-lg"
+            >
+              <Square size={24} />
+              Stop Server
+            </button>
+            <button
+              onClick={fetchStatus}
+              disabled={actionLoading}
+              className="minecraft-button bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 text-white font-bold py-4 px-8 rounded-lg flex items-center justify-center"
+            >
+              <RefreshCw size={24} className={actionLoading ? 'animate-spin' : ''} />
+            </button>
+          </div>
+
+          {/* Stats Grid */}
+          {isServerOnline && (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              {/* Players Online */}
+              <div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-6 text-white">
+                <div className="flex items-center gap-3 mb-2">
+                  <Users size={24} />
+                  <h3 className="font-semibold text-lg">Players</h3>
+                </div>
+                <p className="text-4xl font-bold">
+                  {serverStatus.players.online} / {serverStatus.players.max}
+                </p>
+              </div>
+
+              {/* Server Version */}
+              <div className="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-6 text-white">
+                <div className="flex items-center gap-3 mb-2">
+                  <Server size={24} />
+                  <h3 className="font-semibold text-lg">Version</h3>
+                </div>
+                <p className="text-2xl font-bold truncate">
+                  {serverStatus.version}
+                </p>
+              </div>
+
+              {/* Latency */}
+              <div className="bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-6 text-white">
+                <div className="flex items-center gap-3 mb-2">
+                  <Activity size={24} />
+                  <h3 className="font-semibold text-lg">Latency</h3>
+                </div>
+                <p className="text-4xl font-bold">
+                  {serverStatus.latency}ms
+                </p>
+              </div>
+
+              {/* TPS */}
+              <div className="bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-xl p-6 text-white">
+                <div className="flex items-center gap-3 mb-2">
+                  <Zap size={24} />
+                  <h3 className="font-semibold text-lg">TPS</h3>
+                </div>
+                <p className="text-4xl font-bold">
+                  {serverStatus.tps || '20.0'}
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Player List */}
+        {isServerOnline && serverStatus.players.online > 0 && (
+          <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 border-4 border-white/20">
+            <h2 className="text-2xl font-bold text-white mb-4 flex items-center gap-3">
+              <Users size={28} />
+              Online Players
+            </h2>
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+              {serverStatus.players.list.map((player, index) => (
+                <div
+                  key={index}
+                  className="bg-white/20 rounded-lg p-4 text-white font-semibold flex items-center gap-2"
+                >
+                  <div className="w-8 h-8 bg-gradient-to-br from-green-400 to-blue-500 rounded-md flex items-center justify-center text-xs">
+                    {player[0].toUpperCase()}
+                  </div>
+                  {player}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* MOTD */}
+        {isServerOnline && serverStatus.motd && (
+          <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 mt-8 border-4 border-white/20">
+            <h2 className="text-2xl font-bold text-white mb-4">Message of the Day</h2>
+            <p className="text-white/90 text-lg font-mono">
+              {serverStatus.motd}
+            </p>
+          </div>
+        )}
+
+        {/* Footer */}
+        <div className="text-center mt-12 text-white/60">
+          <p>Made with ❤️ for Minecraft</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default App
+
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,56 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+}
+
+.pixel-border {
+  box-shadow: 
+    0 -4px 0 0 rgba(0,0,0,0.3),
+    0 4px 0 0 rgba(255,255,255,0.3),
+    -4px 0 0 0 rgba(0,0,0,0.3),
+    4px 0 0 0 rgba(255,255,255,0.3);
+}
+
+.minecraft-button {
+  position: relative;
+  transition: all 0.1s;
+  box-shadow: 
+    0 4px 0 0 rgba(0,0,0,0.3);
+}
+
+.minecraft-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 
+    0 6px 0 0 rgba(0,0,0,0.3);
+}
+
+.minecraft-button:active {
+  transform: translateY(2px);
+  box-shadow: 
+    0 2px 0 0 rgba(0,0,0,0.3);
+}
+
+.pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba(93, 205, 227, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 40px rgba(93, 205, 227, 0.8);
+  }
+}
+
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
+
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,27 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        minecraft: {
+          grass: '#7cbd56',
+          dirt: '#8b5a2b',
+          stone: '#7a7a7a',
+          diamond: '#5dcde3',
+          emerald: '#50c878',
+          gold: '#fcba03',
+          redstone: '#dc143c',
+        }
+      },
+      fontFamily: {
+        minecraft: ['"Press Start 2P"', 'cursive'],
+      },
+    },
+  },
+  plugins: [],
+}
+
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: '0.0.0.0',
+    port: 3000,
+    proxy: {
+      '/api': {
+        target: process.env.VITE_API_URL || 'http://localhost:3001',
+        changeOrigin: true
+      }
+    }
+  }
+})
+
--- a/package.json
+++ b/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "minecraft-dashboard",
+  "version": "1.0.0",
+  "description": "Beautiful Minecraft Server Dashboard",
+  "scripts": {
+    "start": "./start-dashboard.sh",
+    "stop": "./stop-dashboard.sh",
+    "logs": "docker-compose -f docker-compose.dashboard.yml logs -f",
+    "rebuild": "docker-compose -f docker-compose.dashboard.yml up -d --build"
+  },
+  "keywords": ["minecraft", "dashboard", "docker", "react", "nodejs"],
+  "author": "",
+  "license": "MIT"
+}
+
--- a/public/minecraft-icon.svg
+++ b/public/minecraft-icon.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect width="100" height="100" fill="#8B4513"/>
+  <rect x="10" y="10" width="30" height="30" fill="#654321"/>
+  <rect x="60" y="10" width="30" height="30" fill="#654321"/>
+  <rect x="10" y="60" width="30" height="30" fill="#654321"/>
+  <rect x="60" y="60" width="30" height="30" fill="#654321"/>
+  <rect x="35" y="35" width="30" height="30" fill="#A0522D"/>
+</svg>
+
--- a/start-dashboard.sh
+++ b/start-dashboard.sh
@@ -0,0 +1,23 @@
+#!/bin/bash
+
+# Colors for output
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+echo -e "${BLUE}🎮 Starting Minecraft Dashboard...${NC}"
+
+# Check if mcnet network exists
+if ! docker network ls | grep -q mcnet; then
+    echo -e "${BLUE}Creating mcnet network...${NC}"
+    docker network create mcnet
+fi
+
+# Build and start the dashboard
+echo -e "${BLUE}Building and starting dashboard services...${NC}"
+docker-compose -f docker-compose.dashboard.yml up -d --build
+
+echo -e "${GREEN}✅ Dashboard is starting!${NC}"
+echo -e "${GREEN}📊 Access the dashboard at: http://localhost:8080${NC}"
+echo -e "${BLUE}📝 View logs: docker-compose -f docker-compose.dashboard.yml logs -f${NC}"
+
--- a/stop-dashboard.sh
+++ b/stop-dashboard.sh
@@ -0,0 +1,13 @@
+#!/bin/bash
+
+# Colors for output
+RED='\033[0;31m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+echo -e "${BLUE}🛑 Stopping Minecraft Dashboard...${NC}"
+
+docker-compose -f docker-compose.dashboard.yml down
+
+echo -e "${RED}✅ Dashboard stopped!${NC}"
+