Weather app(موقع عرض حالة الطقس )

تطبيق ويب تفاعلي لعرض حالة الطقس لمدينة يختارها المستخدم، بواجهة عربية نظيفة كما في الصورة، مع خيار التبديل الفوري بين العربية والإنجليزية.

التقنيات المستخدمة

HTML, CSS, JavaScript, redux

React.js + MUI لتصميم بطاقة أنيقة ومتجاوبة

OpenWeather API لجلب بيانات الطقس

i18n للتعريب وتبديل اللغة (مثل react-i18next)

أبرز المزايا

إدخال اسم المدينة وجلب الطقس الحالي عبر OpenWeather.

عرض داخل بطاقة مركزية:

اسم المدينة بخط بارز.

التاريخ والوقت بصيغة محلية (عربي/إنجليزي).

درجة الحرارة الحالية بشكل كبير وواضح.

أيقونة تعبّر عن الحالة الجوية.

وصف الحالة (مثلاً: سحب متقطعة).

درجتا الصغرى | الكبرى لليوم.

دعم كامل للاتجاه RTL عند اختيار العربية، وLTR عند اختيار الإنجليزية.

زر/قائمة لاختيار اللغة: عربي | English مع تفعيل فوري دون إعادة تحميل الصفحة.

تنبيهات بسيطة عند الأخطاء (مدينة غير موجودة أو مشكلة اتصال).

تصميم متجاوب يعمل بسلاسة على الجوال والكمبيوتر.

بنية المكونات المقترحة

LanguageSwitcher: مبدّل اللغة (عربي/English).

CitySearch: حقل إدخال وزر “ابحث”.

WeatherCard:

CityHeader: اسم المدينة + التاريخ/الوقت.

WeatherMain: الأيقونة + الدرجة + الوصف.

WeatherDetails: الصغرى | الكبرى.

تجربة الاستخدام

ألوان هادئة وخلفية زرقاء لإبراز البطاقة.

حالات تحميل Skeleton أثناء جلب البيانات.

الخلاصة: تطبيق React/MUI أنيق ثنائي اللغة (عربي/English) يعرض أهم معلومات الطقس بوضوح داخل بطاقة واحدة، مع دعم RTL وتبديل اللغة لحظياً واعتماد OpenWeather كمصدر بيانات.