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

صورة 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 مرتبطة بجهاز محدد) بدل واجهة بتحاكي شكل تطبيق موبايل بس. كمان بيوضح تعامل دقيق مع بيانات تجريبية تحترم منطق التحقق الحقيقي للتطبيق بدل تجاوزه.
أعمال ذات صلة
تطبيق مشاركة صور اجتماعي
منصة اجتماعية لمشاركة الصور بموجز عام وإعجابات، بوضعين داكن وفاتح، مبنية بـ Next.js وMongoDB وCloudinary لتخزين الصور.
اقرأ المزيدمنصة حجز فعاليات
منصة حجز فعاليات بواجهة GraphQL، بحث وتصفح وحجز وإلغاء، وأحداث لحظية عبر GraphQL Subscriptions.
اقرأ المزيدتطبيق تعلم الإنجليزية بالذكاء الاصطناعي
مساعد تعلّم إنجليزية بالذكاء الاصطناعي لمتعلمين عرب، بدروس وأسئلة وترجمة وتدريب نطق، بدون حسابات أو تخزين دائم.
اقرأ المزيدخدمات ذات صلة
تطوير تطبيقات ويب تقدمية PWA
تجارب ويب قريبة من التطبيقات مع شاشات متجاوبة وقابلية تثبيت عند الحاجة وأساسيات أداء وسلوك يراعي الاتصال المحدود.
تطوير تطبيقات ويب متكاملة
تطبيقات ويب متكاملة تربط واجهات متجاوبة وAPIs ومصادقة وقواعد بيانات داخل تدفقات منتج عملية.











