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:

```bash
# 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:**
```bash
cd backend
npm install
```

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

**Frontend:**
```bash
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! 🎯