ملخص الحل
قمتُ ببناء تطبيق إدارة مهام بسيط باستخدام:
Next.js (App Router)
TypeScript
Tailwind CSS
التطبيق يسمح للمستخدم بـ:
إضافة مهمة بعنوان.
تعليم المهمة كمكتملة/غير مكتملة.
حذف أو تعديل المهام.
فلترة المهام (جميعها، المكتملة، غير المكتملة).
التخزين يتم في الذاكرة (In-memory Array) داخل app/api/tasks/route.ts. هذا مناسب جدًا لمهمة اختبارية قصيرة المدى، حيث لا يتطلب إعداد قاعدة بيانات. (لكن يمكن استبداله بسهولة بقاعدة بيانات مستقبلًا).
🗂 هيكل الكود project-root/ │ ├── app/ │ ├── layout.tsx # التخطيط العام للتطبيق + استدعاء CSS │ ├── page.tsx # الصفحة الرئيسية التي تعرض TaskApp │ └── api/ │ └── tasks/ │ └── route.ts # API Routes: GET, POST, PATCH, DELETE ├── globals.css # أنماط Tailwind العامة ├── components/ │ └── TaskApp.tsx # مكوّن رئيسي (Client Component) فيه الواجهة الكامل │ ├── tailwind.config.ts # إعداد Tailwind ├── tsconfig.json # إعداد TypeScript └── package.json
لماذا هذا التنظيم؟
فصل الواجهة عن المنطق: المكوّنات (components) خاصة بالـ UI، بينما الـ API Routes مسؤولة عن البيانات والتخزين. هذا يسهل استبدال الـ storage بقاعدة بيانات حقيقية مستقبلًا (مثل PostgreSQL أو MongoDB) دون تعديل الواجهة.
Next.js App Router: الاستفادة من تنظيم المجلدات الحديثة في Next.js حيث يتم التعامل مع app/api/... كـ API جاهزة.
TypeScript: يحسّن قابلية الصيانة، يقلّل الأخطاء، ويجعل التعاون مع فريق أكثر وضوحًا.
Tailwind CSS: لتصميم سريع ومرن، يعطي واجهة جميلة بدون كتابة CSS معقد.
كيف يعمل التخزين في الذاكرة
تم تعريف مصفوفة ثابتة TASKS داخل app/api/tasks/route.ts.
كل استدعاء API يتعامل مباشرة مع هذه المصفوفة:
GET → إرجاع جميع المهام.
POST → إضافة مهمة جديدة.
PATCH → تحديث حالة أو عنوان مهمة.
DELETE → حذف مهمة.
ملاحظة: هذا التخزين مؤقت. عند إعادة تشغيل الخادم، تُفقد جميع المهام. وهو مقبول جدًا لمهمة اختبارية.
نقاط تقنية مهمة
واجهة العميل (TaskApp) تستخدم fetch للتخاطب مع /api/tasks.
كل العمليات تتم عبر JSON.
أضفت ميزات إضافية (Bonus Features):
الحذف Delete
الفلترة Filter
التعديل Edit
تقسيم العمل لو كان فريقًا
(مع العلم أنني أنجزت المشروع بمفردي ، لكن هنا توضيح لكيفية تقسيم المهام لو كان فريق مكوّن من 2–3 مطورين).
فريق مكون من 3 مطورين:
المسؤول 1 — واجهة المستخدم (Frontend Lead)
تطوير مكوّن TaskApp.tsx.
تصميم تجربة المستخدم: إدخال المهام، عرض القائمة، أزرار الحالة والحذف.
الاهتمام بالـ UX (مثال: رسائل خطأ/تحميل).
المسؤول 2 — API وعمليات البيانات (Backend)
بناء app/api/tasks/route.ts.
تعريف الـ Endpoints (GET, POST, PATCH, DELETE).
اختبار الـ API باستخدام Postman أو curl.
المسؤول 3 — دمج وجودة (Integration & QA)
إعداد Tailwind و ESLint.
كتابة README-SOLUTION.md.
التأكد من عمل المشروع عبر npm run dev.
مسؤول عن Git، CI/CD لو احتجنا.
فريق مكون من شخصين:
شخص A: واجهة المستخدم + تجربة المستخدم.
شخص B: API + README + اختبارات.
كيف تشغّل المشروع محليًا
تثبيت المتطلبات:
npm install
تشغيل الخادم:
npm run dev
فتح التطبيق: على الرابط http://localhost:3000 .
استنتاج
الحل مبني بطريقة نظيفة وقابلة للتوسّع.
يمكن الانتقال لاحقًا إلى قاعدة بيانات حقيقية بدون أي تغييرات كبيرة في واجهة المستخدم.
المشروع يوازن بين البساطة (لتجربة سريعة) والمرونة (قابل للتوسيع مستقبلًا).