مشروع تطبيق محادثة فورية
تطبيق محادثة باستخدام Express وMongoDB وSocket.IO مع مستخدمين موثقين وملفات شخصية وشاشات محادثة متجاوبة.
عارض صور المشروع

صورة 1 من 6
فكرة المشروع
تطبيق محادثة فورية بين مستخدمين، بمحادثات ثنائية، حالة قراءة/عدم قراءة، وأحداث لحظية عبر Socket.IO. بنفس الخادم بيتغذّى عليه عميل ويب (React) وعميل موبايل (React Native) منفصلين.
ما الذي تعرضه الواجهة
محادثة عربية بالكامل RTL، صندوق وارد بمحادثات متعددة، صفحتي ملف شخصي بحالتي الصورة (حقيقية وافتراضية)، وشاشة تسجيل دخول.
دوري وقراراتي
لما لاحظت إن الرسائل العربية بتتعرض LTR رغم إن المحتوى عربي، الحل
ماكانش بترجمة القسم كله لـRTL يدويًا، لكن إضافة dir="auto" على
مستوى نص الرسالة نفسه — يخلي المتصفح يحدد الاتجاه تلقائيًا حسب المحتوى
الفعلي، فالرسائل العربية تظهر RTL والإنجليزية تفضل LTR من غير ما نكسر
أي حاجة. لاحظت كمان إن مشكلة الإكمال التلقائي لكلمة المرور كانت بسبب
حقل password بدون autocomplete="current-password" — إصلاح سطر واحد
لكن بفهم دقيق للسبب.
الجوانب التقنية
Express + Mongoose + Socket.IO للخادم، React منفصل للويب و React Native للموبايل (مش مبنيين جوه بعض)، مصادقة JWT بـbcrypt الأصلية، وتخزين صور قابل للتبديل (محلي/Cloudinary). فصل الخادم عن الفرونت يعني نشر منفصل لكل واحد (Heroku للخادم، GitHub Pages للويب).
قيمة المشروع داخل المعرض
بيوضح التعامل مع نص ثنائي الاتجاه (bidirectional text) بحل بسيط ومناسب بدل حل زايد عن الحاجة، وبنية عميلين منفصلين (ويب وموبايل) على نفس الخادم.
أعمال ذات صلة
تطبيق وصفات اجتماعي للهاتف
تطبيق اجتماعي لمشاركة وصفات الطبخ بخطوات تحضير منظّمة، تعليقات وإعجابات، وواجهة Ionic تعمل موبايل وويب.
اقرأ المزيدواجهة هاتف للطبيب والمريض
تطبيق Expo للتعرف على الأطباء والبحث عنهم، بوضع خرائط أوفلاين، مبني بـExpress وPostgreSQL.
اقرأ المزيدمنصة حجز فعاليات
منصة حجز فعاليات بواجهة GraphQL، بحث وتصفح وحجز وإلغاء، وأحداث لحظية عبر GraphQL Subscriptions.
اقرأ المزيدخدمات ذات صلة
تطوير واجهات تطبيقات هاتف
واجهات تطبيقات موجهة للهاتف ومرتبطة بـ APIs عند الحاجة، مع تنقل ونماذج وملفات شخصية ومعاينات ويب متجاوبة.
تطوير APIs وخدمات خلفية
خدمات خلفية REST أو GraphQL منظمة مع نماذج بيانات وتحقق ومصادقة عند الحاجة ونقاط ربط جاهزة للواجهة.







