رحلة تطوير Rebex Shop والنشر على Cloudflare

عندما بدأت العمل على مشروع Rebex Shop، وضعت نصب عيني هدفاً أساسياً: بناء واجهة متجر إلكتروني متكاملة وسريعة الاستجابة بالاعتماد على أحدث الأدوات في منظومة JavaScript مثل React 19، وVite 8، وTailwind CSS v4.

أثمرت هذه التجربة عن تصميم واجهة أمامية بعناية فائقة مع توفير معمارية كود قابلة للتوسع والصيانة بسهولة.

تجد هنا مستودع المشروع إن أردت الاطلاع عليه والاستفادة منه. Rebex Shop - واجهة متجر إلكتروني

1. لماذا اخترت هذه الحزمة التقنية؟

• React 19: للاستفادة من أحدث تحسينات الأداء، والتعامل السلس مع الـ Hooks وContext API لإدارة الحالة الموحدة.
• Vite 8: لتوفير بيئة تطوير فائقة السرعة مع زمن بناء شبه فوري وتجميع ذكي للملفات.
• Tailwind CSS v4: لتنسيق الواجهات بأسلوب Utility-First، مع دعم مدمج ونظيف للنمط الداكن والتكيف مع الشاشات المختلفة.
• Cloudflare Pages & Workers: لتوفير بنية نشر فائقة السرعة باستخدام أداة Wrangler لضمان استجابة خاطفة للعملاء.

2. الهيكلية المعيارية للمشروع

لضمان سهولة الصيانة وتحقيق مبدأ فصل المسؤوليات، حرصت على تنظيم المجلدات بأسلوب ينعكس مباشرة على وظائف التطبيق.

src/
├── components/        # المكونات UI قابلة لإعادة الاستخدام (Navbar, ProductCard, Rating...)
├── context/           # إدارة الحالة المحلية (AuthContext, CartContext, ThemeContext)
├── data/              # البيانات الثابتة الخاصة بالمنتجات
├── layout/            # الهيكل العام للواجهة (Header, Footer)
├── pages/             # صفحات المسارات (Home, Auth, Cart, Checkout, ProductDetails)
├── App.jsx            # تعريف المسارات الرئيسية للتطبيق
└── main.jsx           # نقطة الانطلاق ومغلفات المزودات (Providers)

3. التحديات التقنية وآلية الحل

التحدي الأول: إدارة الحالة بدون تعقيد

تجنّباً للجوء إلى Redux أو أي مكتبات خارجية قد تزيد من حجم حزمة التطبيق، اعتمدت على Context API الخاص بـ React لبناء ثلاث مزودات حالة مستقلة.

1. AuthContext: لإدارة تسجيل الدخول وإنشاء الحسابات مع حفظ حالة الجلسة محلياً عبر localStorage.
2. CartContext: للتحكم الكامل بسلة مشتريات المتجر من إضافة وحذف وتعديل وحساب الإجمالي تلقائياً.
3. ThemeContext: لإدارة النمط البصري للمتجر.

// src/main.jsx - مغلفات المزودات
<ThemeProvider>
  <AuthProvider>
    <CartProvider>
      <App />
    </CartProvider>
  </AuthProvider>
</ThemeProvider>

التحدي الثاني: التحقق من صحة النماذج

في صفحة إتمام الشراء، كان من الضروري التحقق من صحة المدخلات. استخدمت مكتبة React Hook Form لمنع إعادة التمرير غير الضروري للنماذج.

import { useForm } from 'react-hook-form';

const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data) => {
  // معالجة بيانات الطلب والتوجيه لصفحة النجاح
};

التحدي الثالث: التوجيه وتجربة المستخدم

عبر استخدام React Router v7، نفّذت عملية التوجيه بين الصفحات بسلاسة تامة ودون أي حاجة لإعادة تحميل الشاشة.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/product/:id" element={<ProductDetails />} />
  <Route path="/cart" element={<Cart />} />
  <Route path="/checkout" element={<Checkout />} />
  <Route path="/auth" element={<Auth />} />
  <Route path="*" element={<NotFound />} />
</Routes>

التحدي الرابع: نظام المظهر الثلاثي

صمّمت نظام ثيمات مرن يتيح لي وللمستخدمين الاختيار بين 3ثلاثة أوضاع مختلفة: الداكن، المضيء، أو الوضع التلقائي الذي يعتمد على تفضيلات نظام التشغيل.

const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

4. النشر والتشغيل على Cloudflare Pages

قمت بإعداد إمكانية معاينة ونشر التطبيق فورياً على Cloudflare Pages / Workers باستخدام أداة wrangler.

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "npm run build && wrangler dev",
  "deploy": "npm run build && wrangler deploy"
}

ما تعلمته من هذه التجربة

• الحزم الحديثة تعمل بتناغم تام: لاحظت أن التوافق بين React 19 وVite 8 وTailwind v4 يوفر سرعة تطوير استثنائية.
• Context API مثالي للمشاريع المتوسطة: يمنحني كوداً نظيفاً وواضحاً دون الحاجة لمكتبات إدارة حالة معقدة.
• React Hook Form ترفع من مستوى الأداء: تقليل عمليات إعادة التمرير يرفع من سلاسة النماذج المعقدة بشكل ملحوظ.
• النشر على Edge: اعتماد Cloudflare يمنح التطبيق سرعة تحميل فائقة ومثالية للمستخدمين في مختلف المناطق.

برغم بساطة Rebex Shop إلّا أنه انطلاقة جيدة لمشروع صغير إلى متوسط الحجم.

تجد رابط المعاينة والمصدر هنا: Rebex Shop - واجهة متجر إلكتروني