بناء محرّر تعاوني فوري باستخدام Next.js وConvex
من أكثر مشاريعي التي أعتز بها أداة تصميم تعاونية على غرار Canva — عدة مستخدمين يحرّرون اللوحة نفسها في الوقت ذاته. إنه مثال ممتاز على تحدٍّ full-stack، ولذلك أريد أن أشرح كيف تعاملت معه أنا، محمد الكبير.
الجزء الصعب: الاتساق الفوري
المحرّرات التعاونية أصعب مما تبدو. فبمجرد أن يحرّر شخصان في الوقت نفسه، يجب أن يرى كل عميل حالة متسقة دون تعارض أو ارتعاش. استخدمت Convex كنظام خلفي فوري حتى تتزامن تغييرات الحالة تلقائياً بين الجلسات، ما ألغى قدراً هائلاً من العمل اليدوي على WebSocket.
مصادقة بلا وجع رأس
دمجت Clerk للمصادقة وإدارة المستخدمين. ربط المصادقة بشكل نظيف بنموذج بيانات تعاوني أمر جوهري: كل تعديل يجب أن يُنسب إلى مستخدم، ويجب فرض الصلاحيات على الخادم لا في الواجهة فقط.
- Next.js وTypeScript للتطبيق وللوحة التحرير
- Convex للبيانات الفورية ومزامنة الحالة بين المستخدمين
- Clerk للمصادقة وجلسات المستخدمين
أهم درس: دع نظاماً خلفياً فورياً يمتلك مصدر الحقيقة. محاولة كتابة المزامنة يدوياً هي غالباً حيث تنهار التطبيقات التعاونية.
ما سأضيفه لاحقاً
إضافة الحضور (معرفة من يحرّر أيضاً)، والتحديثات التفاؤلية لتفاعل أسرع، وخيارات التصدير. إذا كنت تبني شيئاً تعاونياً — محرّراً أو سبورة أو لوحة تحكم — يسعدني أن أساعدك. أقبل مشاريع full-stack بنظام العمل الحر وأرد خلال 24 ساعة.