العودة إلى المشاريع
Full-Stack

CTCommAugust 2024 - June 2026

طوّرت SimpleTouch، تطبيق ويب مؤسسي لمركز اتصال مع تواصل فوري (real-time)، مبني في نسختين متوازيتين: Next.js / React و Angular ضمن Nx Monorepo، يشمل لوحات تحكم وإدارة للمستخدمين والصلاحيات والتقارير.

التقنيات المستخدمة

TypeScriptNextJSAngularReduxTailwindCSS

SimpleTouch هو واجهة أمامية مؤسسية (enterprise) لمنصّة مركز اتصال (contact center) وإدارة العمليات. وهو ليس مجرد مجموعة من صفحات الواجهة الثابتة، بل واجهة تشغيلية ثقيلة البيانات ومترابطة بإحكام مع الخادم الخلفي (backend)، صُمّمت لعرض وإدارة المستخدمين والأدوار والصلاحيات، ومجموعات العمل (workgroups)، وتسجيلات المكالمات، والتقارير، وجودة الخدمة، والإشعارات، والإعدادات، وسجلّات التدقيق.

يتركّز جوهر العمل على بناء سير عمل إدارية وتشغيلية معقّدة: جداول ونماذج وحوارات (dialogs) وفلاتر ورسوم بيانية ولوحات تحكم تعرض المعلومات اللحظية بوضوح. وتدعم الواجهة المصادقة والتفويض (authentication/authorization)، والتحديثات والإشعارات الفورية (real-time)، إضافةً إلى أنماط وإطارات عمل قابلة لإعادة الاستخدام تحافظ على قابلية صيانة التطبيق وتوسّعه.

بُني المشروع في نسختين متوازيتين. نسخة Next.js هي واجهة ويب حديثة باستخدام Next.js وReact وTypeScript، مع فصل واضح بين الـ pages والـ components والـ services والـ store والـ context، ودمج Redux Toolkit وSocket.IO وMUI وPrimeReact، إلى جانب اختبارات Playwright وJest.

أما نسخة Angular فمبنية كهيكل أحادي معياري (modular monolith) ضمن مساحة عمل Nx monorepo، بتطبيق Angular واحد، ومكوّنات مستقلّة (standalone)، وتوجيه بالتحميل الكسول (lazy-loaded routing)، وAngular Signals، مع فصل واضح بين طبقات الـ core وdata-access وfeatures وshared، واستخدام عملاء OpenAPI مولّدة تلقائياً.

بشكل عام، يربط التطبيق الواجهة بخدمات الـ backend API مع الحفاظ على بنية نظيفة وقابلة للتوسّع وتجربة مستخدم واضحة داخل بيئة مؤسسية متطلّبة.