How I built a notetaking app that generated 4000+ notes in 10 hours

Figma Config is one of the largest design conference in the world, hosting 15,000+ people. There are so many sessions with much wisdom shared by the best designers in the world. I wonder if we can pull all these wisdom together…

10 hours of coding later, I built Config Notes, a way to take notes for each session and share them with others inside and outside of the conference.

Over the 2-day conference, over 4,000 session notes were created, and over 13k read and writes on the shared notes. And the reception is amazing!

Here’s how I built it in 10 hours…

Why did I build this?

I ask myself at the beginning, “Why not just use Notion?”

As I build this out, the reasons start to become obvious

1. I don’t want to switch between my browser (where I constantly check the schedule of the conference) and Notion

2. Notion (or other full-fledge note-taking apps) starts up really slow, making me miss some key moments

3. I am not comfortable sharing my Notion pages with others, because I might make edits later on

Those reasons formed a product requirement of what I need to build for Config Notes

1. It has to live on the Config conference schedule

2. Time-to-first-word on the notes needs to be fast

3. Instantly sharable, but also ephemeral, and lives outside of our personal apps

A note editor, for every session, for every person

The note-taking experience is powered by an open-source version of Notion built by Steven. But his version is a single-instance editor, meaning that every time you open the note editor, it is the same instance of the editor. Other people also can see your notes.

But everyone at Config goes to different sessions, and has different takeaways. How do I make the note editor unique for each user, at each session?

The way to tackle this problem is to utilize the dynamic routing of NextJS. Each time a person creates a note for a session, it will create a new ID of that session for that person. Then it will redirect to a dynamic route /notes/[note ID] , where it houses a note editor for that unique session note.

Sharing my notes

Just because I have a URL to share for each of my notes, does not mean that the note I take will be there when I go on the URL. I need to have a “store” for the notes that people write, so others can see them as well.

While evaluating different databases to store the notes, Redis becomes the apparent choice because…

1. Each note is text only (we will talk about images later…)

2. Each edit we can just replace the entire stored note with the updated one, so no need for ACID transactions

3. Fast read and write speed

With simple read and override operations, and relatively simple data to store, I don’t need complex databases like SQL databases.

So when a person accesses the note via the /notes/[note ID] route, it will fetch the content of that note from Redis and hydrate the note editor.

I can also share the notes link and others will be able to see my notes in their entirety as well, cool 😎

Going back and forth through my notes

So each URL now stores the notes that people write for each session. But what if I want to go back to the notes I took for the previous session?

The note is empty 😲 But why?

It is because every time the person clicks the button, a new note ID is created, and a new store is instantiated. But what a person wants is to be able to go back to the note that the person wrote.

The application should remember which note is associated with which session. The logical way is to have a user profile. When they log in, I can associate each note that they create to each session, and all of that to their account.

But this increases the friction of using the website to take notes. I imagine it to be instant: when ideas come to my head, I want to just click a button on that session and start writing. And then when I have some other thoughts, I can just click the same session and edit what I wrote.

The other way is to utilize the local storage of the browser and make the browser remember the note ID associated with each session.

Storing in local storage means that

1. It cannot be carried over across devices

2. Can only store strings

But I am imagining most people only use their phones or their laptops as their primary note-taking device. Also, the only thing I need to store is a map between the session and the note ID for that session. So local storage it is.

Where should the notes live?

I am always on the Config schedule page checking out different sessions. I don’t want to leave that page and take notes. So the entry point to the note-taking experience should also live on the schedule page.

But how do I inject the note editor onto the Config website? In fact, I can’t.

I ended up just recreating the Config page, down to the pixel. Luckily the website is made out of a few components and I managed to port it over to my website in a few hours, phew…

What about images?

After the first day, I realize a lot of people are taking photos of the slides. I was also doing that as well. These photos should also live with the notes, right?

So after the first day, I went back and implemented a simple photo uploader.

It uses Vercel’s Blob storage to store the image and generates an image URL to persist in the note and display when people click on the note

There you have it, how I built a (not so) simple note-taking app that is used over 10k times in under 10 hours. I hope to build more of these simple, but useful applications that help people capture and share thoughts. Happy Config!