A beautifully crafted, offline-first Note-Taking Progressive Web Application.
Capture your thoughts, images, and voice instantly — anywhere, anytime.
|
|
This application isn't just a simple to-do list; it's a fully-fledged multimedia PWA engineered for a seamless user experience.
- True PWA Experience: Installable on iOS, Android, macOS, and Windows. Works 100% offline using Service Workers.
- Local-First Database: Blazing fast data storage using IndexedDB (via Dexie.js). Your data stays on your device.
- Voice Memos: Integrated Native
MediaRecorderAPI. Record thoughts directly from your microphone with real-time audio chunking. - Image Attachments: Upload and attach local images directly to your notes via Base64 encoding.
- Glassmorphism UI: A stunning, modern, frosted-glass interface built with Angular Material and custom SCSS.
- Theming & Categories: Group notes by themes, pick custom Material Icons for each category, and filter your workspace.
- Smart Sorting: Pin important notes to the top. Sort alphabetically, by theme, or by modification date.
| Technology | Description |
|---|---|
| Angular (Standalone) | The core frontend framework utilized for building a reactive, component-based UI. |
| Angular Material | Provides high-quality UI components (Dialogs, Snackbars, Sidenav, Icons). |
| Dexie.js | A minimalist wrapper for IndexedDB to handle complex local database queries. |
| Moment.js | For clean and readable timestamp and date parsing. |
| UUID | Generates secure, unique identifiers for local records. |
| Web API | Uses MediaRecorder for audio and FileReader for image processing. |
Want to run this project locally? Follow these simple steps:
Make sure you have Node.js and the Angular CLI installed.
npm install -g @angular/cli
- Clone the repository:
git clone https://github.com/23Benji/pwa-notes.git
cd pwa-notes
- Install dependencies:
npm install
- Run the development server:
ng serve
Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.
Service workers don't run on the standard Angular dev server. To test PWA installation and offline capabilities:
npm run build
npx http-server -p 8080 -c-1 dist/pwa-notes/browser
Navigate to http://localhost:8080/ to install the app locally!
The app uses an offline-first approach with IndexedDB. The schema is configured as follows:
- Notes Table:
id, title, [theme.description+title], theme.id, [modificationDate+creationDate] - Themes Table:
id, &description(Unique index on description)
This allows complex, lightning-fast sorting algorithms right inside the browser without needing an external backend.
Built with ❤️ by 23Benji If you like this project, please consider giving it a ⭐ on GitHub!
This project is open-source and available under the MIT License. Feel free to use, modify, and distribute this application for personal or educational purposes.