تطبيق الطقس

تطبيق ويب عصري يعرض حالة الطقس الحقيقية والمحدثة للمدن المختلفة، مصمم بأسلوب الزجاج الشفاف (Glassmorphism) الجذاب. في هذا المشروع، قمت بدمج واجهات برمجة التطبيقات (APIs) الخارجية مع بناء هيكل برمجي قوي يعتمد على React لتقديم تجربة مستخدم (UX) فائقة السرعة والسلاسة، مع دعم كامل لتغيير اللغات ديناميكياً.

المميزات الأساسية للتطبيق (Features):

- ربط حي بالبيانات (Live API Integration): جلب بيانات الطقس الفعلية (درجة الحرارة الحالية، الصغرى والكبرى، وحالة السماء) لحظياً باستخدام OpenWeatherMap API.

- دعم متعدد اللغات (Bilingual & RTL/LTR): نظام ترجمة متكامل يتيح للمستخدم التبديل بين اللغتين العربية والإنجليزية بضغطة زر، مع قلب اتجاه الواجهة بالكامل (من اليمين لليسار والعكس) فورياً بدون الحاجة لإعادة تحميل الصفحة.

- تصميم عصري (Glassmorphism): واجهة مستخدم أنيقة تعتمد على تأثيرات الزجاج الشفاف المتناسقة مع خلفية داكنة، لتقديم تجربة بصرية مريحة وحديثة، مع استخدام خط "Tajawal" للغة العربية.

- إدارة الحالات (Error & Loading Handling): عرض مؤشرات تحميل (Loading Spinners) أثناء جلب البيانات، لضمان عدم تشتت المستخدم أثناء انتظار استجابة الخادم.

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

- React.js: الاعتماد الكامل على الـ Hooks في بناء المكونات.

- Axios & APIs: إدارة طلبات الـ HTTP والتواصل مع خوادم OpenWeatherMap.

- Context API: بنية معمارية نظيفة جداً تعتمد على تقسيم الـ Global State لعدة Contexts منفصلة (مثل weatherContext، langContext، cityContext) لسهولة الصيانة وتجنب تعقيد الكود.

- Material-UI (MUI): توظيف مكونات MUI مثل (CircularProgress & ThemeProvider) للتحكم في ثيم التطبيق وأنواع الخطوط.

القيمة المضافة والتفاصيل التقنية الدقيقة:

ما يميز هذا التطبيق هو التركيز على أداء الكود؛ حيث قمت بتطبيق تقنية Axios Cancel Tokens داخل الـ useEffect لضمان إلغاء أي طلبات (Requests) قديمة إذا قام المستخدم بتغيير المدينة بسرعة، مما يمنع تسريب الذاكرة (Memory Leaks) أو عرض بيانات خاطئة (Race Conditions)، وهو ما يعكس مستوى احترافي في التعامل مع الـ Asynchronous JavaScript.