تلاوة مدعومة بالذكاء الاصطناعي · قارئ قرآن متقدم
مصحف اقرأ
تكامل واجهة لجلسات التلاوة المباشرة، وصوت المتصفح، والملاحظات على مستوى الآية، وقارئ قرآن بست لغات.
Next.jsReactTypeScriptnext-intlMUISocket.IOWeb AudioDexieTanStack Query
متاح للعمل عن بُعددمشق، سوريا
خالد حجيج
مهندس واجهات أمامية
أبني واجهات إنتاجية لتدفقات عمل معقدة، من لوحات التحكم متعددة اللغات وأنظمة التعلم الفوري إلى أدوات التحليل وتجارب قراءة القرآن المتقدمة.
+10
منتجات
نحو 4
سنوات من العمل الاحترافي
RTL / LTR
أنظمة منتجات متعددة اللغات
أبرز الأعمال
هندسة واجهات أمامية تركز على المنتج عبر تطبيقات المستخدمين والمنصات التشغيلية الداخلية والمنتجات العامة.
منتجات احترافية مختارة طُورت في شركة مسراج للتقنية. تفصل كل دراسة حالة مساهمتي الشخصية عن عمل الفريق وتلتزم بما تدعمه المستودعات.
عرض جميع الأعمال
منصة تعليمية · معمارية الواجهة الأمامية
Univerta
تدفقات إدارة وتعلم واسعة، مع معالجة اعتماديات Nx أعادت التحديث الفوري ورفعت اختبار Lighthouse مضبوطاً من 78 إلى 92.
ReactTypeScriptNext.jsNxMUITanStack QueryReact ContextESLint
عمليات تعلم · إدارة فورية
إدارة متون
منصة إدارة طورتها منذ إعدادها الأول، وتشمل مجالس التسميع المباشرة وGraphQL والحضور والشهادات.
ReactTypeScriptViteMUIReact QueryGraphQL CodegenHasuraSocket.IOJitsii18next
تحليلات إعلامية · تقارير طويلة التنفيذ
Adam Radar
لوحات غنية بالبيانات وتدفق تقارير مخصصة مع الاستطلاع والإلغاء والتصفح اللانهائي والإشعارات وتصدير CSV.
ReactTypeScriptMUIReact QueryAxiosApexChartsRechartsVisxFirebaseReact Hook Form
خريطة تفاعلية · امتلاك نظام المحتوى
باب الشام
منصة ثنائية اللغة مع محتوى قابل للبحث ومستكشف جغرافي متجاوب مبني بـ D3.
Next.jsReactTypeScriptTailwind CSSnext-intlDirectusD3 GeoGeoJSONFramer Motion
عمليات متعددة اللغات · منصة محتوى
إدارة Quran Orb
نظام إدارة عربي/إنجليزي واسع للصوت وقوائم التشغيل والتحليلات والمستخدمين والصلاحيات والدعم والنشر.
ReactTypeScriptViteMUIReact QueryAxiosReact Hook FormYupi18nextApexCharts
قارئ متعدد الروايات · تطبيق ويب تقدمي
حافظون
قارئ يربط اختلاف الروايات بالكلمات الدقيقة ويحفظ سياق القراءة في المسار ويدعم الصوت والعلامات.
Next.jsReactTypeScriptMUIRedux ToolkitXStateSWRDexiePWA
مشاريع شخصية
استكشاف المنتج كاملاً، من الواجهة إلى البيانات.
مشاريع مستقلة توسّع ممارستي في الواجهات إلى تطوير التطبيقات المتكاملة وتكاملات الذكاء الاصطناعي.
مشروع شخصي · لوحة محافظ متكاملة
متتبع المحافظ المالية
لوحة لتتبع الأسهم والعملات الرقمية والنقد، مع صلاحيات لكل محفظة وسجل حركات وتقييم يدوي ومساعد Gemini للقراءة فقط.
Next.jsReactTypeScriptTailwind CSSPrismaPostgreSQLBetter AuthVercel AI SDKGoogle Gemini
عن عملي
مجموعة من أنظمة الإنتاج في تقنيات القرآن والتعليم والتحليلات والإدارة والمنصات العامة المعتمدة على أنظمة إدارة المحتوى.
في شركة مسراج للتقنية، أحوّل المتطلبات المعقدة إلى واجهات منتجات قابلة للصيانة. تبرز خبرتي عند تقاطع معمارية الواجهة، وتجربة الاستخدام متعددة اللغات، وإدارة حالة الخادم، والوسائط، والتفاعلات الغنية بالبيانات.
مصحف اقرأ01
Univerta02
إدارة متون03
Adam Radar04
باب الشام05
إدارة Quran Orb06
حافظون07
Nova08
Maneh09
Oplus10
Workforces11
Seamless12
المسار المهني
نحو أربع سنوات في تنفيذ أعمال الواجهة الأمامية ضمن فرق منتجات متعددة الاختصاصات.
يوليو 2023 — حتى الآن
شركة مسراج للتقنية
مطور React وNext.js
أبني وأصون تطبيقات إنتاج في التعليم وتقنيات القرآن والتحليلات والإدارة والمنصات العامة المعتمدة على CMS.
- تنفيذ منتجات مستخدمين وأدوات داخلية باستخدام React وNext.js وTypeScript.
- امتلاك تجربة تعدد اللغات وتصور البيانات ووسائط المتصفح والتدفقات الفورية والمعمارية المشتركة.
- التعاون مع مهندسي الخلفية والجودة والمصممين ومديري المشاريع ضمن فرق المنتجات.
يناير 2023 — يوليو 2023
FMS Tech
مطور React
ساهمت كمطور React مبتدئ في صيانة الواجهة وتنفيذ ميزات لمنتج في اللوجستيات وإدارة الأساطيل.
الشهادات
تعلّم مهني تدعمه شهادات عامة.
برامج منظمة عززت أسس الواجهة الأمامية التي أطبقها في عملي على المنتجات.
Meta · Coursera
الشهادة الأبرز
Meta Front-End Developer Professional Certificate
برنامج مهني من تسع دورات، تشمل Advanced React وVersion Control وتصميم UI/UX.
13 فبراير 2023
أُنجز خلال نحو 7 أشهر · قرابة 6 ساعات أسبوعياً
freeCodeCamp
JavaScript Algorithms and Data Structures
إكمال منهج شهادة freeCodeCamp في خوارزميات JavaScript وهياكل البيانات.
يونيو 2022
نقاط القوة
المشكلات الهندسية المتكررة التي أمتلك خبرة عملية في حلها.
تدفقات العمل المعقدة
حالات صريحة وسلوك غير متزامن مرن واستعادة واضحة في جلسات التلاوة والتقارير والمجالس المباشرة.
معمارية تعدد اللغات
أنظمة عربية RTL وإنجليزية LTR مع مسارات ومحتوى وبيانات وصفية وتحقق وواجهات واعية بالاتجاه.
أنظمة الإدارة
نماذج وجداول وفلاتر ورفع ملفات وصلاحيات وCRUD وتشغيل محتوى قابلة لإعادة الاستخدام على نطاق المنتج.
واجهات كثيفة التكامل
صوت المتصفح وSocket.IO وJitsi وDirectus وHasura/GraphQL وFirebase والرفع والتصورات التحليلية.
معمارية الواجهة الأمامية
حدود الميزات وطبقات الاستعلام وhooks مخصصة وأنماط مكونات مشتركة وهيكلة قابلة للصيانة.
تفاعل غني بالبيانات
خرائط وقارئات قرآن ولوحات ورسومات وتقويمات وبحث وأدوات مقارنة وواجهات تشغيل متجاوبة.
المهارات في التطبيق
مهارات صقلتها قيود منتجات حقيقية.
نظرة أقرب إلى المعمارية والتكاملات وضوابط الجودة خلف عملي، بما في ذلك تدفق أتمتة منفذ في Nova يربط الذكاء الاصطناعي بنظام إدارة المحتوى.
استكشف جميع المهاراتنُفّذ ضمن Nova
وكلاء الذكاء الاصطناعي وتكاملات الأتمتة
صممت ونفذت تدفق عمل مدعوماً بالذكاء الاصطناعي يبحث فيه Hermes Agent عن المحتوى ويكتشفه، ثم يعيد JSON منظماً ويسلّم التحكم إلى خط معالجة مبني بـ TypeScript. يتحقق التطبيق من المرشحين ويصفيهم ويزيل التكرار ويرتبهم ويحوّلهم قبل إنشاء مسودات فقط في Directus لتخضع للمراجعة التحريرية البشرية.
Hermes AgentTypeScriptREST APIsJSONZodDirectus
استكشف جميع المهارات01
معمارية الواجهة والأنظمة القابلة لإعادة الاستخدام
حدود واضحة للميزات وطبقات بيانات مشتركة وأنماط إدارة قابلة لإعادة الاستخدام وهيكلة قابلة للصيانة عبر مساحات منتجات كبيرة.
Univerta · Mutoon Admin · Quran Orb Admin
02
تكاملات API وCMS والمحتوى المحكوم
عقود بيانات واضحة وخطوط معالجة يتحكم بها التطبيق لربط الواجهات والخدمات ومنصات المحتوى مع الحفاظ على التحقق والصلاحيات.
Nova · Bab al-Sham · Quran Orb Admin
03
التدفقات غير المتزامنة والفورية والوسائط
حالات واجهة واضحة للمهام الطويلة والجلسات الحية ووسائط المتصفح والإشعارات والإلغاء والمهل والاستعادة.
Mushaf Eqrra · Adam Radar · Mutoon Admin
الأدوات
تقنيات استخدمتها في منتجات منشورة، مجمعة وفق القيمة التي تقدمها.
أساسيات الواجهة
- React
- Next.js
- TypeScript
- JavaScript
- HTML
- CSS
المعمارية والحالة
- TanStack Query
- React Context
- Custom hooks
- Nx monorepos
- النماذج والتحقق
- واجهات إدارة مشتركة
الواجهة والتصور
- Material UI
- Tailwind CSS
- shadcn / Radix
- D3 Geo
- ApexCharts
- واجهات متجاوبة
البيانات والتكامل
- REST / Axios / fetch
- GraphQL / Hasura
- Socket.IO
- صوت المتصفح
- Directus
- رفع الملفات
التعريب والتسليم
- next-intl
- i18next
- RTL / LTR
- SEO مترجم
- Git / ESLint
- Vite
قيد التطوير
أتوسع باتجاه أدوار Full-stack ذات ثقل في الواجهة الأمامية
أعمّق حالياً معرفتي بـ Node.js وExpress. أقدم ذلك بوضوح كمسار تطوير نشط، وليس كخبرة احترافية راسخة في امتلاك الأنظمة الخلفية.