Payment Gateway
إعادة بناء دقيقة للواجهة الأمامية لـ Payment Gateway للعملات المشفرة، تغطي الموقع التسويقي والمصادقة ولوحة تحكم التاجر، مبنية بالكامل في React.
React 18
Vite
React Router 6
SCSS
Swiper
نظرة عامة
هذا المشروع هو إعادة بناء للواجهة الأمامية لمنصة Cryptomus، وهي Payment Gateway للعملات المشفرة تتيح للشركات قبول مدفوعات العملات المشفرة. يعيد بناء واجهة المنتج بالكامل عبر ثلاث واجهات مميزة: موقع تسويقي يبيع الخدمة، ومسار تسجيل الدخول والاشتراك، ولوحة تحكم تاجر موثقة. إنه بناء واجهة مستخدم (UI)، لذا فهو يغطي الواجهة وسلوك الواجهة الأمامية بدلاً من المعالجة المباشرة للمدفوعات، ويغطي مساحة المنتج بالكامل بدلاً من صفحة هبوط واحدة.
المشكلة
تُعد Payment Gateway للعملات المشفرة منتجاً كبيراً بشكل خادع عند عرضه. يجب على الجانب العام شرح خدمة تقنية ببساطة وبيعها، وتغطية التسعير والتعريفات والعملات المدعومة وأدوات المعالجة والإثبات الاجتماعي، بينما يمثل الجانب الخاص لوحة تحكم عاملة بمسارات التنقل والحالات الخاصة بها. إعادة بناء شيء مثل Cryptomus بأمانة هو اختبار حقيقي للواجهة الأمامية: العديد من الشاشات المتميزة، وهيكلان مختلفان تماماً، ومظهر (Theming) متسق طوال الوقت، وسلوك متجاوب في كل مكان. كان الهدف هو إعادة بناء هذا الاتساع بدقة بدلاً من محاكاة صفحة أو صفحتين تقريباً.
دوري ومنهجية العمل
لقد قمت ببناء الواجهة الأمامية بالكامل بنفسي، من صفحات التسويق وصولاً إلى لوحة التحكم. كان القرار الهيكلي الرئيسي هو التعامل مع التطبيق كمنتجين تحت سقف واحد: تجربة تسويقية عامة ولوحة تحكم موثقة، وإعطاء كل منهما هيكل تخطيط خاصاً به مع مشاركة الأجزاء المشتركة تحتهما. قمت بتنظيم التنس��ق لكل شاشة بحيث يمكن لكل واجهة مطابقة مرجعها بدقة دون تداخل أوراق الأنماط (Stylesheets) مع بعضها البعض، ورفعت الاهتمامات المشتركة مثل المظهر (Theming) والشريط الجانبي للوحة التحكم إلى سياق React (Context) لتظل متسقة عبر التطبيق.
الحزمة التقنية
الميزات الرئيسية
معرض الصور
التحديات والحلول
كان التحدي الرئيسي هو تحقيق الاتساع بشكل متسق. يشمل المنتج موقعاً تسويقياً ولوحة تحكم عاملة، وهما في الواقع تطبيقان مختلفان بواجهات (Chrome) مختلفة. تعاملت مع هذا بهياكل تخطيط منفصلة، واحد للموقع العام وآخر للوحة التحكم الموثقة، مؤلفة من خلال التوجيه المتداخل لـ React Router، بحيث تحصل كل واجهة على الترويسة والتذييل والتنقل المناسب مع الاستمرار في مشاركة المكونات المشتركة.
كان الحفاظ على قابلية صيانة واجهة مستخدم كبيرة متعددة الشاشات هو التركيز الآخر. فبدلاً من ورقة أنماط (Stylesheet) واحدة مترامية الأطراف، قمت بتقسيم SCSS لكل شاشة بحيث يمكن تصميم كل صفحة لتطابق مرجعها بدقة، وسحبت الحالة المشتركة (State)، مثل المظهر والشريط الجانبي، إلى السياق (Context) لتعمل بنفس الطريقة في كل مكان بدلاً من إعادة تنفيذها لكل صفحة. أما التفاصيل مثل إدخال الهاتف الدولي والعروض الدوارة (Carousels)، فاعتمدت فيها على مكتبات متخصصة لتبدو طبيعية دون إعادة اختراع العجلة.
النتيجة
النتيجة هي واجهة أمامية كاملة ومتجاوبة لـ Payment Gateway للعملات المشفرة، أعيد بناؤها عبر واجهات التسويق والمصادقة ولوحة التحكم. وباعتبارها عملية إعادة بناء، فهي تظهر مهارات الواجهة الأمامية الأكثر أهمية في منتج بهذا الحجم، بما في ذلك التوجيه متعدد الهياكل والتنسيق لكل شاشة على نطاق واسع والمظهر المشترك وإعادة استخدام المكونات، مُطبقة على واجهة تجارية معقدة حقاً بدلاً من عرض توضيحي مبسط.
هل تواجه تحدياً تقنياً مشابهاً في منتجك؟
شاركني الوضع الحالي للمنتج، والنتيجة المطلوبة، والمعوقات القائمة. وسأعتمد على ذلك في تحديد محطة تسليم أولى منطقية وعملية.
خدمات تطوير تطبيقات الويب