אפליקציית Full-Stack
SynchBoard logo

SynchBoard

לוח ציור שיתופי שמאפשר לכמה אנשים לצייר יחד בזמן אמת מכל מקום

למערכת הציבורית
SynchBoard - Desktop
SynchBoard - Mobile

האתגר

רציתי לבנות לוח ציור שבו כמה אנשים יכולים לעבוד יחד על אותו לוח, כמו Google Docs אבל לציור. האתגר היה לחבר בין ממשק הציור, תקשורת בזמן אמת ושמירת נתונים, לצד כניסה מאובטחת וניהול לוחות.

הפתרון

בניתי מערכת עם ממשק ציור, ערוץ WebSocket לעדכונים בין המשתתפים ושכבת אחסון ללוחות. סביבת ההפעלה כוללת כניסה דרך Google, Nginx, Spring Boot ו-PostgreSQL.

ארגז הכלים

יותר מ-15 כלי ציור מקצועיים מחולקים לקטגוריות — עם אפשרות לבטל ולחזור על כל פעולה ולייצא את הציור

ציור

מברשת
מחק
עט

צורות

מלבן
עיגול
משולש
כוכב
חץ
קו

כלים

טקסט
בורר צבעים
ביטול
שחזור
הורדה

יכולות מרכזיות

עבודה יחד בזמן אמת

קווים, צורות וטקסט נשלחים בין המשתתפים דרך ערוץ תקשורת בזמן אמת

כלי ציור מקצועיים

מברשת חופשית, מחק, שישה סוגי צורות, חצים, תיבות טקסט, בורר צבעים, וביטול/שחזור מלא — הכל זמין בלחיצה

כניסה מאובטחת

אפשר להיכנס בקלות עם חשבון Google, או להירשם עם אימייל — עם אימות חשבון ואפשרות לאפס סיסמה

ניהול לוחות

יוצרים לוח חדש, מזמינים אנשים לשתף פעולה דרך אימייל, ומגדירים מי יכול לערוך ומי רק לצפות

מערכת סנכרון בזמן אמת

פעולות ציור נשלחות בין המשתתפים דרך WebSocket, עם מנגנוני תור וחיבור מחדש כחלק מהארכיטקטורה

React Client
ממשק ציור + ניהול מצב
WebSocket
ערוץ תקשורת בזמן אמת
ActiveMQ Artemis
תור הודעות + שמירה אופליין
Spring Boot
שרת API + אימות משתמשים
PostgreSQL
אחסון קבוע
תור הודעותחיבור מחדשWebSocket

מה שמייחד

ציור יחד בזמן אמתכניסה עם Google15+ כלי ציור מקצועיים

תשתית הפעלה

סביבת ההפעלה משלבת Nginx, Docker Compose, Spring Boot ו-PostgreSQL

Nginx
שרת פרוקסי + הצפנת SSL
Docker Compose
ניהול קונטיינרים
Spring Boot
שרת אפליקציה + אימות JWT
PostgreSQL
שכבת אחסון נתונים

תוצאות

2
שפות
15+
כלי ציור
WebSocket
ערוץ סנכרון

טכנולוגיות

ReactSpring BootPostgreSQLActiveMQWebSocketDockerNginxSCSS ModulesCanvas API
לכל הפרויקטיםלמערכת הציבורית