مشروع عملAvenue Group

منصة OKKP لإدارة العمليات

كبير مطوري Full-Stack · من الصفر

منصة لإدارة العمليات صمّمتها وأطلقتها من الصفر: إدارة الموظفين وتتبّع المخالفات ولوحات التقارير، مع صلاحيات حسب الأدوار وسجل تدقيق.

كود خاص · NDA

الواجهة

React + TypeScript · SPA · لوحات لكل دور
REST

API

Node.js / Express · REST API
  • المصادقة · RBAC
  • الموظفون
  • المخالفات
  • التقارير
  • سجل التدقيق
SQL · مستندات · وسائط

البيانات

PostgreSQL · SQL
MongoDB · مستندات
Cloudinary · وسائط
منصة OKKP لإدارة العمليات — معاينة
الكود خاص (NDA)، لذا يوضّح هذا المخطط البنية التي بنيتها.فتح بالحجم الكامل

المشكلة

احتاجت Avenue Group إلى نظام واحد للعمل التشغيلي اليومي — الموظفون والمخالفات والتقارير — وكان على التقارير أن تخدم موظفين لا يكتبون استعلامات.

الحل

صمّمتُ النظام وبنيته بالكامل: تطبيق SPA على React + TypeScript، وواجهة REST على Node.js / Express، وطبقة بيانات PostgreSQL + MongoDB، مع صلاحيات حسب الأدوار وسجل تدقيق ورفع آمن للملفات عبر Cloudinary. وتولّيتُ النشر والدعم في بيئة الإنتاج.

النتيجة

أُطلقت في بيئة الإنتاج، ويصدّر الموظفون بيانات التدقيق إلى Excel بأنفسهم.

نظرة عامة

في Avenue Group كنت كبير مطوري Full-Stack في مشروع OKKP، وهو منصة لإدارة العمليات بدأت من مستودع فارغ. كان الهدف نظاماً واحداً للعمل اليومي في الشركة، بحدود واضحة بين الواجهة ومنطق الأعمال وطبقة البيانات.

صمّمت البنية بالكامل: تطبيق صفحة واحدة (SPA) مبني على React وTypeScript، وREST API مبنية على Node.js وExpress، وطبقة بيانات على PostgreSQL وMongoDB. وفوق ذلك بنيت الوحدات الأساسية — إدارة الموظفين وتتبّع المخالفات ولوحات التقارير — مع صلاحيات حسب الأدوار وسجل تدقيق، إضافة إلى آلية آمنة لرفع الوسائط عبر Cloudinary وMulter.

كان على التقارير أن تخدم أشخاصاً لا يكتبون استعلامات، لذلك يتيح التصدير إلى Excel للموظفين غير التقنيين إعداد بيانات جاهزة للتدقيق بأنفسهم. وتولّيت أيضاً النشر ودعم بيئة الإنتاج، وقدّمت واجهة متجاوبة بالكامل مبنية على Tailwind CSS.

ماذا يفعل

  • إدارة الموظفين وتتبّع المخالفات ولوحات التقارير
  • صلاحيات حسب الأدوار وسجل تدقيق في جميع الوحدات
  • رفع آمن للوسائط عبر Cloudinary وMulter
  • تصدير إلى Excel يُنتج بيانات جاهزة للتدقيق دون تدخّل مطوّر

الخطوة التالية

تبحث عن مطوّر Full-Stack أو Python أو ذكاء اصطناعي — أو تحتاج إلى بناء شيء مشابه؟ لنتحدث.

متاح فوراً — حضورياً أو بنظام هجين في موسكو، أو عن بُعد؛ بدوام كامل أو بعقد. أردّ خلال 48 ساعة — وأسرع عبر Telegram.

تواصل معي Telegramتحميل السيرة الذاتية

الحسن الفران.

© 2026 · صمّمته وبنيته بنفسي. التقنيات: Next.js وTailwind وFramer Motion.

توقيتي المحلي: · موسكو

ملاحظات
كيف بُني هذا الموقع

التقنيات

Next.js (App Router) وReact، مع Tailwind CSS للتنسيق وFramer Motion للحركة. يُرسل نموذج التواصل الرسائل عبر Resend، والموقع مستضاف على Vercel.

ثلاث لغات وتصميم واحد

لكل من النسخ الإنجليزية والروسية والعربية عنوانها الخاص (/en و/ru و/ar)، وكلها تستخدم المكوّنات نفسها. يعتمد التصميم على خصائص CSS المنطقية (start/end بدلاً من left/right)، فتنعكس النسخة العربية من اليمين إلى اليسار دون أنماط منفصلة. ويُرسل الخادم كل صفحة بلغتها واتجاه نصها مسبقاً، فلا ينقلب شيء بعد التحميل، ولا يُنزَّل الخط العربي إلا عند ظهور نص عربي على الشاشة.

الأداء وسهولة الوصول

لا تُعرض الأقسام الواقعة أسفل الشاشة الأولى إلا عند الاقتراب منها، ولا تُحمَّل القائمة السريعة إلا عند أول استخدام لها. يمكن استخدام كل شيء من لوحة المفاتيح، مع رابط للانتقال مباشرة إلى المحتوى وتركيز ظاهر، وتتوقف الحركة إذا طلب نظامك تقليلها.

الكود المصدري على GitHub