FreshCart - متجر إلكتروني (E-commerce) باستخدام React

FreshCart هو منصة تجارة إلكترونية متكاملة وحديثة، تم تطويرها باستخدام Next.js وTypeScript لتقديم تجربة تسوق سلسة واحترافية للمستخدمين. يدعم المشروع كافة العمليات الأساسية والمتقدمة لمتجر إلكتروني حقيقي، بدءًا من تصفح المنتجات وحتى إتمام الطلب.

التقنيات المستخدمة:

تم بناء الواجهة الأمامية باستخدام Next.js مع الاستفادة من مميزاته المتقدمة مثل SSR وSSG وCSR والتوجيه الديناميكي، مع TypeScript لضمان أمان الكود وتقليل الأخطاء. تم تصميم الواجهات باستخدام Tailwind CSS للحصول على تصميم متجاوب وسريع، مع مكتبة Font Awesome للأيقونات، وAOS لإضافة حركات وتأثيرات عند التمرير. لإدارة الحالة (State Management) تم استخدام Redux Toolkit، ولإدارة النماذج والتحقق من صحة البيانات تم استخدام React Hook Form مع Zod. أما الاتصال بالـ APIs فتم عبر Axios، مع React Toastify لعرض إشعارات تفاعلية للمستخدم. كما تم الاعتماد على ESLint وPrettier لضمان جودة الكود وتنسيقه.

أبرز المميزات:

- نظام تسجيل دخول وإنشاء حساب مع تفعيل عبر البريد الإلكتروني واستعادة كلمة المرور

- تصفح المنتجات حسب الفئات والعلامات التجارية مع خاصية البحث والفلترة

- صفحة تفاصيل منتج تحتوي على الصور والمواصفات والتقييمات مع إمكانية إضافة تقييم

- سلة تسوق تدعم المستخدمين المسجلين والزوار (تخزين محلي عبر localStorage)

- قائمة المفضلة (Wishlist) لكل من المستخدمين المسجلين والزوار

- عملية إتمام شراء (Checkout) كاملة مع ملخص الطلب وبيانات الدفع

- تتبع الطلبات وعرض سجل الطلبات بالتفصيل

- إدارة الملف الشخصي وتغيير كلمة المرور

- صفحات ثابتة: من نحن، سياسة الخصوصية، الشروط والأحكام، تواصل معنا

- دعم كامل للغة العربية وتصميم متجاوب مع جميع الأجهزة

- حماية المسارات الخاصة (Protected Routes) باستخدام التوكن

- أداء عالي وسرعة تحميل ممتازة بفضل تحسينات Next.js

هيكلة المشروع:

تم تنظيم المشروع بشكل احترافي وقابل للتوسع، حيث تحتوي src/app على صفحات التطبيق منظمة حسب الميزة (المصادقة، لوحة التحكم، إلخ)، وsrc/features يضم كل ميزة رئيسية (المصادقة، السلة، المنتجات، المفضلة) في مجلد منفصل يحتوي على المكونات والهوكس والأنواع الخاصة بها، بينما src/store مخصص لإعداد Redux وإدارة الحالة العامة للتطبيق. هذا التنظيم يسهل عملية الصيانة والتطوير المستقبلي للمشروع.