Draw it

Draw it is een realtime collaboratieve canvasapplicatie, ontwikkeld met Flutter voor de frontend en Node.js + Express met WebSocket voor backend-synchronisatie. De app stelt meerdere gebruikers in staat om tegelijkertijd op een gedeeld bord te tekenen, wat getuigt van expertise in zowel cross-platform UI-ontwikkeling als realtime netwerkcommunicatie.

🚀 Belangrijkste doel:

Naadloze, realtime samenwerking mogelijk maken op een gedeeld tekenbord met behulp van een performante, event-driven architectuur.

🧱 Tech Stack:

Flutter (Dart): Cross-platform mobiele frontend met gebarenverwerking en aangepaste rendering

Node.js + Express.js: Backend-server met WebSocket-ondersteuning voor permanente bidirectionele communicatie

WebSocket (ws): Voor realtime synchronisatie van penseelstreken tussen gebruikers

CustomPainter: Efficiënt frame-voor-frame tekenen op canvas

Permission Handler & RepaintBoundary: Sla tekeningen op als afbeeldingen op het apparaat

🖌️ Kernfuncties:

✍️ Gedeelde realtime tekeningen: Alle deelnemers zien elkaars penseelstreken direct via WebSocket-broadcast.

📡 Stateless WebSocket-server: Lichtgewicht Node.js-server onderhoudt actieve socketverbindingen en stuurt penseelstreekgebeurtenissen door met lage latentie.

🎨 Canvas Engine: Aanraakgebaren worden omgezet in tekenbare vectorpaden en gerenderd met Flutter's CustomPainter.

📁 Canvas exporteren: Gebruikers kunnen hun kunstwerk als afbeelding opslaan.

🔧 Modulaire architectuur: Afzonderlijke lagen voor tekenlogica, servergebeurtenissen en platformintegratie.