نظرة عامة على المشروع
PlateCreate منصة تجارة إلكترونية متكاملة الميزات لتصميم إطارات لوحات السيارات المخصصة وشرائها. وفي قلبها محرر Canvas متقدم يعمل بتقنية Konva.js، يضم أدوات للنصوص (أكثر من 50 خطًا لإطارات اللوحات)، ورفع الصور، وأدوات الأشكال، وفرش الرسم، والمحاذاة الذكية بأسلوب Canva، وإدارة الطبقات، وسجل التراجع والإعادة، والتصدير بصيغتي PNG وPDF بدقة عالية. وتعتمد المنصة بنية متعددة المستأجرين بخمسة أدوار مستخدمين مختلفة – المستخدمون العاديون، والمشرفون العامون، ووكلاء السيارات، والمطابع، وشركاء العقارات – ولكل منها لوحات تحكم ومسارات عمل مخصصة. كما تشمل تكاملًا كاملًا للدفع عبر Stripe مع سلة تسوق وإتمام شراء، وسوقًا للتصاميم مع مسار موافقة من المشرف، وحملات لجمع التبرعات مع تتبع المساهمات، ونظام مكافآت للإحالة بحوافز رصيد، ومصادقة ثنائية (رمز OTP عبر البريد الإلكتروني والهاتف)، وشبكة مطابع لتنفيذ الطلبات. والمنصة مبنية باستخدام Next.js 15 وReact 19 وTypeScript، مع Zustand لإدارة الحالة، ومنشورة على Cloudflare Pages مع D1 لقاعدة البيانات وR2 لتخزين الصور.
التحديات والحلول
محرر Canvas متقدم
التحدي: بناء محرر تصميم بمستوى احترافي يدعم النصوص والصور والأشكال والرسم الحر بدقة متناهية – مع الحفاظ على سهولة استخدامه لغير المتخصصين تقنيًا على أجهزة الكمبيوتر والجوال على حد سواء.
الحل: بنيت المحرر على Konva.js مع أكثر من 50 خطًا لإطارات لوحات المركبات، وست أدوات للأشكال، وأربعة أنواع من فرش الرسم مع التحكم في الشفافية، ونظام كامل لإدارة الطبقات مع التحكم في ترتيبها (z-index). وتوفر المحاذاة الذكية بأسلوب Canva أدلة محاذاة للمنتصف والحواف وبين العناصر – حتى للعناصر التي جرى تدويرها. ويتضمن المحرر التراجع والإعادة مع سجل كامل، واختصارات لوحة المفاتيح، وتثبيت الدوران على الزوايا الرئيسية، وأدوات التكبير والتصغير (10%–300%)، وشبكات إرشادية، ومساطر، والتصدير بصيغتي PNG وPDF بدقة عالية لإخراج جاهز للطباعة. وتضمن واجهة متجاوبة مع الجوال، بلوحة سفلية وشريط أدوات عائم، تجربة سلسة على مختلف الأجهزة.
منصة تجارة إلكترونية متعددة المستأجرين
التحدي: دعم خمسة أدوار مستخدمين مختلفة – المستخدمون العاديون، والمشرفون العامون، ووكلاء السيارات، والمطابع، وشركاء العقارات – يحتاج كل منها إلى لوحات تحكم وصلاحيات ومسارات عمل خاصة، إلى جانب منظومة تجارة إلكترونية كاملة تشمل المدفوعات والسوق وجمع التبرعات.
الحل: صممت بنية تعتمد على الأدوار، مع توجيه تلقائي إلى لوحة التحكم المناسبة وبوابات مخصصة لكل نوع من المستخدمين. فيدير وكلاء السيارات القوالب ورموز الخصم، وتتولى المطابع تنفيذ الطلبات مع توجيهها حسب نطاق الخدمة، ويضبط شركاء العقارات طلبات الشحن التلقائي. وتتكامل المنصة مع Stripe لإتمام شراء آمن مع معالجة webhooks، إلى جانب سوق للتصاميم بمسار موافقة من المشرف، وحملات لجمع التبرعات مع تتبع الأهداف وطلبات السحب، ونظام مكافآت للإحالة بحوافز رصيد مع منع الإحالة الذاتية.
الأداء والبنية التحتية السحابية
التحدي: تحقيق سرعة تحميل عالية ونظام مصادقة آمن في منصة غنية بالميزات، مع النشر على بنية تحتية طرفية (Edge) تعتمد تخزينًا قائمًا على SQLite وتخزين كائنات لملفات المستخدمين المرفوعة.
الحل: نشرت المنصة على Cloudflare Pages مع D1 (SQLite) لقاعدة البيانات وR2 لتخزين الصور، واستخدمت 22 فهرسًا لقاعدة البيانات وتخزينًا مؤقتًا مكثفًا عبر HTTP (10 دقائق في المتصفح، وساعتان على شبكة CDN)، لينخفض زمن تحميل لوحات التحكم إلى أقل من 100 مللي ثانية – أي تحسن بنسبة 95%. وتعتمد المصادقة على رموز مرتبطة بالجلسات مع تحقق ثنائي (رمز OTP عبر البريد الإلكتروني من خلال Resend، وعبر الهاتف من خلال Twilio)، وتخزين مؤقت للجلسات لمدة 30 ثانية يقلل استعلامات قاعدة البيانات بنسبة 90%، وتحديد معدل الطلبات على نقاط النهاية الحساسة، وتجزئة كلمات المرور باستخدام bcrypt. وتضم المنصة 44 عملية ترحيل لقاعدة البيانات بمعاملات متوافقة مع ACID.
النتائج والأثر
50+
خط مخصص لإطارات اللوحات
5
أدوار مستخدمين مختلفة
95%
أسرع في تحميل لوحات التحكم
<100ms
زمن تحميل لوحة التحكم
استعراض المنصة
منصة التصميم كاملة
عرض كامل لمنصة PlateCreate يبرز محرر Canvas المبني على Konva.js، وسوق التصاميم، ولوحات التحكم الخاصة بكل دور، وإتمام الشراء عبر Stripe
هل لديك مشروع مشابه قيد التخطيط؟
يمكنك إخبارنا باحتياجاتك، ويصلك ردّنا خلال يوم عمل واحد، مع تعديلات غير محدودة حتى نصل إلى النتيجة المطلوبة.
هل لديك موقع بالفعل؟ مع خدمة العناية بالمواقع، يمكنك الجمع بين إدارة الموقع وSEO وGoogle Ads ووسائل التواصل الاجتماعي والتصميم الجرافيكي مقابل 150 US$/شهر لكل خدمة.