meal planner
تفاصيل العمل
تم تنفيذ مشروع Meal Planner باستخدام مجموعة من التقنيات الحديثة لضمان أداء سريع وتجربة استخدام سلسة وواجهة تفاعلية متجاوبة. يهدف التطبيق إلى تنظيم الوجبات والوصفات وإنشاء خطط أسبوعية مع إمكانية توليد قوائم تسوق تلقائيًا.
التقنيات المستخدمة
Front-End
Angular (الإصدار الحديث) لهيكلة المشروع واعتماد مكوّنات قابلة لإعادة الاستخدام
TypeScript لضمان كتابة كود منظم، قوي، وسهل الصيانة
SCSS لتنسيق الواجهة بأسلوب احترافي ودعم التصميم المتجاوب
HTML5 لبناء الهيكل العام لصفحات التطبيق
Angular Routing لإدارة التنقل بين صفحات المشروع
Reactive Forms لمعالجة البيانات والتحقق من الحقول
Angular Services لإدارة المنطق وتبادل البيانات بين المكونات
UI & UX
تصميم متجاوب بنسبة 100% (Mobile – Tablet – Desktop)
استخدام Grid & Flexbox لتوزيع العناصر بشكل سلس
اعتماد ألوان هادئة وواجهة بسيطة تساعد على سهولة الاستخدام
تحسين تجربة الاستخدام من خلال تنظيم الصفحات وتبسيط إضافة الوصفات والوجبات
️ الوظائف التقنية داخل المشروع
إمكانية إضافة وصفات جديدة مع حفظ المكونات والوقت والطريقة
إنشاء خطة وجبات أسبوعية بشكل مرن
توليد قائمة تسوق تلقائية بناء على الوجبات المخططة
واجهة تفاعلية تعتمد على Two-way Data Binding بين المكونات
تخزين بيانات المستخدم بطريقة منظمة (Local Storage أو Services حسب النسخة)
تحديث الواجهة بشكل فوري اعتمادًا على Observables
الأداء وتجربة المستخدم
تحسين تحميل الصفحات وتخفيف حجم الملفات
اختبار الواجهة على مختلف الأجهزة لضمان تناسق التصميم
كتابة كود نظيف، منظم وسهل التعديل مستقبلاً
النشر (Deployment)
تم نشر النسخة النهائية عبر Vercel
إعداد Build Production محسّن
دعم كامل للويب الحديث (HTTPS – SEO الأساسي – سرعة تحميل ممتازة)
? دورى في المشروع
تصميم الواجهة كاملة من الصفر
بناء الهيكل البرمجي باستخدام Angular
تطوير جميع الصفحات التفاعلية والوظائف
تنفيذ التصميم المتجاوب
اختبار النسخة النهائية
نشر المشروع على Vercel