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

مشروع تطبيق ملاحظات PWA

تطبيق Next.js للملاحظات مع مصادقة ومحرر غني وقوائم ملاحظات وواجهة حساب ووضع داكن وتجربة متجاوبة.

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

تطبيق ملاحظات تقدمي PWA

صورة 1 من 8

فكرة المشروع

تطبيق ملاحظات شخصي مبني كـPWA حقيقي، مش بس واجهة شكلها زي تطبيق موبايل. المستخدم يقدر يكتب ملاحظات نصية أو يسجّل ملاحظات صوتية بإيقاف واستئناف، ويستخدم التطبيق أوفلاين بالكامل (قراءة وتعديل ومزامنة لاحقة) بفضل قاعدة بيانات محلية (Dexie) وservice worker حقيقي. كل جهاز بيتسجّل بشكل منفصل، وفيه نظام “ثقة” صريح بيحدد أنهي جهاز مسموحله يثبّت التطبيق أو يستقبل إشعارات.

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

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

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

لما اكتشفت إن الوقت بيظهر بأسماء شهور عربية حتى في وضع الواجهة الإنجليزية، رجعت للسبب: التنسيق كان بيعتمد على locale ثابت بدل اللغة الفعلية المختارة، فصلّحته يتبع لغة الواجهة الحقيقية. لما جيت أعبّي التطبيق ببيانات تجريبية، قررت أستورد موديلات Mongoose الحقيقية بدل إدخال بيانات خام مباشرة في القاعدة — عشان الـpre-save hook اللي بيرفض ملاحظة صوتية من غير صوت أو نصية فيها صوت يفضل شغّال، مش يتلف. وبما إن ربط الاشتراكات بالأجهزة في الموديل نفسه بيعتمد على deviceId نصي مش مرجع قاعدة بيانات مباشر، تأكدت يدويًا بعد كل تعبئة إن كل اشتراك مرتبط فعليًا بجهاز حقيقي تابع لنفس المستخدم.

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

Next.js App Router، MongoDB عبر Mongoose بأربع مجموعات (مستخدمين، ملاحظات، أجهزة، اشتراكات دفع)، طبقة repository عامة، ومصادقة JWT بـbcryptjs. الأوفلاين مبني على Dexie (IndexedDB) وservice worker عبر Serwist، مع طابور مزامنة وعمليات تفاؤلية (optimistic UI). الحذف المتسلسل للحساب بيستخدم معاملات MongoDB (transactions) لمنع فشل جزئي يسيب بيانات يتيمة.

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

المشروع ده بيوضح تنفيذ قدرات PWA حقيقية (عمل أوفلاين فعلي، مزامنة لاحقة، إشعارات push مرتبطة بجهاز محدد) بدل واجهة بتحاكي شكل تطبيق موبايل بس. كمان بيوضح تعامل دقيق مع بيانات تجريبية تحترم منطق التحقق الحقيقي للتطبيق بدل تجاوزه.

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