تطبيق مهامي

تطبيق ويب متكامل لإدارة المهام اليومية، تم برمجته وتصميمه من الصفر باستخدام بيئة عمل React.js. ركزت في هذا المشروع على كتابة كود نظيف (Clean Code) قابل للتطوير، مع تقديم واجهة مستخدم (UI) عصرية ومريحة للعين تدعم اللغة العربية بالكامل (RTL) وتستخدم خط "Cairo" لتجربة قراءة ممتازة.

لم أعتمد فقط على الأساسيات، بل قمت ببناء نظام إدارة حالة (State Management) متقدم لضمان سرعة وتفاعل التطبيق بدون أي مشاكل في الأداء.

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

- إدارة كاملة للمهام (CRUD): إمكانية إضافة، قراءة، تعديل (عبر نافذة منبثقة Modal احترافية)، وحذف المهام بسلاسة تامة.

- نظام التصفية الذكي (Filtering): أزرار تفاعلية لتصفية المهام وعرضها بناءً على حالتها (الكل، منجز، غير منجز).

- نظام إشعارات مخصص (Toast Notifications): قمت ببرمجة نظام تنبيهات (Alerts) تفاعلي يظهر للمستخدم عند إتمام أي عملية (مثل الإضافة أو الحذف) ويختفي تلقائياً بعد 5 ثواني، مما يضيف تجربة مستخدم (UX) حيوية.

- تخزين البيانات محلياً (Local Storage): لضمان عدم ضياع مهام المستخدم حتى عند إغلاق المتصفح أو إعادة تحميل الصفحة.

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

- React.js: بناء التطبيق بالكامل باستخدام (Functional Components & Hooks).

- Context API: استخدام الـ Context (ToDoProvider و ToastContext) لإدارة حالة التطبيق بشكل مركزي (Global State Management) وتجنب مشكلة الـ Prop Drilling.

- Material-UI (MUI): دمج مكتبة MUI لإنشاء أزرار وأيقونات وتنبيهات احترافية، مع بناء (Custom Theme) مخصص للتحكم في الألوان الأساسية للمشروع.

- CSS & CSS Variables: ربط المتغيرات اللونية (CSS Variables) بـ Theme التطبيق لسهولة التعديل وتوحيد الهوية البصرية.

القيمة المضافة (لماذا هذا المشروع مميز؟):

هذا المشروع يعكس قدرتي على بناء تطبيقات Frontend تفاعلية لا تعتمد فقط على الشكل الجمالي، بل تركز على البنية التحتية القوية للكود، وفصل المهام (Separation of Concerns)، وبناء مكونات (Components) قابلة لإعادة الاستخدام في مشاريع أكبر.