Case Study: Tabletop.xyz
Breaking down hows and whys of development at Tabletop.xyz
Community founder of /tabletop on Farcaster and builder of TableTop.xyz, a cross-platform app for creating, managing, and tracking board game plays and stats. Built with TypeScript in Next.js, leveraging PostgreSQL (Supabase) and Privy for Farcaster login.
Tabletop.xyz logo
Note: Tabletop development is paused and I have not been active since December 2024.
Overview
- Role - Community founder, Fullstack Developer, Product Designer
- Problem - Enabling Farcaster board game community to track plays and stats with social features
- Solution - Built a cross-platform app for creating, managing, and tracking board game plays and stats
Tech Stack
- Nextjs - TypeScript/React
- Supabase - PostgreSQL
- Privy - Farcaster login
- Fast XML Parser - transforming XML to JSON
- Zod - form validation
- BoardGameGeek XML API - board game data
- Vercel - serverless deployment
Motivation
Farcaster was a niche social network I joined in early 2023 where I found a group of software developers, artists, and entrepreneurs who had interesting conversations. I personally love board games and started talking about them simply to have interesting conversations with others who love board games.
Finding some success with channel growth (think of it as a subreddit), I asked my community and identified the community’s desires to more easily discover others to play games with and organize those games more easily.
I wanted to learn software development, especially after my family suffered an extreme health scare in June 2024. Back in school I explored software such as MatLab, Mathematica, and C, but struggled with the emotional frustration of debugging at the time. Later on, as a math teacher, I found myself creating lessons with frontend scripting in JavaScript to give quick feedback to my students for Desmos math lessons.
I asked some friends from Farcaster for recommendations of tools to get started with and dove in head first.
Features and Functionality
- Farcaster social login for recognizing friends
- Ability to add and manage personal gameplay sessions
- Algorithmically generated per-game ELO skill ranking to track competitive performance
- High-quality game images and board game metadata powered by BoardGameGeek API
- Discover hosted games to play with other Farcasters
Technical Choices
I hosted a board game community on the social platform Farcaster.xyz starting July 2023.
After explosive platform growth, in July 2024 I wanted to build a useful tool for that community: a board game stats tracker app with social features.
I didn’t know how to start but I used Cursor on a friend’s recommendation in July 2024, using AI as a senior mentor to ask incessant questions to and learn by implementing code myself.
I often had to point out flaws in the AI’s code that wouldn’t integrate with what we had already made or correct hallucinated libraries.
I chose Supabase (PostgreSQL) as the database also on a friend’s recommendation because of its relational capabilities, real-time edge capability, and integration authentication which streamlined development for social data and Farcaster login.
I implemented social login from Farcaster using Privy because so that users would be able to recognize their friends and others they had played games with IRL and online.
I implemented an XML-based API data fetch for board games from BoardGameGeek to have high quality game images and allow for metadata-based game recommendations to users. I transformed that into JSON using Fast XML Parser and used Zod to validatate the API return and harden TS types on my side.
Users could add their own gameplay sessions to a form which was validated server-side with Zod and the results processed algorithmically to generate a skill rating ELO for player comparisons. Flow demo video and result screenshot.
Users’ per-game ELO is displayed on their profiles.
Tabletop.xyz user profile UI
TableTop.xyz game session UI
Challenges and Solutions
- First Fullstack project - I leveraged AI through Cursor code editor as a senior mentor to guide implementation and aid in evaluating technical decisions. I evaluated and corrected generated code to integrate with existing code implementation and chosen code patterns.
- Handling external data - I integrated Fast XML Parser to convert XML data from BoardGameGeek into JSON for board game data and Neynar SDK for Farcaster user data.
- Market validation - Despite inital interest, the Farcaster community’s evolving interests led TableTop to fail market validation for planned monetization. I paused development, recognizing the need to align software efforts with user needs and business viability.
Lessons Learned
- Importance of iterative development for complex projects, especially with multiple new technologies.
- Proficiency with TypeScript for building type-safe applications, particularly when integrating with external APIs.
- Fullstack development, from database schema design with Supabase/PostgreSQL and API integration to responsive frontends with Next.js/React.
- Importance of continuous user feedback as part of product development, especially when validating product-market fit.
Future Considerations
- Explore monetization strategies with web3 tokens based on Farcaster trends.
- Game recommendation system based on implied user preferences from Farcaster social data.
- User created and hosted virtual game nights with user discovery of those sessions.
- Monetization via social leaderboards and blockchain ELO tokenization.