موقع اللياقة البدنية الشخصي

متتبع لياقة بدنية شخصي مجاني وبدون حساب، مبني باستخدام Next.js 15 و Tailwind CSS و Framer Motion و Recharts.

رابط العرض التجريبي

نظرة عامة

• الدور: مطور Full-Stack ومصمم UI/UX
• التقنيات: Next.js 15، TypeScript، Tailwind CSS v4، shadcn/ui، Framer Motion، Recharts، Vitest، Playwright
• النتيجة الرئيسية: بنية بيانات 100% بدون خادم (serverless)، خاصة من جانب العميل مع تكاليف إعداد قاعدة بيانات صفرية
• الملخص: منصة مجانية للياقة البدنية الشخصية بدون حساب تتميز بخطط تمارين مخصصة، أهداف السعرات الحرارية، تتبع التقدم، وتسجيل التغذية. تم إنشاؤها للاستخدام الشخصي لتجاوز الأدوات التجارية المكتظة، وتقوم بتخزين جميع البيانات بشكل صارم في التخزين المحلي (local storage) لمتصفح العميل دون الحاجة لإنشاء حساب.

المشكلة

• التحدي: تقوم منصات اللياقة البدنية التجارية بقفل ميزات التتبع الأساسية (مثل الأهداف اليومية المخصصة، وتفاصيل المغذيات الكبرى، وتسجيل التمارين) خلف اشتراكات باهظة الثمن.
• الجمهور المستهدف: تم بناؤه بشكل أساسي للاستخدام اليومي الشخصي للحصول على بديل نظيف ومحترم للخصوصية ومجاني تمامًا للمتتبعات التجارية.
• القيود: بدون قاعدة بيانات خلفية (backend)، تطلب تخزين الهياكل العلائقية مثل خطط التمارين، السجلات النشطة، والأطعمة المخصصة نظام موثوق لتسلسل البيانات (serialization) من جانب العميل.

النهج والقرارات

• البنية: نمط تطبيق الصفحة الواحدة (SPA) في React يعطي الأولوية للمحلي أولاً، بالاستفادة من Next.js App Router لإنشاء التخطيط الأولي من جانب الخادم وخطافات الحالة الديناميكية من جانب العميل.
• القرارات الرئيسية: توظيف 8 مفاتيح معزولة للتخزين المحلي في المتصفح لتكون كجداول مخطط علائقي فردية بدلاً من دمج قاعدة بيانات خارجية.
• المقايضات: التضحية بالمزامنة الأصلية عبر الأجهزة لصالح الخصوصية الكاملة والفورية وتكاليف الاستضافة الصفرية (مع بناء ميزة تصدير/استيراد JSON يدوية كبديل).
• تدفق البيانات: تفاعل المستخدم -> حالة خطاف React -> مزامنة التخزين المحلي (localStorage) -> تحديث تخطيط واجهة المستخدم الديناميكي وتصور Recharts.

النتائج الرئيسية والتأثير

• النتيجة: أداة يومية مخصصة بالكامل مصممة بدقة لتناسب سير عمل التمارين والتغذية الخاص بي.
• المقارنة: يتجنب جدران الدفع، عوائق التسجيل، وتكاليف الاشتراك المرتفعة للمتتبعات التجارية السائدة.
• التأثير: استبدل تمامًا متتبعات السعرات الحرارية والتمارين التجارية للاستخدام الشخصي اليومي، مع الاحتفاظ بجميع المقاييس الصحية محليًا بالكامل.

نظرة تقنية متعمقة

• تفاصيل بارزة: خطافات React مخصصة لتحليل البيانات المتسلسلة من التخزين المحلي بأمان لتجنب عدم تطابق العرض من جانب الخادم (SSR)/أخطاء الترطيب (hydration) في Next.js.
• التحقق: تم التحقق من تدفق واجهة المستخدم والتخطيطات المتجاوبة عبر أحجام إطارات العرض المختلفة باستخدام اختبار Playwright E2E.
• التحسينات: التحميل البطيء (Lazy loading) لوحدة المخططات الثقيلة Recharts للحفاظ على خفة حزمة الصفحة الأولية وضمان الحصول على درجات عالية في Google PageSpeed.
• جودة الكود: تجميع TypeScript في الوضع الصارم، استخدام أسماء مستعارة للوحدات النمطية بناءً على المسارات، وبنيات تخطيط معيارية.

التأملات

• بشكل مختلف: في إصدار مستقبلي، سأقوم بتنفيذ مزامنة بيانات نظير إلى نظير (P2P) باستخدام WebRTC للسماح بالمزامنة عبر الأجهزة دون تخزين المقاييس الشخصية على خادم جهة خارجية.
• النجاحات: تقديم لوحة تحكم جميلة ومتجاوبة بالسمة الداكنة باستخدام Tailwind v4 و shadcn/ui تبدو وكأنها تطبيق أصلي (native app).
• الدروس: تعميق الفهم في التعامل مع أنماط حالة المتصفح المستمرة واستراتيجيات ترحيل البيانات من جانب العميل عند تغير مخططات التخطيط.

مساهماتي

• تطوير Full-Stack: بناء استبيان التهيئة، حسابات الخطة المخصصة، تتبع سجل السعرات الحرارية، ونماذج إدخال التغذية المخصصة باستخدام Next.js 15.
• تصميم UI/UX: تصميم واجهة المستخدم بالسمة الداكنة، الشبكات المتجاوبة، بطاقات لوحة التحكم التفاعلية، ورسوم متحركة سلسة باستخدام Framer Motion.
• البنية والأداء: تصميم استراتيجية مفاتيح التخزين المحلي، مغلفات التحقق من صحة البيانات، وتحسين خطوط عرض المخططات.

بنية المشروع

يتبع هذا التطبيق بنية معيارية حديثة تركز على العميل مبنية على Next.js 15.

• الهيكل الطبقي: فصل منطق التتبع الخام (الخطافات المخصصة) عن مكونات العرض المرئية.
• وحدات الميزات: منظمة منطقيًا حسب الميزات مثل التهيئة، التمارين، تتبع التغذية، ومخططات التقدم.
• إدارة الحالة: تتم مزامنة خطافات حالة React تفاعليًا مع طبقة تخزين المتصفح باستخدام مغلفات مخصصة.
• إعادة الهيكلة والتحسينات: تنفيذ عمليات استيراد ديناميكية لمكتبات التخطيط الثقيلة لتحسين الأداء ومؤشرات الويب الحيوية الأساسية.

معاينة تجريبية

• عرض لوحة التحكم: نظرة عامة على السعرات الحرارية اليومية المتناولة، قائمة التحقق من خطة التمارين النشطة، ومخططات مرئية للتقدم الأسبوعي.
• مخطط التمارين: منشئ روتين مخصص ومحدد برامج.
• متتبع السعرات الحرارية: متتبع المغذيات الكبرى مع قائمة أطعمة مضافة بشكل مخصص.

ملاحظة الاستضافة:
تم نشر التطبيق الحي على Vercel وهو متاح للوصول إليه فوراً دون تسجيل الدخول على pfwfm.vercel.app.