ShopHub

**ShopHub هو مشروع واجهة أمامية لمنصة E-Commerce حديثة مبني باستخدام React و Vite و Tailwind CSS.**

يوفر المشروع تجربة تسوق سهلة وسريعة تشمل عرض المنتجات، البحث، الفلترة، التصنيفات، التقسيم إلى صفحات، إدارة عربة التسوق، قائمة المفضلة، مقارنة المنتجات، والتحقق من بيانات نموذج الشراء.

يعتمد المشروع على **Zustand** لإدارة الحالة العامة مع حفظ البيانات في localStorage، مما يسمح ببقاء بيانات عربة التسوق والمفضلة والمقارنة حتى بعد تحديث الصفحة. كما يستخدم **React Hook Form + Yup** لإدارة النماذج والتحقق من البيانات، و **i18next** لدعم تعدد اللغات، بالإضافة إلى **Vitest** لاختبار الأجزاء المهمة من التطبيق.

تم تنظيم المشروع باستخدام **Feature-Based Architecture** لجعل الكود منظمًا، قابلًا للتوسع، وسهل الصيانة.

**أهم المميزات:**

* عرض المنتجات مع البحث والفلترة والتقسيم إلى صفحات.

* عربة تسوق مع التحكم في الكمية وحفظ البيانات.

* قائمة مفضلة لحفظ المنتجات.

* مقارنة بين المنتجات المختارة.

* نموذج Checkout مع Validation.

* دعم تعدد اللغات باستخدام i18next.

* تصميم Responsive باستخدام Tailwind CSS.

* تنظيم المشروع بطريقة Feature-Based.

* إعداد اختبارات باستخدام Vitest.

**ShopHub is a modern front-end E-Commerce platform built with React, Vite, and Tailwind CSS.**

The project provides a smooth shopping experience with product browsing, search, filtering, pagination, cart management, wishlist, product comparison, and checkout form validation.

The application uses **Zustand** for global state management with localStorage persistence, allowing cart, wishlist, and comparison data to remain saved after page refresh. It also includes **React Hook Form + Yup** for reliable form validation, **i18next** for multilingual support, and **Vitest** for testing important logic.

The project follows a **feature-based architecture**, making the codebase clean, scalable, and easy to maintain.

**Key Features:**

* Product listing with search, category filtering, and pagination.

* Shopping cart with quantity control and persisted state.

* Wishlist for saving favorite products.

* Product comparison between selected items.

* Checkout forms with validation.

* Multilingual support using i18next.

* Responsive UI built with Tailwind CSS.

* Feature-based folder structure.

* Unit testing setup using Vitest.