PWA Notes App Project

Project Concept

A personal notes application built as a genuine Progressive Web App — not just a mobile-styled web interface. Users can write text notes or record voice notes with pause/resume, and use the app fully offline (reading, editing, and later syncing) through a local database (Dexie) and a real service worker. Each device is registered separately, with an explicit trust system controlling which devices are allowed to install the app or receive push notifications.

What the Interface Shows

The gallery covers the notes list across all four combinations (dark/light × Arabic/English), a text note detail and a voice note detail with a real audio player, and a long profile page with trusted-device management, push notification status, and password change.

My Role and Decisions

When I found that times displayed Arabic month names even in English UI mode, I traced it back to a hardcoded locale in the formatting logic instead of the actual selected interface language, and fixed it to follow the real active locale. When populating the app with sample data, I chose to import the actual Mongoose models rather than inserting raw documents directly — so the pre-save hook that rejects a voice note without audio (or a text note with audio) would stay enforced, not bypassed. And since the subscription-to-device link in the schema itself uses a string deviceId rather than a direct database reference, I manually verified after every seeding pass that each subscription actually points to a real device belonging to the same user.

Technical Aspects

Next.js App Router, MongoDB via Mongoose across four collections (users, notes, devices, push subscriptions), a generic repository layer, and JWT authentication with bcryptjs. Offline support is built on Dexie (IndexedDB) and a service worker via Serwist, with a sync queue and optimistic UI updates. Cascading account deletion uses MongoDB transactions to prevent a partial failure from leaving orphaned data.

Project Value in the Portfolio

This project demonstrates implementing real PWA capabilities (genuine offline operation, deferred sync, device-specific push notifications) rather than an interface that only imitates a mobile app’s look. It also shows careful handling of sample data that respects the app’s real validation logic instead of bypassing it.