unraid-monitor/PROJECT_LAYOUT.md

Unraid Monitor - Projekt-Layout

Komplette Verzeichnisstruktur

unraid-monitor/
│
├── docker-compose.yml          # Docker Compose Konfiguration
├── .gitignore                  # Git Ignore Rules
├── README.md                   # Hauptdokumentation
├── SETUP.md                    # Setup-Anleitung für Unraid
│
├── backend/                    # Backend (Node.js + TypeScript)
│   ├── src/
│   │   ├── controllers/       # API Controller
│   │   │   ├── authController.ts      # Login, Register, Me
│   │   │   ├── systemController.ts    # System Stats, Uptime
│   │   │   └── dockerController.ts    # Container Management
│   │   │
│   │   ├── services/          # Business Logic
│   │   │   ├── systemService.ts       # System Info (CPU, RAM, Disk)
│   │   │   └── dockerService.ts       # Docker API Integration
│   │   │
│   │   ├── middleware/        # Express Middleware
│   │   │   └── auth.ts               # JWT Authentication
│   │   │
│   │   ├── types/            # TypeScript Typen
│   │   │   └── index.ts              # Interfaces (User, SystemStats, etc.)
│   │   │
│   │   └── index.ts          # Express Server Entry Point
│   │
│   ├── package.json           # NPM Dependencies
│   ├── tsconfig.json          # TypeScript Config
│   ├── Dockerfile             # Docker Build
│   ├── .env.example           # Environment Variables Beispiel
│   └── .env                   # Environment Variables (erstellen!)
│
└── frontend/                  # Frontend (React + TypeScript + PWA)
    ├── public/               # Static Assets
    │   ├── favicon.ico       # (optional - eigenes Icon)
    │   ├── icon-192.png      # (optional - PWA Icon 192x192)
    │   ├── icon-512.png      # (optional - PWA Icon 512x512)
    │   └── apple-touch-icon.png  # (optional - iOS Icon)
    │
    ├── src/
    │   ├── components/       # React Components
    │   │   ├── Login.tsx            # Login-Seite
    │   │   ├── Layout.tsx           # Layout mit Navigation
    │   │   ├── Dashboard.tsx        # Dashboard mit System Stats
    │   │   └── Containers.tsx       # Container-Verwaltung
    │   │
    │   ├── stores/          # Zustand State Management
    │   │   └── authStore.ts         # Authentication State
    │   │
    │   ├── lib/            # Utilities & API
    │   │   ├── api.ts              # Axios API Client + Types
    │   │   └── utils.ts            # Helper Functions (formatBytes, etc.)
    │   │
    │   ├── App.tsx          # Main App mit Routing
    │   ├── main.tsx         # React Entry Point
    │   ├── index.css        # Tailwind CSS + Custom Styles
    │   └── vite-env.d.ts    # Vite Types
    │
    ├── index.html           # HTML Entry
    ├── package.json         # NPM Dependencies
    ├── tsconfig.json        # TypeScript Config
    ├── tsconfig.node.json   # TypeScript Config für Node
    ├── vite.config.ts       # Vite + PWA Config
    ├── tailwind.config.js   # Tailwind CSS Config
    ├── postcss.config.js    # PostCSS Config
    ├── Dockerfile           # Docker Build
    ├── .env.example         # Environment Variables Beispiel
    └── .env                 # Environment Variables (optional)

Datei-Checkliste

Root-Level (unraid-monitor/)

• docker-compose.yml
• .gitignore
• README.md
• SETUP.md

Backend (backend/)

• package.json
• tsconfig.json
• Dockerfile
• .env.example
• .env (manuell erstellen!)

Backend Source (backend/src/)

• index.ts

Controllers (backend/src/controllers/)

• authController.ts
• systemController.ts
• dockerController.ts

Services (backend/src/services/)

• systemService.ts
• dockerService.ts

Middleware (backend/src/middleware/)

• auth.ts

Types (backend/src/types/)

• index.ts

Frontend (frontend/)

• package.json
• tsconfig.json
• tsconfig.node.json
• vite.config.ts
• tailwind.config.js
• postcss.config.js
• Dockerfile
• index.html
• .env.example
• .env (optional)

Frontend Source (frontend/src/)

• main.tsx
• App.tsx
• index.css
• vite-env.d.ts

Components (frontend/src/components/)

• Login.tsx
• Layout.tsx
• Dashboard.tsx
• Containers.tsx

Stores (frontend/src/stores/)

• authStore.ts

Lib (frontend/src/lib/)

• api.ts
• utils.ts

Frontend Public (frontend/public/)

• favicon.ico (optional)
• icon-192.png (optional)
• icon-512.png (optional)
• apple-touch-icon.png (optional)

Wichtige Ordner erstellen

Wenn du die Dateien manuell erstellst, musst du die Ordner vorher anlegen:

# Root
mkdir -p unraid-monitor

# Backend
mkdir -p unraid-monitor/backend/src/{controllers,services,middleware,types}

# Frontend
mkdir -p unraid-monitor/frontend/src/{components,stores,lib}
mkdir -p unraid-monitor/frontend/public

Dateigrößen (ungefähr)

Backend:

• Gesamt: ~50 Dateien nach npm install
• Source Code: 8 TypeScript-Dateien
• node_modules/: ~200MB

Frontend:

• Gesamt: ~2000 Dateien nach npm install
• Source Code: 12 TypeScript/TSX-Dateien
• node_modules/: ~400MB

Installation der Dependencies

Backend:

cd backend
npm install

Installiert:

• express, cors, helmet
• jsonwebtoken, bcryptjs
• dockerode, systeminformation
• dotenv, express-rate-limit
• TypeScript + Dev Tools

Frontend:

cd frontend
npm install

Installiert:

• react, react-dom, react-router-dom
• @tanstack/react-query, axios, zustand
• lucide-react, recharts
• vite, vite-plugin-pwa
• tailwindcss, postcss, autoprefixer
• TypeScript + Dev Tools

Nach dem Setup

Nach npm install in beiden Ordnern:

backend/
├── node_modules/     # ~200MB
├── dist/            # Nach Build: Compiled JS
└── ...

frontend/
├── node_modules/     # ~400MB
├── dist/            # Nach Build: Production Files
└── ...

Docker Images

Nach docker-compose build:

• unraid-monitor-backend: ~200MB
• unraid-monitor-frontend: ~50MB (Nginx + Build)

---

Tipp: Nutze das bereitgestellte Projekt-Archiv, dann sind alle Dateien bereits an der richtigen Stelle! 🎯