Draw it

Draw it ist eine kollaborative Canvas-Anwendung für Echtzeit-Arbeit, die mit Flutter für das Frontend und Node.js + Express mit WebSocket für die Backend-Synchronisierung entwickelt wurde. Die App ermöglicht mehreren Nutzern gleichzeitiges Zeichnen auf einem gemeinsamen Zeichenbrett und beweist damit Expertise in plattformübergreifender UI-Entwicklung und Echtzeit-Netzwerkkommunikation.

🚀 Hauptziel:

Nahtlose Zusammenarbeit in Echtzeit auf einem gemeinsamen Zeichenbrett durch eine leistungsstarke, ereignisgesteuerte Architektur.

🧱 Tech Stack:

Flutter (Dart): Plattformübergreifendes mobiles Frontend mit Gestensteuerung und benutzerdefiniertem Rendering

Node.js + Express.js: Backend-Server mit WebSocket-Unterstützung für dauerhafte bidirektionale Kommunikation

WebSocket (ws): Für die Echtzeitsynchronisierung von Strichen zwischen Benutzern

CustomPainter: Effizientes Frame-für-Frame-Zeichnen auf der Leinwand

Berechtigungshandler & RepaintBoundary: Zeichnungen als Bilder auf dem Gerät speichern

🖌️ Kernfunktionen:

✍️ Gemeinsames Zeichnen in Echtzeit: Alle Teilnehmer sehen die Striche der anderen sofort per WebSocket-Übertragung.

📡 Zustandsloser WebSocket-Server: Der schlanke Node.js-Server hält aktive Socket-Verbindungen aufrecht und leitet Strichereignisse mit geringer Latenz weiter.

🎨 Leinwand-Engine: Touch-Gesten werden in zeichnbare Vektorpfade umgewandelt und mit Flutters CustomPainter gerendert.

📁 Canvas exportieren: Nutzer können ihre Grafiken als Bild speichern.

🔧 Modulare Architektur: Separate Ebenen für Zeichenlogik, Serverereignisse und Plattformintegration.