A detailed technical and design walkthrough of ProMe, a companion app for the solo TTRPG 'The Protector's Memories'. Built with Next.js, the app is a full PWA with offline support via Serwist and local-first storage synced to Netlify DB (Neon). Highlights include: a CSS-based hexagonal map with biome-specific color theming and patterns, custom font subsetting via a Node.js script, cross-fading audio using Howler.js, view transitions between pages, a Markdown journaling system with game-aware rendering enhancements, and a bidirectional local/cloud sync system with conflict resolution. The post also covers trade-offs with Ant Design including accessibility issues and style specificity battles.
Table of contents
About The Protector’s Memories §Tech Stack §Progressive Web App §Nerdy Design Details §Markdown Journaling §User accounts & cloud sync §Wrapping up §296.2K Impressions10 Comments