tschunkorder/frontend

TschunkOrder Frontend

Das Frontend für die TschunkOrder-Anwendung - eine Vue.js-basierte Webanwendung zur Verwaltung von Getränkebestellungen.

📋 Übersicht

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:

• Bestellungen anzeigen: Übersicht über alle bestehenden Bestellungen
• Neue Bestellungen erstellen: Formular zum Erstellen neuer Getränkebestellungen
• Bestellungen verwalten: Bearbeiten und Löschen von Bestellungen

🛠️ Technologie-Stack

• 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

📦 Installation

Voraussetzungen

• Node.js (Version 18 oder höher)
• npm (wird mit Node.js installiert)

Projekt einrichten

1. Repository klonen (falls noch nicht geschehen):

   git clone <repository-url>
   cd tschunkorder/frontend
   

2. Abhängigkeiten installieren:

   npm install
   

🚀 Entwicklung

Development Server starten

npm run dev

Der Development Server startet standardmäßig auf http://localhost:5173. Die Anwendung unterstützt Hot-Reload, sodass Änderungen automatisch im Browser aktualisiert werden.

Code-Qualität

Linting ausführen:

npm run lint

TypeScript-Typen prüfen:

npm run type-check

🏗️ Build und Deployment

Produktions-Build erstellen

npm run build

Der Build-Prozess erstellt optimierte Dateien im dist/-Verzeichnis.

Build-Vorschau

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:

   npm run type-check
   

3. Linting-Fehler:

   npm run lint
   

📚 Nützliche Links

• Vue 3 Dokumentation
• Vite Dokumentation
• Vue Router Dokumentation
• Pinia Dokumentation
• TypeScript Dokumentation

🤝 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.