Expense Tracker

Expense Tracker هو تطبيق ويب تفاعلي مبتكر تم تطويره باستخدام مكتبة React لتقديم تجربة سلسة وبسيطة في تتبع المصاريف والإدارة المالية الشخصية. يهدف الموقع إلى تمكين المستخدم من تسجيل معاملاته المالية اليومية بكل سهولة ومتابعة حركة الأموال بدقة، الأمر الذي يساعده على التحكم في ميزانيته واتخاذ قرارات مالية أكثر وعيًا.

يعتمد الموقع على واجهة استخدام عصرية ومريحة تم تصميمها باستخدام Tailwind CSS لضمان مظهر احترافي متجاوب مع جميع أحجام الشاشات سواء على الهواتف أو الأجهزة اللوحية أو الحواسيب. كما يستفيد من تقنيات JavaScript وخواص React الحديثة لتوفير تجربة سريعة وفعّالة دون إعادة تحميل الصفحة.

يوفر التطبيق مجموعة من الخصائص الأساسية التي تلبي احتياجات المستخدم الفردية، من أهمها:

• إضافة معاملة مالية جديدة سواء كانت دخلاً أو مصروفًا عبر نموذج سهل الاستخدام

• تمييز الدخل باللون الأخضر والمصروفات باللون الأحمر لسهولة التمييز البصري

• عرض سجل كامل بجميع المعاملات مع إمكانية حذف أي معاملة عند الحاجة

• حساب الرصيد الإجمالي بشكل لحظي بناءً على جميع عمليات المستخدم

• حفظ بيانات المستخدم مباشرة داخل المتصفح LocalStorage حتى لا يفقد سجله عند إعادة تحميل الصفحة

يتم إدارة البيانات داخل التطبيق من خلال Context API وuseReducer لضمان تنظيم احترافي للبيانات وسهولة تطوير الميزات لاحقًا. وبما أن التطبيق يعمل بدون أي خادم Backend، فإنه يقدم أداءً عاليًا وخصوصية كاملة لجميع المستخدمين، مما يجعله مثالياً للاستعمال الشخصي اليومي.

تم تجهيز الموقع بأساسيات دعم تعدد اللغات، وهو ما يتيح إمكانية توسيعه مستقبلاً ليخدم المستخدم العربي أو التركي أو أي لغة أخرى بكل سهولة.

Expense Tracker يجسد مزيجًا من البساطة التقنية والتصميم الواضح، ويقدم للمستخدم أداة فعّالة لإدارة مصروفاته دون تعقيد، مع إمكانية تطويره مستقبلًا لإضافة ميزات أكثر تقدماً مثل ربطه بقاعدة بيانات، إنشاء حسابات للمستخدمين، أو مشاركة الخطط المالية ضمن مجتمع تفاعلي.

GitHub: https://github.com/Muhamm...

Expense Tracker is an innovative and interactive web application built using React to deliver a smooth and simple experience in managing personal finances and tracking expenses. The goal of the site is to empower users to easily record their daily financial transactions and accurately monitor their cash flow, helping them take better control of their budget and make more informed financial decisions.

The application features a modern and user-friendly interface designed with Tailwind CSS to ensure a clean, responsive, and professional look across all screen sizes, whether on mobile, tablets, or desktops. It also leverages JavaScript and modern React capabilities to provide a fast and efficient user experience without any page reloads.

The core set of features offered includes:

• Add new financial transactions, whether income or expense, through an easy-to-use form

• Color-coded display: green for income and red for expenses for clear visual distinction

• A complete transaction history with the ability to delete entries as needed

• Real-time calculation of total balance based on user transactions

• Automatic data persistence through browser LocalStorage, ensuring users never lose their records upon page refresh

Data management is handled using Context API and useReducer for clean state organization and scalable feature development. Since the app operates fully client-side without a backend, it offers high performance and full privacy, making it ideal for personal everyday use.

The application is also structured with basic internationalization support, enabling easy future expansion to different languages such as Arabic, Turkish, or others.

Expense Tracker combines technical simplicity with a clear design, providing users with a powerful tool to manage their finances without complexity. It is also ready for future enhancements, such as integrating a database, enabling user accounts, or sharing financial plans within a social or collaborative environment.

GitHub: https://github.com/Muhamm...