يطبق هذا المشروع الواجهة الأمامية لتطبيق ويب بسيط لقائمة المهام، باستخدام مكتبة React JS، وكذلك المكونات المصممة التي تحل محل CSS الخالص.
ويتضمن صفحة تسجيل الدخول وواجهة المستخدم العامة للتطبيق.
لم يتم تنفيذ منطق مصادقة تسجيل الدخول وقاعدة بيانات المهام لكل مستخدم، حيث يهدف هذا المشروع إلى أن يكون دراسة أمامية فقط.
صفحة تسجيل الدخول مستوحاة من هذا التصميم من قبل جوردان هيوز. الصفحة الرئيسية مستوحاة من هذا التصميم بواسطة ميك سكوزا.
• صفحة تسجيل الدخول، بما في ذلك زر تسجيل الدخول، الذي يعيد التوجيه إلى التطبيق الرئيسي.
• واجهة مستخدم التطبيق مع شريط التنقل الجانبي ومنطقة قائمة المهام.
• إضافة مهمة جديدة، وتحديد خصائص الاسم والفئات.
• حذف المهمة، مع مشروط لتأكيد الإجراء.
• التحقق من المهمة كما فعلت عن طريق خانة الاختيار.
• تصفية المهام التي تظهر في قائمة المهام حسب "تم" أو "لم يتم" أو "الكل".
• تصفية المهام التي تظهر في قائمة المهام حسب فئتها، من خلال التحديد على الشريط الجانبي.
• التفويض: لا يمكن للمستخدم الوصول إلى الصفحة الرئيسية قبل تسجيل الدخول، ولا إلى صفحة تسجيل الدخول بعد تسجيل الدخول.
ملاحظة: حاليًا، لم يتم تنفيذ "مهمة التحرير" ووظائف إضافة الفئات أو إزالتها، لأنني اعتبرت أنها لن تساهم كثيرًا في تعلمي الشخصي، وستستغرق وقتًا طويلاً. ربما سأقوم بتنفيذ هذا لاحقًا.
إذا كنت تريد تجربة هذا المشروع بنفسك:
sudo npm install -g yarn
yarn install
على الجهاز، داخل المجلد الذي قمت بتنزيل المشروع فيه، لتثبيت جميع التبعيات المستخدمة.yarn start
تشغيل المشروع على متصفحك.