Meeplr: Tabletop Gaming Matchmaking App

Role: UX Designer & Full-Stack Developer

Timeline: Concept (2024) | Development (2025, ongoing)

Year: 2024-2025

Client: Personal project

Status: In active development

THE HOOK

Took a UX concept from Figma prototype to fully functional cross-platform mobile app in active development—validating the idea through research, then building the real thing.

THE CHALLENGE

Meeplr connects tabletop gaming enthusiasts for in-person gaming sessions. It's a two-sided marketplace where:

  • Players discover local gamers with matching game libraries and availability

  • Users coordinate schedules and find compatible play styles

  • The app facilitates connections based on location, games owned, and free time

The problem:

Board game players consistently face the same frustration: they have shelves full of games but no one to play with. Existing solutions (Facebook groups, Discord servers, Meetup) require manual coordination, lack game library matching, and don't consider availability overlap. An agency client had attempted a WordPress solution that was barely functional—poor navigation, confusing architecture, and wasn't converting visitors into users.

Players needed:

  • A way to find local players who own the same games

  • Schedule coordination to identify overlapping availability

  • Confidence that potential gaming partners share similar preferences and skill levels

  • A streamlined, intuitive mobile experience for on-the-go coordination

[TODO: Screenshots of original problem space / competitive analysis]

THE APPROACH

Phase 1: UX Research & Validation (2024)

  • Conducted competitive analysis of existing solutions (Meetup, BGG, Facebook Groups, Discord)

  • Created proto-persona "Harold" - representing recently relocated gamers seeking local groups

  • Developed feature cards for potential MVP features

  • Ran Kano analysis through user surveys to validate feature priority

  • Built Figma prototype and conducted 3 rounds of think-aloud usability testing with 15 participants

  • Iterated on information architecture and navigation based on feedback

Result: Overwhelming positive reception. All planned features tested as either performative or attractive—strong signal of product-market fit.

[TODO: Figma prototype screenshots - Key screens from UX phase]

Phase 2: Building the Real Thing (2025-Ongoing)

Validation was so positive that I decided to build it for real. This required:

  • Architecting a scalable backend for real-time matchmaking

  • Implementing complex multi-criteria matching algorithm

  • Building cross-platform mobile app with native-like performance

  • Creating secure database architecture with proper access controls

  • Developing real-time features for instant connection updates

Tech Stack:

React Ionic TypeScript Supabase PostgreSQL FCM Android Studio

[TODO: Working app screenshots - Discover, Matches, Profile screens]

KEY FEATURES IMPLEMENTED

  • Smart Matchmaking Algorithm: Multi-dimensional matching considering game libraries, location (PostGIS radius queries), availability overlap, and play preferences with weighted scoring

  • Game Library Management: Users catalog their collections; algorithm identifies overlapping interests

  • Availability Scheduler: Visual weekly schedule builder with automatic overlap detection

  • Connection Request System: Request-based connections with instant mutual matching when both parties are interested

  • Custom Meeple Avatars: Personalized avatar builder with layered SVG rendering and accessories

  • Real-time Updates: Supabase subscriptions for instant connection state changes across devices

  • Push Notifications: FCM integration for connection requests and gaming opportunities

  • Secure Architecture: Row Level Security policies protecting user data while enabling matchmaking

TECHNICAL CHALLENGES SOLVED

Challenge: Complex matchmaking queries with multiple JOINs (games, availability, location) were taking 3-5 seconds.

Solution: Implemented strategic database indexing and query optimization, reducing average query time to under 500ms.

Challenge: Connection states needed to sync instantly across multiple devices without constant polling.

Solution: Leveraged Supabase real-time subscriptions with React state management for instant updates when connections change.

Challenge: Database triggers for push notifications failed with permissions errors in Supabase environment.

Solution: Migrated notification logic to Supabase Edge Functions and utilized built-in Realtime features instead of custom triggers.

Challenge: Layered SVG avatars needed proper z-ordering without impacting list scroll performance.

Solution: Built modular component architecture with React memoization and optimized CDN asset loading.

THE RESULTS

  • Concept to Code: Successfully transitioned validated UX concept into working cross-platform mobile application

  • Full-Stack Implementation: Architected and built complete system from database to UI in ~14 weeks of active development

  • Performance Optimized: Achieved sub-500ms matchmaking queries handling complex multi-table JOINs

  • Real-time Features: Instant connection updates across devices using Supabase subscriptions

  • Secure by Design: Comprehensive RLS policies protecting user privacy while enabling matchmaking

  • Currently Completing: In-app messaging system and enhanced notifications for beta launch

KEY LEARNINGS

  • UX Research Pays Off: Extensive upfront validation provided clear direction and prevented feature creep throughout development

  • Database Design is Critical: Time invested in proper schema design and indexing delivered massive performance benefits

  • Start Small, Validate, Then Build: Proving the concept in Figma before writing code saved months of potential wasted development

  • Real-time Expected: Modern users expect instant updates; implementing subscriptions significantly improved perceived performance

  • Security from Day One: Building RLS policies from the start was far easier than retrofitting security later

  • Cross-Platform Trade-offs: Ionic simplified development but platform-specific features (notifications) still required careful handling

WHAT'S NEXT

  • Complete in-app messaging system between connected users

  • Beta testing with real users to gather usage feedback

  • Enhanced onboarding flow optimization

  • Group gaming session coordination features

  • BoardGameGeek API integration for game database

  • Game store partnerships for launch

Next

Neuro Sweet Spot Case Study