تخطي إلى المحتوى
العودة إلى الأعمال

مشروع تطبيق تتبع المصروفات

تطبيق Next.js لتتبع المصروفات مع مصادقة ومعاملات ولوحة ملخصات وسجل وشاشات متجاوبة مدعومة بـ MongoDB.

عارض صور المشروع

تطبيق تتبع المصروفات

صورة 1 من 8

فكرة المشروع

تطبيق ويب لإدارة المصروفات الشخصية، بيسمح بتسجيل حساب، تسجيل دخول، وتسجيل معاملات مالية باسم ومبلغ وتاريخ لكل مستخدم على حدة — كل مستخدم يشوف ويعدّل ويحذف معاملاته هو بس، مفيش أي تداخل بين الحسابات. الرصيد الكلي بيُحسب كمجموع حسابي للمبالغ كلها: المبالغ الموجبة دخل، والسالبة مصروف.

ما الذي تعرضه الواجهة

المعرض بيوضح لوحة التحكم بالإنجليزي والعربي (نفس البيانات، واجهة مختلفة الاتجاه بالكامل RTL/LTR)، بملخص رصيد ودخل ومصروفات ملوّن (أخضر للدخل، أحمر للمصروف)، مع نموذج إضافة معاملة وقائمة تاريخ فيها أزرار حذف. شاشتي تسجيل الدخول والتسجيل بتصميم موحّد بتقسيم النص/الصورة (illustration مالي على الجنب) وبطاقة نموذج مرفوعة بالظل.

دوري وقراراتي

لما اكتشفت سر JWT حقيقي متسرّب في تاريخ Git، قررت أعيد كتابة التاريخ بالكامل بدل إضافة commit حذف بس — لأن الحذف وحده كان هيسيب السر ظاهر في الالتزامات القديمة. أول محاولة فشلت لأن السر اتكتب في قاعدة بيانات Git الجديدة أثناء عملية checkout قبل الحذف، فغيّرت الأسلوب لتصدير الشجرة برّه Git وتنظيفها الأول وبعدين إضافتها. لما فحصت ثغرات الاعتماديات، لقيت ثغرة في مكتبة Sharp (تابعة لـNext.js) بدون تحديث آمن متاح — بدل ما أنتظر أو أتجاهلها، فحصت هل التطبيق فعليًا بيعالج أي صور من مستخدمين، ولقيت إن الاستخدام الوحيد لـnext/image هو صورتين ثابتتين، فقبلت الاستثناء موثّقًا بدل الترقية الخطرة. وثبّت إصدار Node.js على 24.x عشان يفضل ضمن نطاق الدعم الرسمي لـNext.js 16 على Heroku.

الجوانب التقنية

Next.js App Router موحّد (واجهة وAPI في نفس التطبيق)، MongoDB عبر Mongoose بموديلين (مستخدم ومعاملة، مربوطين بمرجع وفهرس على userId)، مصادقة JWT بخوارزمية HS256 عبر jose، وتشفير كلمات مرور بـbcrypt. خط النشر (GitHub Actions) بيشغّل قاعدة بيانات MongoDB معزولة للاختبارات، وبيربط النشر على Heroku بنجاح بوابة الجودة (فحص الاعتماديات، Lint، الاختبارات، البناء). صورة Docker منفصلة بتحزم التطبيق مع MongoDB محلي في صورة واحدة، بتبدأ بقاعدة بيانات فاضية.

قيمة المشروع داخل المعرض

المشروع ده بيوضح دورة استجابة حقيقية لمشكلة أمنية (اكتشاف سر مسرّب، فشل أول محاولة إصلاح، تصحيح المنهج)، مش مجرد سرد “عملنا كذا وخلاص”. كمان بيوضح قرار مبني على دليل فعلي (قبول ثغرة بعد التحقق من عدم وجود مسار استغلال حقيقي) بدل قرار افتراضي.

عرض أعمال أكثر
عرض خدمات أكثر