Draw it

Draw itは、フロントエンドにFlutter、バックエンド同期にNode.js + ExpressとWebSocketを使用して開発された、リアルタイム共同作業キャンバスアプリケーションです。このアプリでは、複数のユーザーが共有ボードに同時に描画することができ、クロスプラットフォームUI開発とリアルタイムネットワーク通信の両方の専門知識を発揮します。

🚀 主な目標：
高性能なイベント駆動型アーキテクチャを使用して、共有描画ボード上でシームレスでリアルタイムな共同作業を実現する。

🧱 技術スタック:

Flutter (Dart): ジェスチャー処理とカスタムレンダリングを備えたクロスプラットフォームのモバイルフロントエンド

Node.js + Express.js: WebSocket をサポートし、永続的な双方向通信を実現するバックエンドサーバー

WebSocket (ws): ユーザー間でのストロークのリアルタイム同期

CustomPainter: キャンバスへのフレーム単位の効率的な描画

Permission Handler & RepaintBoundary: 描画をデバイスに画像として保存

🖌️ コア機能:

✍️ 共有リアルタイム描画: WebSocket ブロードキャストにより、参加者全員が互いのストロークを即座に確認できます。

📡 ステートレス WebSocket サーバー: 軽量な Node.js サーバーがアクティブなソケット接続を維持し、低レイテンシでストロークイベントを中継します。

🎨 Canvas Engine: タッチジェスチャーは描画可能なベクターパスに変換され、Flutter の CustomPainter を使用してレンダリングされます。

📁 キャンバスのエクスポート：ユーザーはアートワークを画像として保存できます。

🔧 モジュラーアーキテクチャ：描画ロジック、サーバーイベント、プラットフォーム統合のための独立したレイヤー。