The Opportunity
I have been using my note-taking app v2 Palace App extensively, and I have identified several areas for improvement:
- Offline Access: Unable to access notes without the internet.
- Authentication: Simple module prompts need for a secure library.
- Notes Organization: Tags for grouping notes criticized; prefers adding notes as children.
- Payment Issue: Forgot server payment for a month, regained access after settling payment and rerunning containers.
The design - Part 1
I tried to follow the same principles but decided on Google authentication and a graph representation for notes, allowing the creation of child notes. However, in trying to optimize graph node positioning, I overlooked simplicity principles (KISS, YAGNI, MVP). Keen to use the app soon, I experimented with rendering using HTML, SVGs, Canvas, WebGL, and Three.js, but struggled to draw the graph efficiently. 😞
The design - Part 2
Considering WebGl/WebGPU was time-consuming. While following the MVP approach and seeking a better way to display notes in a tree structure, new concerns came up:
How to avoid server costs? Forgetting server payments could lead containers removed from server, impacting both me and other users. Preferring long-term simplicity, I found a way to save notes on browser, I used IndexDB.
The advantages:
- Users is responsible for his notes
- Notes are accessible offline
- Server expenses are eliminated So, the app doesn’t rely on APIs, databases, or authentication. It’s a decentralized note-taking app 🎉, that prompted a new logo.
Finally I express that ideas into a new design
The Implementation in Frontend
With the recent simplifications in the repository, I created a new one. I adopted clean architecture, similar to the Palace app. I persistently followed functional programming principles and clean code rules to maintain simplicity. This involved writing pure functions, documenting components with Storybook, and structuring them with Atomic Design.
Next, I configured my Progressive Web App (PWA) for universal installation across devices. Finally, I implemented the option to export and import notes.
Finally some words…
As a user and developer, I am pleased with my note-taking app v3 (Royal Palace). While I have numerous ideas for improvement, the MVP is functioning well. In fact, I have already taken over 184 notes. When I need my notes on my mobile, I import them from the desktop.