--- title: ProMe, a TTRPG Companion App | daily.dev description: 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... canonical: https://daily.dev/posts/prome-a-ttrpg-companion-app-wyfho4iv6 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: ProMe, a TTRPG Companion App | daily.dev og:description: 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... og:url: https://daily.dev/posts/prome-a-ttrpg-companion-app-wyfho4iv6 og:image: https://api.daily.dev/og/posts/WYFhO4IV6.png og:image:alt: ProMe, a TTRPG Companion App og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # ProMe, a TTRPG Companion App **[Kitty says hi.](https://daily.dev/sources/kittygiraudel)** · [@kittygiraudel](https://daily.dev/kittygiraudel) · 24 min read · 93 upvotes · 12 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@starfallcodes** · 3 upvotes > i don't understand what it is but thats a lot of js libraries **@justpew** · 2 upvotes > it adds more imaginative sense to the game 👍 **@pipesoft** · 2 upvotes > nice project **@sankalpdawada** · 0 upvotes > It's a bit confusing at first but i did understood some of it while exploring, its nice but my suggestion is to provide a guide or tutorial. **@ax\_prashant** · 0 upvotes >  ## Similar posts on daily.dev - [Build a Next.js 16 PWA with true offline support](https://daily.dev/posts/build-a-next-js-16-pwa-with-true-offline-support-iyrolodea) · LogRocket · 5 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#nextjs](https://daily.dev/tags/nextjs), [#local-first](https://daily.dev/tags/local-first) [View this post on daily.dev](https://daily.dev/posts/prome-a-ttrpg-companion-app-wyfho4iv6) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"ProMe, a TTRPG Companion App","url":"https://daily.dev/posts/prome-a-ttrpg-companion-app-wyfho4iv6","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/prome-a-ttrpg-companion-app-wyfho4iv6"},"datePublished":"2026-06-29T17:51:40.932Z","dateModified":"2026-07-01T09:52:49.729Z","description":"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...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/97702191f1c333419cd16170abcdacf2?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/97702191f1c333419cd16170abcdacf2?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Kitty says hi.","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Person","name":"Kitty Giraudel","url":"https://daily.dev/kittygiraudel","image":"https://avatars.githubusercontent.com/u/1889710?v=4","description":"Engineering & Executive Leadership","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":1130}},"commentCount":12,"discussionUrl":"https://daily.dev/posts/prome-a-ttrpg-companion-app-wyfho4iv6","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":93},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":12}],"keywords":"webdev,css,nextjs,local-first","timeRequired":"PT24M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Kitty says hi.","item":"https://daily.dev/sources/kittygiraudel"},{"@type":"ListItem","position":3,"name":"ProMe, a TTRPG Companion App"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/prome-a-ttrpg-companion-app-wyfho4iv6","comment":[{"@type":"Comment","text":"i don’t understand what it is but thats a lot of js libraries","datePublished":"2026-07-02T06:28:29.438Z","url":"https://daily.dev/posts/WYFhO4IV6#c-w2QfhqGJs","author":{"@type":"Person","name":"Starfall :D","url":"https://daily.dev/starfallcodes","image":"https://media.daily.dev/image/upload/s--4xoTqFbk--/f_auto/v1786806197/avatars/avatar_ecPDW57nUVRidLxwsxruz?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"it adds more imaginative sense to the game 👍","datePublished":"2026-07-03T08:56:44.041Z","url":"https://daily.dev/posts/WYFhO4IV6#c-LBJAGrDAb","author":{"@type":"Person","name":"Chris","url":"https://daily.dev/justpew","image":"https://lh3.googleusercontent.com/a/ACg8ocKoF76b4yIw_SQXJfF-jVBZeyeIZCmmUm1e4cc9fKDQoY52O2qN=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"nice project","datePublished":"2026-06-30T21:25:16.058Z","url":"https://daily.dev/posts/WYFhO4IV6#c-lndPgd8dS","author":{"@type":"Person","name":"Juan Felipe Velasquez Alvarez","url":"https://daily.dev/pipesoft","image":"https://media.daily.dev/image/upload/s--PbZORXAj--/f_auto/v1757214438/avatars/avatar_mQctWDEB2?_a=BAMClqZW0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"It’s a bit confusing at first but i did understood some of it while exploring, its nice but my suggestion is to provide a guide or tutorial.","datePublished":"2026-07-04T09:11:29.145Z","url":"https://daily.dev/posts/WYFhO4IV6#c-vryA1Ynly","author":{"@type":"Person","name":"Sankalp Dawada","url":"https://daily.dev/sankalpdawada","image":"https://avatars.githubusercontent.com/u/173169094?v=4"}},{"@type":"Comment","text":"","datePublished":"2026-07-05T01:34:30.300Z","url":"https://daily.dev/posts/WYFhO4IV6#c-vIECKoTSq","author":{"@type":"Person","name":"Prashant Rijal","url":"https://daily.dev/ax_prashant","image":"https://media.daily.dev/image/upload/s--X33L4424--/f_auto/v1739440974/avatars/avatar_S5xYEu8jXmb2cDEBSs7Mn"}}]} ```