I often read or hear something that resonates with me - something that I want to remember. This might be a quote or music lyric or thought-provoking factoid. Unfortunately, I usually forget it anyway.

So years ago I started writing down these snippets. At first I wrote them on an A6 notepad I kept in my bag. Later this was replaced by my smartphone. The full set of notes now lives in an Excel spreadsheet with a few thousand rows. I tried a number of note-taking apps, but a common problem was that these apps were not intended for storing and searching large numbers of records.

Periodically I search through my Excel spreadsheet and reminisce all the funny encounters and anecdotes I'd forgotten. These are stories I do not want to forget. I found that reading all of those things I previously found funny and thought-provoking was itself funny and thought-provoking. I heartily recommend this exercise to anyone!

So this leads me to my goal: to create an app intended for recording a lifetime's worth of stories, encounters, anecdotes, thoughts and factoids. But furthermore, an app which allows and encourages revisiting those records again and again. And this requires that entries are categorised, filterable and searchable.

So, what do I mean by categorise? A category can be any label. Common ones in my A6 notepad were "food for thought" (a collection of random thoughts, quotes, factoids), "interesting people" (a list of interesting people I'd met), "books I've read" (a list of ... books I had read!). Importantly, categories must be consistent or else they become a hindrance. A good note-taking app should help you to keep them consistent.

Okay then, so what do I mean by search? I usually recall information in bits and pieces. For example, I recently recalled "what's that quote that I love from the final page of the Great Gatsby?", or "what were the main points from Thomas Piketty's TED talk?". It is easy to Ctrl-F these search terms in my Excel spreadsheet - but a good note-taking process cannot rely on me getting back to my computer to check or update my spreadsheet!

A good note-taking app must be able to: i) perform fuzzy search (e.g. what if I misspelled Piketty?); ii) search by date (e.g. what if I can't remember the details, but I know I wrote a note about it in 2016?); and iii) perform real-time full-text search in a web-browser (I want my notes to filter as I type, and I won't accept using Excel anymore!).

In this hobby project, I will build my dream note-taking application. I will be using React.js, Express.js and the Draft.js richtext editor.

Outline of requirements:

1. Social authentication with Google and Facebook; or cookie-authentication for anonymous users
2. Support for full rich text editing, including: inline styles, block styles, code blocks, images, videos and hyperlinks. I don't want to store user-submitted content as HTML, because I want this app to be future-proof for mobile development
3. Ability to categorise notes using its title and tags. Visually, notes with the same title should stack together
4. Ability to change the display order of notes by drag'n'drop
5. Ability to 'star' and 'share' notes

That's it! Should be easy ;-)

The first step is creating a wire frame. Here's what I'm thinking so far. As always, simplicity is the name of the game.

The main screen will list all notes, categorised by `Title`. So you can think of the Title as the main form of categorisation. When entering the Title, auto-suggest will help choosing matching Titles (so you don't end up with several almost-same Title categories).

Cards are orderable. Furthermore, within each card, notes are orderable. A row for 'Starred' cards is reserved at the top of the screen. All other cards appear below, in order of recency.

The 'edit form' modal pops up when the user clicks 'New note' or when they click an existing note. Here you can enter additional tags, edit content, and access additional options like 'delete' and 'starred'. The app will sync data with the server instantaneously, so the 'Save' button is simply for a clearer UX.

There will of course also be screens for Signup and Login, as well as a user settings drop-down which trigger some modals (when clicking on User icon in top-right). But these will be stock standard, so I'm not going to wireframe them.

And that's all for Part 1. I'll be working away at this hobby project over the coming weeks. Stay tuned!