مشروع عملعمل حر

لوحات مؤشرات أداء لعميل

عمل حر لعميل · لوحات React

لوحات مؤشرات تفاعلية لأحد عملاء العمل الحر، تجمع بيانات عدة مصادر خلف واجهة API واحدة على Node.js.

كود خاص · ملك للعميل

البيانات

مصادر متعددة

API

Node.js · واجهة REST واحدة

الواجهة

React · لوحات المؤشرات · التصفية
لوحات مؤشرات أداء لعميل — معاينة
الكود ملك للعميل، لذا يوضّح هذا المخطط البنية التي بنيتها.فتح بالحجم الكامل

المشكلة

كانت القرارات تعتمد على ملفات مُصدَّرة وجداول ثابتة، فتُكتشف الاتجاهات متأخرة.

الحل

لوحات React بمؤشرات قابلة للتصفية وعروض للاتجاهات، وواجهة API على Node.js فوق عدة مصادر.

النتيجة

مؤشرات قابلة للتصفية في مكان واحد بدلاً من تقارير تُحدَّث يدوياً.

نظرة عامة

كان أحد عملائي في العمل الحر يعتمد على ملفات مُصدَّرة ثابتة وجداول متفرقة، فتبقى الاتجاهات مخفية حتى يحدّث أحدهم التقرير يدوياً. وكان المطلوب لوحات تفاعلية تجعل قراءة المؤشرات أسهل.

بنيت واجهة React بوحدات مؤشرات قابلة للتصفية وعروض للاتجاهات، وواجهة API على Node.js تجمع بيانات عدة مصادر خلف واجهة REST واحدة. الكود ملك للعميل، لذا يعرض المخطط البنية.

ماذا يفعل

  • وحدات مؤشرات أداء قابلة للتصفية بدلاً من الملفات الثابتة
  • واجهة API على Node.js تجمع بيانات عدة مصادر
  • عروض للاتجاهات تُظهر التغيّرات بسرعة

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

تبحث عن مطوّر 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