متتبع المصاريف الشخصية

نظرة عامة على المشروع: متتبع المصاريف الشخصية

هذا المشروع هو تطبيق ويب تفاعلي ومتجاوب لإدارة المصاريف الشخصية (Personal Finance Tracker)، تم تصميمه لمساعدة المستخدمين على تتبع وإدارة دخلهم ومصروفاتهم اليومية بسهولة. يعتمد التطبيق على تقنيات حديثة ويوفر عرضًا لحظيًا للبيانات مع إمكانية حفظها بشكل دائم، مما يساعد المستخدم على مراقبة حالته المالية واتخاذ قرارات أفضل.

? المميزات الرئيسية

تحديث الرصيد بشكل فوري:

يتم حساب وعرض الرصيد الحالي، إجمالي الدخل، وإجمالي المصروفات تلقائيًا عند إضافة أو حذف أي عملية.

عرض بياني تفاعلي:

يحتوي على مخطط دائري (Doughnut Chart) ديناميكي باستخدام مكتبة Chart.js لعرض تصنيفات المصروفات بشكل واضح وسريع.

إدارة العمليات المالية:

يمكن للمستخدم إضافة معاملات جديدة تشمل الوصف، القيمة، والتصنيف (مثل: الطعام، السكن، المواصلات، الترفيه).

حفظ البيانات:

يستخدم خاصية Local Storage لضمان بقاء البيانات محفوظة حتى بعد إغلاق المتصفح أو تحديث الصفحة.

مؤشرات بصرية:

يتم تمييز العمليات بالألوان:

الأخضر للدخل

الأحمر للمصروفات

لتسهيل التمييز السريع.

?️ البنية التقنية

تم بناء التطبيق باستخدام هيكل بسيط وفعال من تقنيات الواجهة الأمامية:

HTML5: لإنشاء هيكل منظم لواجهة المستخدم ولوحة التحكم.

CSS3: تصميم احترافي بسيط باستخدام خط Segoe UI مع تأثيرات بصرية مثل الظلال والتحركات (Hover Effects).

JavaScript (ES6+): مسؤول عن المنطق البرمجي، التفاعل مع الصفحة، العمليات الحسابية، وربط مكتبة Chart.js.

? واجهة المستخدم وسهولة الاستخدام

تم تصميم الواجهة بأسلوب بسيط يركز على تجربة المستخدم:

لوحة التحكم الرئيسية: تعرض الرصيد الحالي بشكل واضح في أعلى الصفحة.

تصنيفات منظمة: قائمة منسدلة تتيح اختيار الفئة المناسبة من بين عدة تصنيفات لتقارير مالية أدق.

حذف بنقرة واحدة: إمكانية حذف أي عملية بسهولة لإدارة السجل وتصحيح الأخطاء.

تصميم متجاوب: يعمل التطبيق بكفاءة على جميع الأجهزة (كمبيوتر، تابلت، موبايل).

? هدف المشروع

الهدف الأساسي من هذا المشروع هو إنشاء أداة عملية تُظهر مهارات في:

إدارة الحالة (State Management) بشكل ديناميكي

تخزين البيانات على جانب المستخدم (Client-Side Storage)

بناء تطبيقات واقعية تساعد على تحسين الوعي المالي وإدارة الميزانية الشخصية