Behind the scenes of StickyNoted
I've been using note-taking app like Google Keep, and enjoy it quite well until one day I'm thinking if it can support markdown syntax so that I can migrate my GitHub gists and code snippets there. So then I thought: What if I make my own note-taking app since it's also been a while that I made a product.
Before I setup the project on my machine, usually I do prototyping on StackBlitz for faster iteration. When I feel ok with the MVP, then I begin to setup the project on my machine.
I have created cra-hackathon repo just so that I can clone and start developing the MVP right away, it already includes Create React App base, Firebase setup, Sign-in and Landing pages, React hooks, etc.
Initially, I only focus on one thing: Users can create and edit note with simple markdown. Styling, layout, or storage mechanism can come later.
So in this case I need to look things in open-source space that can satisfies the requirement.
I used some of open-source libraries for this project:
- Drag and Drop: https://github.com/atlassian/react-beautiful-dnd
- Popup: https://www.npmjs.com/package/reactjs-popup
- Markdown: https://github.com/rexxars/react-markdown
- Color: https://casesandberg.github.io/react-color
I already used some of them during the prototyping phase and added some later during the MVP development.
Next, I need to think how user will add, edit and delete the note. The UI is really simple just for MVP sake.
Finally, the MVP is done in less than a day, but the fun part is not over yet!
Before I can launch to the public and call it beta, I had decided on some action items (in priority order):
- User can load and store the notes on Firestore
- Progressive Web Apps: Works offline
- Responsive layout based on media screen
- Styling and polishing
Load and store the notes on Firestore was pretty easy though, but offline mode is not that simple and very challenging:
- CRA already provided Service Worker that will caches your assets for offline usage, but the app is not offline ready by default
- You need to know which part of the feature that's really possible for user to use when offline
- You need to exclusively handle the data fetch and load data from cache when offline
- This cache is possible with
In this case, I think note-editing feature should be possible for offline mode because users should be able to access and edit the note even offline. So I tweak stuff so when offline, I can just fallback to last edited notes on cache. After online, we can do simple check last-edited on local with server, if local timestamp is newer, then we can save it to server.
For styling and responsive layout, I did many iterations until I feel satisfied so it takes a bit of time. I decided to use max 4 columns for large screen, 2 columns for tablet screen, and 1 column for phones. A little inspiration from Google Keep of course 😁.
To note, CRA already provided basic PWA setup, so your web should be installable on Android and iOS (Safari) with no issue (Just "add to homescreen" on the browser).
Known issue: Chrome on iOS doesn't support PWA or Service worker.
Finally, it's time for beta launch!
I also post on ProductHunt for better discovery and I'm very happy that it got featured!
Road to Production
I did many refactoring during post-beta launch to support Workspaces which enables private mode and public sharing workspace.
I missed SEO stuff so I fixed all the essential meta tags.
I also missed to lazy-load stuff but this can be done fast with @loadable/components. Anything that's not shown initially should be lazy-loaded.
Since CRA is set so that all pages can be opened when offline, some pages functionality doesn't work as intended like updating username, deleting workspace, etc. I put some offline notice to the feature so that user's aware that they're offline and set their expectation for things might not work as expected.
- Prototyping can be fast using Stackblitz (trying 3rd party libraties)
- Firebase is good for MVP (Auth, Database, Storage, and more)
- Netlify is good for simple deployment and domain management
- PWA can improve mobile user engagements
- Offline mode is cool but focus on most impactful feature and where it makes sense
- Let user know when they're offline
- Product discovery is very important (think SEO, social media links)
This is StickyNoted today:
Thanks for reading this far, and I hope it's insightful for you, see you on the next blog.