# Drawing App - Multi-User Canvas Collaboration Eine moderne, vollständig funktionale Multi-User Canvas-Zeichenanwendung mit Echtzeit-Kollaboration, entwickelt mit Rust (Backend) und TypeScript (Frontend).  ## 🚀 Quick Start ### Voraussetzungen - [Rust](https://rustup.rs/) (1.70+) - [Node.js](https://nodejs.org/) (18+) - Git ### Installation & Start ```bash # Repository klonen git clone cd a5 # Dependencies installieren npm install # Development Server starten (Backend + Frontend) npm run dev ``` Die Anwendung ist dann verfügbar unter: http://localhost:3000 ### Production Build ```bash # Production Build npm run build cargo build --release # Production Server starten npm start ``` ## ✨ Features ### 🎨 **Multi-User Canvas Collaboration** - **Echtzeit-Zeichnen**: Simultanes Zeichnen mehrerer Benutzer auf geteilten Canvas - **Drawing Tools**: Line, Circle, Rectangle, Triangle mit konfigurierbaren Eigenschaften - **Live Cursors**: Sichtbarkeit der Cursor-Positionen anderer Benutzer - **Konfliktfreie Kollaboration**: Event-basierte Synchronisation ### 🔐 **Benutzer- & Berechtigungsmanagement** - **JWT-Authentifizierung**: Sichere HTTP-Only Cookie-basierte Authentifizierung - **Granulare Berechtigungen**: 5-stufiges Permission-System (Owner/Moderate/Validate/Write/Read) - **Canvas-Management**: Erstellen, Teilen und Verwalten von Canvas - **User-Suche**: Erweiterte Benutzersuche für Permission-Management ### 🏗️ **Moderne Architektur** - **Backend**: Rust mit Axum Framework, SQLite-Persistierung, WebSocket-Support - **Frontend**: TypeScript Single Page Application mit Canvas Engine - **Real-time**: WebSocket-basierte Event-Synchronisation - **Testing**: Umfassende Test-Suite (20+ Tests) für Backend und Frontend ### 🌍 **Production-Ready** - **Docker Support**: Containerized Deployment mit Multi-Stage Build - **Security**: bcrypt Password-Hashing, SQL Injection Prevention, Input Validation - **Performance**: Async I/O, Connection Pooling, Hash-basierte Asset-Caching - **Monitoring**: WebSocket-Statistiken, Structured Logging ## 🎯 **Architekturelle Highlights** ### Erweiterte Features über Anforderungen hinaus: - **SQLite-Persistierung**: Dauerhafte Datenspeicherung statt In-Memory Storage - **German Color Support**: Mehrsprachige Farbbezeichnungen (rot, grün, blau, etc.) - **Initial User System**: Automatische Admin-Benutzer-Erstellung aus JSON-Konfiguration - **Hash-basierte Cache-Busting**: Optimierte Browser-Caching-Strategien - **User Color Assignment**: Automatische eindeutige Benutzerfarben - **Advanced Permission APIs**: Umfassende REST-APIs für Canvas- und Permission-Management ### Technische Abweichungen (begründet): - **TypeScript Canvas Engine**: Type-Safety für komplexe Canvas-Operationen - **Erweiterte REST APIs**: Professionelle Web-Anwendungs-Standards - **Docker Deployment**: Skalierbare Production-Architektur ## 📚 **Dokumentation** Vollständige Architektur- und Implementierungsdokumentation: - **[Architektur-Übersicht](docs/README.md)** - Umfassende System-Architektur - **[Backend-Dokumentation](docs/backend/README.md)** - Rust Backend-Details - **[Frontend-Dokumentation](docs/frontend/README.md)** - TypeScript Frontend-Architektur - **[Testing-Dokumentation](TEST_README.md)** - Test-Suite und -Ausführung - **[PDF-Generierung](docs/pdf-generation.md)** - Dokumentation als PDF exportieren ### PDF-Dokumentation erstellen ```bash # Vollständige Architektur-Dokumentation als PDF cd docs .\generate-pdf.bat # Windows ./generate-pdf.sh # Linux/macOS ``` ## 🔧 **Development** ### Development Server ```bash # Backend + Frontend mit Hot Reload npm run dev # Nur Frontend Watch Mode npm run dev-frontend # Nur Backend Watch Mode npm run dev-backend ``` ### Testing ```bash # Alle Tests ausführen cargo test # Spezifische Test-Module cargo test backend_unit_tests cargo test backend_integration_tests # Mit detaillierter Ausgabe cargo test -- --nocapture ``` ### Build Commands ```bash # Frontend Build (TypeScript -> JavaScript) npm run build # Backend Build cargo build # Release Build (optimiert) cargo build --release ``` ## 🐳 **Docker Deployment** ```bash # Container erstellen docker build -t drawing-app . # Container starten mit Volume-Mapping für Datenpersistierung docker run -p 3000:3000 -v $(pwd)/data:/app/data drawing-app ``` ### Docker Compose ```yaml version: '3.8' services: drawing-app: build: . ports: - "3000:3000" volumes: - ./data:/app/data environment: - RUST_LOG=info ``` ## 📁 **Projektstruktur** ``` a5/ ├── src/ │ ├── backend/ # Rust Backend Code │ └── drawer/ # TypeScript Canvas Engine ├── client/ # Frontend Assets & Templates ├── tests/ # Backend & Frontend Tests ├── data/ # SQLite Database & Initial Data ├── docs/ # Vollständige Architektur-Dokumentation ├── dest/ # Built Frontend Assets ├── Dockerfile # Container Definition ├── Cargo.toml # Rust Dependencies ├── package.json # Node.js Dependencies └── tsconfig.json # TypeScript Configuration ``` ## 🔒 **Security Features** - **JWT Security**: HMAC-SHA256 signed tokens mit sicheren Cookie-Attributen - **Password Security**: bcrypt-Hashing mit Salt-Rounds - **SQL Injection Prevention**: SQLx Prepared Statements - **Input Validation**: Strukturierte Request/Response-Validation - **Permission Checks**: Server-side Authorization für alle Operationen ## 🎓 **Universitätskontext** Diese Implementierung wurde für **Softwaresysteme Blatt 5** entwickelt und erfüllt alle Anforderungen vollständig: ✅ **JWT-Authentifizierung mit HTTP-Only Cookies** ✅ **UserIDs und Anzeigenamen** ✅ **Canvas-Permissions im JWT** ✅ **5-stufiges Permission-System (R/W/V/M/O)** ✅ **Multi-User WebSocket System** ✅ **Umfassende Architektur-Dokumentation** Die Lösung geht mit professioneller Web-Architektur, persistenter Datenspeicherung und erweiterten Features deutlich über die Mindestanforderungen hinaus. ## 📄 **Lizenz** Dieses Projekt wurde für universitäre Zwecke entwickelt. --- **Entwickelt mit ❤️ für Softwaresysteme - Universität** Für detaillierte technische Informationen siehe die [vollständige Architektur-Dokumentation](docs/README.md).# esp32_manager_server