The following article is a case-study about my progress so far on Notescroll (name t.b.d.). If you just want to check out the app, click 

Every table-top gamer knows the struggle of keeping good notes for sessions and campaigns. I wanted to make something that would give players a simple tool to record their sessions and keep track of the campaign and world. Something that is simple enough to be used while playing the game, but with features that are useful for players and DMs beyond what you would find in a generic note-taking app.

Specific but not overly-opinionated structure

The goal for the initial build was to put together a working foundation of the app - authentication of users, creating campaigns and notes, and doing so in a way that is extendable and scalable so that adding more advanced features such as collaborative editing and references could be added without significant refactoring of the codebase.

I use React's Context API to provide the state of authentication to the entire app. The component creates the context and listens to the Supabase API for any changes to state and updates the context accordingly.

I wrap all authenticated content in an <AuthCheck> component, this ensures that everything inside can assume that the user is authenticated. The component shows a log-in page if authenticated === false.

I went with Tiptap, a headless wrapper for Prosemirror that includes some handy extensions like support for collaboration with Y.js. Being headless, Tiptap offers no opinions on styling so it was quite simple to integrate it with the existing styling of the app.

callback() gets called from Tiptap's onUpdate method, and only runs if updated === true, which signals that the component has received it's initial data from Supabase, avoiding a redundant database call.

The editor saves both JSON and plaintext, so in the future searching through documents doesn't need to parse JSON.

Now I can use this component on any page.

While Next.js is best used for server-side rendering, it can also function as a client-side router with minimal configuration. When Next.js prerenders dynamic pages, it creates a [slug].html page for each dynamic route. We can use Netlify's _redirects configuration to serve the correct route for each request

This directs all traffic with a dynamic campaign query and dynamic character query to the correct dynamic route.

Pages that are statically generated will hydrate with an empty query object, and then are later updated with the query parameters. This means that components that rely on the URL parameters wont have access to them on first render. There are a number of ways to deal with this issue, like conditionally rendering components based on the value of router.query, but this introduces added complexity. I implemented a modified version of 

 to return the query params on first render.

is supposed to run after the browser paints to the screen

 this doesn't always happen which can break functionality. For example if you modify the DOM with useEffect in quick succession, you are not guaranteed two separate paints. This can break things like CSS transition animations.

In order to ensure that the browser paints before an effect is run, you can use 

. This takes advantage of the event loop in Javascript.

Animation frames run before layout and style is calculated, and before the browser paints. Since events such as Timeouts are run on the other side of the event loop, this guarantees the browser calculates styles and layout, and paints before the code inside of the effect runs.

Notescroll: MVP

The team behind Next.js recently released 

 outlining future plans with their routing system. On the roadmap is support for nested routes, a feature that allows developers to nest routes inside of other routes or "layout files". This is part of a broader change to routing and file structure that will be a fantastic improvement, but it's possible to have nested routes in Next.js right now.

Imagine you have a dashboard for user settings. Some of the setting pages might be 

etc. You might also want the parent route, /

to also display some content. Sharing a layout between multible pages can be a lot of repetition, and it gets even more complicated when you have additional subroutes, like 

 route acts as the parent to the child routes and persists between navigations. This means the state of the /user component is maintained, so you can do things like fetch data inside of the /user component and pass it down to all of the children routes.

If we can do this in Next.js already, why is there an RFC for it?

Nested routes are part of a larger update that changes how the router works, in part to be compatable with React server components. The changes will make it eaiser to create nested routes and reason about the hierarchy, but it's not necessary to creating them today.

Lets start by creating the pages themselves. Inside of your pages directory, create a "user" directory, and three files: "index.jsx", "profile.jsx", and "settings.jsx". You can put anything you want in these pages for now.

Right now when you navigate to each of these pages, the entire page is rehydrated with the corresponding component. Let's set up nested routes. To do so, we declare a page layout inside of each child page. For example, here is the 

Finally, in our _app.jsx file let's configure the getLayout function.

Congrats, you just set up nested routes. If you link to 

, the <Profile/> page component will be rendered as a child to the <User/> page component.

You can also set up a component to be displayed for the 

And that's it. You can use as many components as you want for the getLayout() function and nest them however you'd like. React will persist the state of those components as long as the page hierarchy doesn't change.

Nested Routes in Next.js

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 

 for caching data, and Typescript for 30% more boilerplate.

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 

of events that are unrelated to the concept of sessions.

One of the core document types in the new Notescroll is the 

. 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.

table, which means later on the ability to query all events associated with a specific note is possible.

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 

 as it integrates nicely with Tailwind and is a fantastic platform for creating custom themes that users can select - or even create their own.

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.

 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.

Blog