Budget & Expense Tracker

إليك وصف احترافي وشامل للمشروع الأول الذي أنشأته، يمكنك استخدامه كـ وصف في سيرتك الذاتية (CV)، أو ملف الـ README على GitHub، أو لتقديمه في معرض أعمالك (Portfolio):

📌 الاسم المقترح للمشروع:

Smart Budget & Expense Tracker with Savings Vault

(متتبع المصاريف والميزانية الذكي مع محفظة ادخار)

📝 الوصف العام (Overview):

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

✨ أبرز الميزات التقنية والوظيفية (Key Features):

إدارة المعاملات المالية (Financial Transactions CRUD):

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

التمييز التلقائي بين حركات الدخل (Income) والمصروفات (Expense).

إمكانية حذف المعاملات مع إعادة احتساب الأرصدة تلقائياً.

محفظة الادخار الذكية (Savings Vault / Wallet):

إيداع المتبقي من الرصيد بالكامل بضغطة زر واحدة، أو إيداع مبالغ مخصصة.

إمكانية السحب الجزئي أو تصفير المحفظة (Clear Wallet) وإرجاع الأموال إلى الحساب الجاري.

خصم المبالغ المودعة تلقائياً من الرصيد الجاري وتسجيلها كحركة ادخار في سجل العمليات.

التمثيل البياني والإحصائيات التفاعلية (Data Visualization):

رسم بياني دائري (Donut Chart) يوضح نسب توزيع المصاريف حسب الفئات والألوان المخصصة.

رسم بياني شريطي (Bar Chart) للمقارنة السريعة بين إجمالي الدخل وإجمالي المصروف.

إدارة الحالة والتخزين المحلي (State Management & Persistence):

استخدام React Context API لتوحيد ومشاركة البيانات بين جميع المكونات بسلاسة.

حفظ جميع البيانات والعمليات ورصيد المحفظة في LocalStorage لضمان بقائها حتى بعد إعادة تحميل الصفحة.

🛠️ الحزمة التقنية المستخدمة (Tech Stack):

Frontend Library: React.js (Hooks: useState, useEffect, useContext)

State Management: React Context API

Data Visualization: Recharts

Storage: Browser LocalStorage API