Project Asobi
The 5e Sheet and Planner to Rule Them All.
ProjectAsobi was created to address a UI/UX issue in the modern online tabletop gaming market, particularly Dungeons & Dragons 5th Edition. Modern implementations of character sheets and planners were confusing to learn, had a steep learning curve, or chose to automate too many steps in the gameplay. ProjectAsobi was made not to replace the tabletop gaming experience, but to be a companion tool to maximize it.
Web version now available. Coming soon to iPadOS.
Project Summary
As technology such as AI continues to advance at a rapid pace, in-person experiences such as tabletop gaming has experienced a sudden resurgence in the consumer market. Dungeons and Dragons is one of those experiences, gaining popularity thanks to livestreams and influencers. Current online tooling felt inadequate or obtuse to use, leading to a sense of confusion or had a steep learning curve and very quickly became an unnecessary barrier to entry.
The goal of the project was to create tooling for a niche audience: Dnd players that wished to use modern technology to build and track their character stats through a custom dashboard they could easily understand, while still being connected to the in-person experience. Modern dashboard sensibilities were a perfect solution to this issue, as many of the present issues were already solved in the enterprise space. By allowing the player to customize their own dashboard and only require the statistics that mattered, the user can create a sense of ownership in both their characters and personal dashboards.
The Technicals
Built on NextJS. Powered by Supabase. Deployed on Vercel.
The app started off as a basic fill in the blank character sheet, using React/NextJS for its' compontentization and easy state management. Over time, the app evolved as the requirements became more clear with user feedback.
Due to how many fields were available and how frequently some of them needed to be updated, many of the inputs and text fields were purposely left uncontrolled since it was better for users to manually save their data themselves. Dashboard structure, extension, and drag-and-drop are tied to the device via localStorage, as such data was not necessary to save on the database. Postgres was the perfect choice for relational data, such as authenticated user data, while allowing for unstructured data types such as JSONB.
The campaign planner was created using react-flow. Nodes and edges data are editable and allows game masters (aka DM/GM) to easily access information about a particular part of a campaign while being able to follow and build where the game will go due to the dynamic nature of DnD.
Future updates will convert the website into a PWA to allow the application to become available on the App Store, due to higher use cases for tablet and mobile DnD related clients. iPadOS version coming soon.
Gallery
Ready to impress with your next project?
I'm here to help: project-asobi.vercel.app linkedin github rwhui.tech@gmail.com