كل الشغل
لوجو دفترك

دراسة حالة · 2026

دفترك.

دفتر حسابات عربي على الموبايل للبيت والشغل. اتبنى عشان يجاوب سؤال واحد بيتسأل في بيوت ومحلات كتير آخر كل شهر: «فلوسك راحت فين؟»

دوري
المنتج كله: الفكرة، التصميم، الكود، والنشر
النوع
تطبيق ويب بيتثبّت على الموبايل (PWA)
السنة
2026
الحالة
لايف على dafterk.com ↗
صفحة الهبوط بتاعة دفترك على الكمبيوتر: «فلوسك راحت فين؟ اعرف في أي وقت» وجنبها رسمة الفوضى اللي بتتحوّل لموبايل منظّم
صفحة الهبوط زي ما هي لايف على dafterk.com
5ثواني بالكتير عشان تسجّل عملية
3لمسات بس من الفتح للحفظ
2دفاتر: البيت والشغل
3لغات: عربي، إنجليزي، صيني

أول رقمين أهداف اتكتبت في ورقة المنتج قبل أي سطر كود، والتصميم كله اتبنى عليها.

01

المشكلة

صاحب المحل الصغير بيكتب في كشكول بيضيع، أو مابيكتبش خالص وبيعتمد على ذاكرته. واللي بيدير مصروف البيت بيلاقي الشهر خلص قبل ما يعرف الفلوس راحت فين.

والتطبيقات الموجودة يا إما إنجليزي، يا إما مليانة مصطلحات محاسبة، يا إما مش متعودة على الجنيه وطرق الدفع في مصر.

فالهدف كان بسيط ومحدد: تسجيل أي عملية في أقل من 5 ثواني، وشاشة واحدة تقولك دخلك كام، صرفت كام، وفاضل معاك كام.

02

لمين؟

دفتر الشغل

لصاحب المحل أو الشغل الحر. محتاج يعرف كسب ولا خسر الشهر ده، ويطلّع تقرير يوريه لشريك أو محاسب.

دفتر البيت

للي بيدير مصروف البيت. محتاج ميزانية شهرية لكل بند، وتنبيه قبل ما يعدّي الحد مش بعده.

الفرق بين الاتنين في نوع الدفتر، مش في مين بيستخدمه. والباقة البريميوم بتشغّل الدفترين من نفس الحساب.

03

الحل

الشاشات من نموذج التصميم ببيانات تجريبية.

  • زر واحد عائمالمبلغ، الفئة، خلاص. وآخر فئة استخدمتها بتظهر الأول.
  • تذكيرات يوميةإشعارات Push بتوصل والتطبيق مقفول، في الأوقات اللي تختارها.
  • تنبيهات الميزانيةجرس بيعدّ البنود اللي قرّبت من الحد أو عدّته.
  • بيتثبّت كتطبيقعلى أندرويد وآيفون من غير متجر، بأيقونة على الشاشة الرئيسية.
04

قرارات التصميم

الشكل مستوحى من الكشكول اللي الناس متعودة عليه: ورق دافي، حبر أخضر غامق، ولمسة نحاسية واحدة. مفيش ظلال غير على زر «+» — عشان يبقى هو الحاجة الوحيدة اللي طالعة من الصفحة.

ورق#ede7d9
سطح#f5f0e4
حبر#1c2b22
نحاس#a6772c
دخل#3f6b4a
مصروف#a23e3e
العناوينNoto Serif Arabic فلوسك راحت فين؟
النصوصCairo سجّل دخلك ومصروفك بلمسة
الأرقام — شمال لليمين جوّه RTLIBM Plex Mono +12,000  −3,570
  • الدخل والمصروف عمرهم ما بيتميّزوا باللون بس: لون + إشارة + كلمة، زي +12,000 دخل و−3,570 مصروف — عشان اللي عنده عمى ألوان يقرا نفس المعلومة.
  • أقل مساحة لمس 48px، وخطوط رفيعة بدل الظلال عشان الشاشة تفضل هادية.
  • لوحة الأرقام من الشمال لليمين زي الآلة الحاسبة، حتى جوّه واجهة عربي.
  • وضع داكن متطابق بنفس أدوار الألوان، مش ألوان مقلوبة وخلاص.
  • اتجرّب على عرض 320px بأطول أسماء وأرقام، بالعربي والإنجليزي والصيني.
05

تحت الغطاء

Next.js 16 · TypeScriptالواجهة والسيرفر في مشروع واحد.
Supabase · Postgresقاعدة البيانات، والدخول بجوجل، وصلاحيات على مستوى كل صف.
Cloudflare Workersالاستضافة قريبة من المستخدم، عن طريق OpenNext.
Paymob · Kashierدفع مصري للاشتراكات، والمزوّد بيتغيّر بإعداد واحد.
Web Push · Edge Functionsالتذكيرات بتتبعت من السيرفر كل ربع ساعة بتوقيت كل مستخدم.
GitHub Actionsباك أب يومي مشفّر لقاعدة البيانات.
  • كل جدول مقفول على صاحبه (RLS): مستخدم مايقدرش يشوف عمليات حد تاني، حتى لو لعب في الطلبات.
  • السعر وحالة الاشتراك بيتقرّوا من السيرفر بس، وإشعار الدفع بيتأكد من التوقيع قبل ما يفعّل أي اشتراك.
  • حدود على محاولات الدفع وعلى حجم بيانات كل مستخدم، وحماية من البوتات في صفحات الدخول.
  • بيئة تجربة منفصلة عن الإنتاج، واختبار حِمل قبل الإطلاق، وباك أب اتجرّب استرجاعه فعلًا.
06

اللي اتعلمته

  1. 01 الحماية مكانها السيرفر.

    زرار مستخبي في الواجهة ده تجربة مستخدم، مش أمان. أي قرار فيه فلوس أو صلاحيات بيتاخد من السيرفر.

  2. 02 اكتب الخطة الأول.

    ورقة منتج واضحة فيها الأولويات والباقات خلّت كل قرار بعد كده أسهل وأسرع.

  3. 03 اختبر على أسوأ حالة.

    موبايل عرضه 320px، واسم فئة طويل، ورقم كبير — لو الشاشة استحملت ده، هتستحمل أي حاجة.

عندك فكرة محتاجة نفس الرحلة دي؟

من ورقة المتطلبات لحد منتج لايف ومتاح للناس — خلّينا نتكلم.