تطبيق ويب احترافي لتتبع العملات الرقمية في الوقت الفعلي مع رسوم بيانية تفاعلية ونظام Dark/Light Mode متقدم.
المميزات الرئيسية:
- Dashboard شامل لعرض 20 عملة رقمية بالوقت الفعلي
- صفحة تفاصيل لكل عملة مع رسم بياني تفاعلي باستخدام Chart.js
- نظام Watchlist (المفضلة) لحفظ العملات المهمة
- صفحة أخبار العملات الرقمية
- Dark/Light Mode كامل مع تبديل سلس
- تكامل متقدم مع CoinGecko API (3 endpoints مختلفة)
- Stats Cards تعرض إحصائيات السوق العالمية
- نظام Routing متقدم مع React Router v6
- Context API لإدارة الحالة العامة (Theme + Favorites)
- Custom Hooks لإدارة الـ API Calls
- LocalStorage للاحتفاظ بالمفضلة والـ Theme
- رسوم بيانية قابلة للتفاعل مع تبديل الفترات الزمنية (24H, 7D, 30D, 1Y)
- تصميم متجاوب 100% (Responsive) على جميع الأجهزة
- Animations و Hover Effects احترافية
- Error Handling و Loading States شاملة
التقنيات المستخدمة:
- React 18 + Vite - لبناء تطبيق سريع ومتقدم
- React Router v6 - للتنقل بين الصفحات
- Context API + Custom Hooks - لإدارة State Management
- Chart.js + react-chartjs-2 - للرسوم البيانية التفاعلية
- Tailwind CSS v4 - للتصميم العصري
- Axios - للتعامل مع الـ API
- React Icons - للأيقونات الاحترافية
- CoinGecko API - مصدر البيانات الحية
- LocalStorage API - لحفظ البيانات محلياً
الـ APIs المستخدمة (3 APIs):
1. CoinGecko Market Data API - أسعار ومعلومات العملات
2. CoinGecko Chart API - بيانات الرسوم البيانية
3. CoinGecko Global Data API - إحصائيات السوق العالمية
الصفحات المتوفرة:
1. Dashboard - عرض 20 عملة مع Stats Cards
2. Coin Details - صفحة تفاصيل كل عملة مع Chart تفاعلي
3. Watchlist - قائمة المفضلة بشكل جدول منظم
4. News - صفحة أخبار العملات الرقمية
5. Navbar ديناميكي مع Dark/Light Mode Toggle
تصميم فريد ومتميز:
- Color Scheme: Dark Purple/Violet (#8B5CF6, #7C3AED)
- Dark Mode: Deep Navy (#0F172A, #1E293B)
- Accent Colors: Green (#10B981) للربح، Red (#EF4444) للخسارة
- Typography: نظيف ومقروء
- Spacing: منظم ومريح للعين
- Cards: Shadow effects مع Hover animations
- Charts: Interactive مع Tooltip معلومات
ميزات تقنية متقدمة:
- Custom Hooks (useCryptoData)
- Multiple Context Providers (Theme + Favorites)
- Chart.js Configuration متقدم
- Real-time Data Updates (كل 60 ثانية)
- Dynamic Routing مع useParams
- Conditional Rendering ذكي
- Error Boundaries
- Loading States احترافية
- Responsive Grid System
- CSS Variables للـ Theming
المشروع يوضح قدرتي على:
- بناء تطبيقات React متقدمة ومعقدة
- التعامل مع Multiple APIs
- إنشاء Charts تفاعلية
- إدارة State Management المتقدم
- كتابة Custom Hooks
- تطبيق Dark/Light Mode من الصفر
- بناء UI/UX احترافي
- كتابة كود نظيف وقابل للصيانة
- تطبيق أفضل الممارسات في React
