Chronicle - Full-Stack TTRPG Notetaking Web Application in React + Vite
Your campaign notes deserve better than a Google Doc graveyard.
The Problem
So I'm a huge nerd. I've ran TTRPG campaigns for about 8-9 years, and I'm finally playing in a campaign for once!
From my experience, a TTRPG campaign tends to mean drowning in:
Scattered notes (one doc for lore, another for NPCs, a third for that one player’s backstory)
Clunky tools (wiki software built for a full-time job, not a hobby)
Zero immersion (why does my “ancient tomb” notes app look like a spreadsheet?)
I also knew that I wanted this application to be easy to use, have mostly offline features, and become a mainstay for my (now underway!) campaign.
Planning the Solution
In my "adventuring," I was inspired by Kanka and the way they organize content for a particular campaign.
An example from Kanka.io, go support their amazing product!!
The one part I felt was lacking for using this solution? Focus. Kanka is a phenomenal application for maintaining a campaign wiki, but is it nearly as easy to quickly jot down notes while role-playing? Not for the way my brain works at least. I needed something that I could rapidly make notes with and worry about categorization later. We do have 2 weeks of downtime between sessions, after all.
The core idea was to focus on the note-taking. Quick, easy, and short notes that don't detract from the moment. This is where the addition of "thoughts" as the central user action came into play.
A snapshot of the structure of the application. Note that the data itself is stored in MongoDB, meaning it's document-based as opposed to relational data on MySQL, Snowflake, etc. as presented.
Why Lovable is included: I had about 400 credits left over. A great time to use existing resources while making something useful for myself!
Building out the Full Stack Application
Where I started, especially with Lovable, I needed to throw out some core development rules that filled in the blanks. This culminated into three core pages on the repository or the application itself:
Development Rules - Lovable's knowledge tab facilitates this, but I keep a separate document for version control on Github.
A snapshot of the development rules file in the GitHub repository
Design System - When Lovable creates a component, stick it in the design system and reference it.
The design system page
Changelog - Keep track of all the commits and what they did in one core place.
The Changelog page on the application, following conventional commit standards
From there, that creates a scaffolding for where we ended up after 400 credits worth of "vibe coding": A full-stack React + Vite app designed for TTRPG storytelling, with simple, user-friendly UI.
The core page: Recording thoughts.
The Thought Management Tab / Campaign Tab
The entity management tab
More on the Tech Stack
React + Vite: Blazing-fast renders for mid-combat note pulls.
Supabase: Auth + real-time updates (no page refreshes when the BBEG reveals their plan).
MongoDB: Flexible schemas for chaotic campaign notes.
Buildship: Seamless API connections when tech stacks might change—because even devs deserve less hassle.
Sample of the Create Document flow for Chronicle -> Buildship -> MongoDB
Key Features (Prototype Highlights)
Thought Recording - The core focus of the tool. Quickly jot notes and tag entities, and set defaults to focus on just what you need to write down.
Multiple Campaigns - Got a couple tables you frequent? You can switch content quickly and efficiently.
Entity Management - That guild you joined, that church you frequent, and that BBEG you fight has information. Keep that stored and connected. Establish a hierarchy on your entities and which ones are linked meaningfully.
Thought Management - Did you write something down wrong? Do you need to reference a statement made 3 sessions ago? Search your notes and manage the connections to ensure you never miss a plot thread.
Offline Features - TTRPG is played literally everywhere. Not everywhere has internet. By default, notes are stored locally and synced manually with the server when the user decides to.
Since it's React-based, it wouldn't be the worst to make this a React-native application for use on a computer locally. It would take some work, but it's doable.
Want to Test Chronicle?
The application is in Alpha, is not intended for public use, and is in constant flux. If you're interested in trying the application for yourself, you can go to this website to sign up:
Developed a TTRPG note-taking app using React and Vite for immersive campaign management, seamlessly organizing my thoughts and important entries in one place.