📖 القرآن الكريم (Quran.co)

مشروع واجهة ويب تفاعلية لقراءة واستماع القرآن الكريم بتجربة مستخدم سلسة وعصرية، مبني باستخدام أحدث تقنيات الـ Frontend.

✨ المميزات

• تجربة قراءة مريحة: دعم كامل للوضع الليلي (Dark Mode) مع تصميم يركز على المحتوى.
• فهرس سور ذكي: قائمة جانبية لسهولة التنقل بين السور مع عرض عدد الآيات.
• تعدد الروايات والقراء: إمكانية اختيار الرواية (مثل حفص عن عاصم) واختيار القارئ المفضل.
• ترجمة المعاني: عرض ترجمة الآيات باللغة الإنجليزية جنباً إلى جنب مع النص العربي.
• التفسير: نافذة منبثقة (Modal) لعرض تفسير الآيات بشكل مفصل وسهل القراءة.
• مشغل صوتي متطور: تحكم كامل في الاستماع مع ميزة التحديد التلقائي للآية الحالية.
• أداء عالي: استخدام تقنيات الـ Windowing لعرض القوائم الطويلة بكفاءة عالية.

🛠️ التقنيات المستخدمة (Tech Stack)

• React 19: أحدث إصدار من مكتبة ريأكت لأداء أفضل.
• Vite: كأداة بناء (Build tool) سريعة جداً.
• Tailwind CSS v4: لتنسيق الواجهة بأسلوب Utility-first.
• TanStack Query (React Query) v5: لإدارة جلب البيانات (Data Fetching) والكاشينج.
• React Router v7: للتعامل مع المسارات داخل التطبيق.
• React Window: لتحسين أداء القوائم الطويلة (Virtualization).
• FontAwesome: للأيقونات التفاعلية.

🚀 تشغيل المشروع محلياً

1. قم بعمل Clone للمستودع:

   git clone https://github.com/your-username/quran-co.git

2. انتقل إلى مجلد المشروع:

   cd quran-co

3. ثبت المكتبات المطلوبة:

   npm install

4. ابدأ تشغيل سيرفر التطوير:

   npm run dev