From b78be9ab7e2998337d667bce9f85f3dec0855a30 Mon Sep 17 00:00:00 2001
From: Jan Felix Wiebe <git@jfwie.be>
Date: Thu, 10 Jul 2025 22:31:05 +0200
Subject: [PATCH] added readme for frontend

---
 frontend/README.md | 169 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 150 insertions(+), 19 deletions(-)

diff --git a/frontend/README.md b/frontend/README.md
index 02b06e3..9ed8607 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,39 +1,170 @@
-# frontend
+# TschunkOrder Frontend
 
-This template should help get you started developing with Vue 3 in Vite.
+Das Frontend für die TschunkOrder-Anwendung - eine Vue.js-basierte Webanwendung zur Verwaltung von Getränkebestellungen.
 
-## Recommended IDE Setup
+## 📋 Übersicht
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+Das Frontend ist eine moderne Single-Page-Application (SPA), die mit Vue 3, TypeScript und Vite entwickelt wurde. Es bietet eine benutzerfreundliche Oberfläche für:
 
-## Type Support for `.vue` Imports in TS
+- **Bestellungen anzeigen**: Übersicht über alle bestehenden Bestellungen
+- **Neue Bestellungen erstellen**: Formular zum Erstellen neuer Getränkebestellungen
+- **Bestellungen verwalten**: Bearbeiten und Löschen von Bestellungen
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+## 🛠️ Technologie-Stack
 
-## Customize configuration
+- **Vue 3** - Progressive JavaScript Framework
+- **TypeScript** - Typsichere JavaScript-Entwicklung
+- **Vite** - Schneller Build-Tool und Development Server
+- **Vue Router** - Client-seitiges Routing
+- **Pinia** - State Management für Vue
+- **ESLint** - Code-Qualität und Konsistenz
 
-See [Vite Configuration Reference](https://vite.dev/config/).
+## 📦 Installation
 
-## Project Setup
+### Voraussetzungen
 
-```sh
-npm install
-```
+- Node.js (Version 18 oder höher)
+- npm (wird mit Node.js installiert)
 
-### Compile and Hot-Reload for Development
+### Projekt einrichten
 
-```sh
+1. **Repository klonen** (falls noch nicht geschehen):
+   ```bash
+   git clone <repository-url>
+   cd tschunkorder/frontend
+   ```
+
+2. **Abhängigkeiten installieren**:
+   ```bash
+   npm install
+   ```
+
+## 🚀 Entwicklung
+
+### Development Server starten
+
+```bash
 npm run dev
 ```
 
-### Type-Check, Compile and Minify for Production
+Der Development Server startet standardmäßig auf `http://localhost:5173`. Die Anwendung unterstützt Hot-Reload, sodass Änderungen automatisch im Browser aktualisiert werden.
 
-```sh
+### Code-Qualität
+
+**Linting ausführen**:
+```bash
+npm run lint
+```
+
+**TypeScript-Typen prüfen**:
+```bash
+npm run type-check
+```
+
+## 🏗️ Build und Deployment
+
+### Produktions-Build erstellen
+
+```bash
 npm run build
 ```
 
-### Lint with [ESLint](https://eslint.org/)
+Der Build-Prozess erstellt optimierte Dateien im `dist/`-Verzeichnis.
 
-```sh
-npm run lint
+### Build-Vorschau
+
+```bash
+npm run preview
 ```
+
+Zeigt eine lokale Vorschau des Produktions-Builds an.
+
+## 📁 Projektstruktur
+
+```
+frontend/
+├── src/
+│   ├── assets/          # Statische Assets (Bilder, Styles, etc.)
+│   ├── components/      # Wiederverwendbare Vue-Komponenten
+│   │   ├── icons/       # Icon-Komponenten
+│   │   ├── OrderCard.vue
+│   │   └── NewDrinkCard.vue
+│   ├── router/          # Vue Router Konfiguration
+│   ├── stores/          # Pinia State Management
+│   ├── types/           # TypeScript Typdefinitionen
+│   ├── views/           # Seiten-Komponenten
+│   │   ├── CreateOrderView.vue
+│   │   └── OrdersView.vue
+│   ├── App.vue          # Haupt-App-Komponente
+│   └── main.ts          # Anwendungs-Einstiegspunkt
+├── public/              # Öffentliche statische Dateien
+├── package.json         # Projekt-Abhängigkeiten und Scripts
+├── vite.config.ts       # Vite-Konfiguration
+├── tsconfig.json        # TypeScript-Konfiguration
+└── eslint.config.ts     # ESLint-Konfiguration
+```
+
+## 🎨 Komponenten
+
+### Views (Seiten)
+
+- **OrdersView.vue**: Zeigt eine Übersicht aller Bestellungen an
+- **CreateOrderView.vue**: Formular zum Erstellen neuer Bestellungen
+
+### Komponenten
+
+- **OrderCard.vue**: Karten-Komponente zur Darstellung einzelner Bestellungen
+- **NewDrinkCard.vue**: Komponente zum Hinzufügen neuer Getränke zur Bestellung
+
+## 🔧 Konfiguration
+
+### Vite-Konfiguration
+
+Die Vite-Konfiguration befindet sich in `vite.config.ts` und enthält:
+- Vue-Plugin-Konfiguration
+- Development-Tools-Integration
+- Build-Optimierungen
+
+### TypeScript-Konfiguration
+
+- `tsconfig.json`: Hauptkonfiguration
+- `tsconfig.app.json`: App-spezifische Einstellungen
+- `tsconfig.node.json`: Node.js-Umgebung
+
+## 🐛 Troubleshooting
+
+### Häufige Probleme
+
+1. **Port bereits belegt**:
+   - Vite versucht automatisch den nächsten verfügbaren Port
+   - Oder manuell in `vite.config.ts` ändern
+
+2. **TypeScript-Fehler**:
+   ```bash
+   npm run type-check
+   ```
+
+3. **Linting-Fehler**:
+   ```bash
+   npm run lint
+   ```
+
+## 📚 Nützliche Links
+
+- [Vue 3 Dokumentation](https://vuejs.org/)
+- [Vite Dokumentation](https://vitejs.dev/)
+- [Vue Router Dokumentation](https://router.vuejs.org/)
+- [Pinia Dokumentation](https://pinia.vuejs.org/)
+- [TypeScript Dokumentation](https://www.typescriptlang.org/)
+
+## 🤝 Beitragen
+
+1. Fork des Repositories erstellen
+2. Feature-Branch erstellen (`git checkout -b feature/AmazingFeature`)
+3. Änderungen committen (`git commit -m 'Add some AmazingFeature'`)
+4. Branch pushen (`git push origin feature/AmazingFeature`)
+5. Pull Request erstellen
+
+## 📄 Lizenz
+
+Dieses Projekt ist Teil der TschunkOrder-Anwendung.