Multiverse Atlas
تطبيق React حديث لاستكشاف أكثر من 800 شخصية من Rick and Morty مع بحث وتصفح وملفات تعريف مفصلة، مدعوم بـ TanStack Query.
التقنيات المستخدمة :
نظرة عامة على المشروع
Multiverse Atlas مستكشف شخصيات لعالم Rick and Morty: تطبيق React مركّز لتصفح أكثر من 800 شخصية مع بحث وتصفح مقسّم وملفات تفصيلية.
استكشاف الواجهات البرمجية العامة الكبيرة بشكل جيد يتطلب قرارات UX مدروسة: جلب بيانات لا يُرهق الواجهة، وبحث يبدو فورياً، وتصفح يبقى سلساً مع الحجم. يُظهر هذا المشروع تلك الأنماط ببنية جلب بيانات حديثة ونظيفة في React.
الميزات الرئيسية
- بحث الشخصيات: إدخال مؤجل لتصفية سريعة الاستجابة
- تصفح مقسّم: تنقل سلس عبر أكثر من 800 سجل
- ملفات تفصيلية: الحالة والنوع والأصل والظهور في الحلقات
- تنقل سريع: انتقالات مدعومة بالتخزين المؤقت بين العروض
أبرز الجوانب التقنية
- TanStack Query: إدارة حالة الخادم مع تخزين مؤقت ذكي يلغي الطلبات المكررة
- بحث مؤجل: يمنع الاستدعاءات المفرطة للـ API مع إبقاء الإدخال سريع الاستجابة
- بنية نظيفة: عميل API مركزي (/api)، وhooks مخصصة لجلب البيانات (/hooks)، وصفحات على مستوى المسارات، ومكونات قابلة لإعادة الاستخدام
- React Router v7: توجيه وتنقل من جانب العميل
مساهماتي
- صممتُ وبنيتُ التطبيق بالكامل
- نفّذتُ طبقة جلب البيانات والتخزين المؤقت بـ TanStack Query
- بنيتُ تجربة البحث المؤجل والتصفح المقسّم
- نظّمتُ المشروع بفصل نظيف للمسؤوليات
التحديات والحلول
التحدي: البحث والتصفح في أكثر من 800 سجل من الـ API دون إغراق الواجهة أو إبطائها.
الحل: إدخال بحث مؤجل مقترن بالتخزين المؤقت في TanStack Query والجلب المقسّم.
النتيجة: تجربة سريعة الاستجابة ومعتمدة على البيانات بأقل قدر من الطلبات المكررة وتنقل سلس في كل مكان.
التقنيات المستخدمة
Frontend: React 19، TypeScript، Vite، Tailwind CSS 4
البيانات: TanStack Query، Axios، React Router v7
تحتاج شيئاً مشابهاً؟أخبرني عن مشروعك