تطوير تطبيق لإدارة المهام باستخدام React وMaterial UI

قمت بتطوير تطبيق ToDo List حديث لإدارة المهام باستخدام React وMaterial UI (MUI)، يتيح للمستخدم إضافة المهام وتعديلها وحذفها وتحديد المهام المكتملة، مع إمكانية تصفية المهام حسب حالتها.

تم بناء التطبيق باستخدام React Context API وuseReducer لإدارة حالة المهام بشكل منظم، مع استخدام localStorage لحفظ البيانات تلقائيًا بحيث تظل المهام محفوظة حتى بعد إعادة تحميل الصفحة أو إغلاق المتصفح.

أبرز ما تم تنفيذه:

إضافة مهام جديدة مع التحقق من إدخال البيانات.

تعديل عنوان وتفاصيل المهام من خلال Dialog.

تحديد المهمة كمكتملة وإظهارها بتنسيق مناسب.

حذف المهام مع نافذة تأكيد لمنع الحذف بالخطأ.

تصفية المهام وعرض:

جميع المهام.

المهام المكتملة.

المهام غير المكتملة.

حفظ واستعادة المهام تلقائيًا باستخدام localStorage.

استخدام Context API وuseReducer لإدارة حالة التطبيق.

استخدام UUID لإنشاء معرف فريد لكل مهمة.

إضافة Snackbar notifications لإظهار رسائل تأكيد عند الإضافة والتعديل والحذف وإكمال المهام.

تصميم واجهة حديثة ومتجاوبة باستخدام Material UI.

تنظيم المشروع باستخدام Components وContexts وReducers بشكل يسهل تطويره وصيانته.

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

React.js – Material UI (MUI) – JavaScript – Context API – useReducer – localStorage – UUID – Emotion

المشروع يمثل تطبيقًا عمليًا على بناء تطبيقات React التفاعلية، وإدارة الحالة باستخدام Context API وuseReducer، مع الاهتمام بتنظيم الكود وتجربة المستخدم وحفظ البيانات محليًا.