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.