Notescroll: Building for Production

A lot has changed since I started working on the MVP of Notescroll. Lessons were learned, changes made, and the app is finally starting to function how I envisioned it. I completly rebuilt it from the ground up with Radix for UI, DaisyUI for themes, SWR for caching data, and Typescript for 30% more boilerplate.

Sessions

One of the core features of the MVP is "Sessions", a type of meta-document that lets you reference existing note documents inside of it in a linear order. This is meant to record what happens during gameplay sessions, while being able to reference the involved notes.

The issue is that this system is not flexable enough. Sometimes you want to record an event without referencing a document. Sometimes you want to reference multible documents together. And sometimes you want to create timelines of events that are unrelated to the concept of sessions.

Timelines to the rescue

One of the core document types in the new Notescroll is the Timeline. Timeline documents are essentially a note that has the ability to embed smaller notes inside, arranged according to date. This provides a flexable interface for users to record sessions, plots, even entire historical chains of events and they can include whatever they want for each event.

This is implemented with a Timelines table and an Events table, which means later on the ability to query all events associated with a specific note is possible.

Theme

While the OG parchment theme is kind of cute, I decided I needed a more robust theming system, something that looks more professional and doesn't come with the inherent limitations of that design system. I decided to go with DaisyUI as it integrates nicely with Tailwind and is a fantastic platform for creating custom themes that users can select - or even create their own.

Note References

A major feature I wanted to implement is now fully working. Users now have the ability to insert note references directly into their text, a sort of hyperlink that brings up a widget with the note overview and a link to view it. I'll discuss how I built the reusable, fully featured rich text editor in a later post.

Other changes

  • I integrated Mantine's spotlight seatch feature inside Notescroll. Besides having the standard navigation options, it also searches the database for notes.
  • I'm using Radix UI for headless UI, which allows me to not worry about functionality or accessability.
  • I'm using SWR for data fetching, which allows me to cache requests and not show a loading spinner for each page navigation.

As always you can check out the site at notescroll.app.