A Draw it egy valós idejű kollaboratív vászonalkalmazás, amelyet a Flutter használatával fejlesztettek ki a frontendhez és a Node.js + Expresst a WebSockettel a háttérszinkronizáláshoz. Az alkalmazás lehetővé teszi, hogy több felhasználó egyszerre rajzoljon egy megosztott táblán, bizonyítva a platformok közötti felhasználói felület fejlesztésében és a valós idejű hálózati kommunikációban szerzett szakértelmet.
🚀 Fő cél:
Zökkenőmentes, valós idejű együttműködést tesz lehetővé egy megosztott rajztáblán egy hatékony, eseményvezérelt architektúra segítségével.
🧱 Tech Stack:
Flutter (Dart): Többplatformos mobil frontend gesztuskezeléssel és egyedi megjelenítéssel
Node.js + Express.js: Háttérkiszolgáló WebSocket támogatással a tartós kétirányú kommunikáció érdekében
WebSocket (ws): A vonások valós idejű szinkronizálásához a felhasználók között
CustomPainter: Hatékony képkockánkénti rajzolás vászonra
Engedélykezelő és ReaintBoundary: Mentse el a rajzokat képként az eszközön
🖌️ Alapvető jellemzők:
✍️ Megosztott valós idejű rajz: A WebSocket közvetítés segítségével minden résztvevő azonnal látja egymás vonásait.
📡 Állapot nélküli WebSocket-kiszolgáló: A könnyű Node.js-kiszolgáló aktív socket-kapcsolatokat tart fenn, és alacsony késleltetéssel közvetíti a löketeseményeket.
🎨 Canvas Engine: Az érintési gesztusokat a rendszer rajzolható vektorpályákká alakítja, és a Flutter CustomPainter segítségével jeleníti meg.
📁 Vászon exportálása: A felhasználók képként menthetik alkotásaikat
🔧 Moduláris architektúra: Külön rétegek a logika rajzolásához, a szervereseményekhez és a platformintegrációhoz.