Game Draft - AI Board Game Recommendations

Game Draft - AI Board Game Recommendations project screenshot 1 of 3
Loading image...
1 / 3
Use arrow keys, Home, End to navigate • 3 items

A modern board game recommendation app that combines AI vision processing with intelligent suggestions. Whether you're at a game store, library, or friend's collection, Game Draft uses Google's Gemini AI to identify board games from photos and provides personalized recommendations based on your desired player count and playing time.

What I Learned

Through building this project, I gained hands-on experience with:

  • AI Integration: Implementing Google Gemini Vision API for image recognition and text generation for intelligent recommendations
  • Real-Time Streaming: Building server-sent events (SSE) for streaming AI responses and creating responsive user experiences
  • Mobile Camera Integration: Developing cross-platform camera functionality with real-time video feeds and photo capture capabilities
  • Type-Safe Full-Stack Development: Using tRPC for end-to-end type safety between frontend and backend with comprehensive error handling

Technical Architecture

Frontend

  • Next.js 15 with App Router
  • TypeScript for type safety
  • Tailwind CSS 4 for styling
  • tRPC for type-safe API calls
  • React 19 with modern hooks
  • Sonner for toast notifications

Backend & AI

  • Google Gemini AI (Vision + Text models)
  • tRPC server with Zod validation
  • Server-Sent Events for streaming responses
  • Next.js API Routes for recommendation endpoints

Database & Authentication

  • Drizzle ORM with PostgreSQL
  • Better Auth for user sessions
  • Neon serverless PostgreSQL
  • Ready-to-use user collections schema

Key Implementation Details

AI Vision Processing

The app uses a two-step AI process for accurate game identification:

  1. Image Recognition: Gemini Vision API analyzes uploaded photos to identify visible board game titles
  2. Canonicalization: A second AI call validates and standardizes game names to ensure accuracy

Smart Recommendation Engine

The recommendation system adapts based on the user's collection:

  • Collection-Based: When games are identified, recommends the best matches for specified player count and time
  • General Recommendations: When no games are detected, suggests popular games fitting the criteria
  • Streaming Responses: Real-time AI text generation provides immediate feedback

Cross-Platform Image Input

  • Mobile: Real-time camera feed with environment-facing camera preference and photo capture
  • Desktop: Drag-and-drop file upload with visual feedback and file validation
  • Universal: Base64 image processing and error handling across all platforms

Challenges Overcome

  • AI Response Reliability: Implementing structured JSON responses with schema validation to ensure consistent game identification results
  • Mobile Camera Integration: Managing MediaStream lifecycle, handling device permissions, and ensuring proper cleanup to prevent memory leaks
  • Real-Time Streaming: Building custom SSE implementation for streaming AI responses while maintaining proper error boundaries and connection management
  • Type Safety Across Stack: Ensuring end-to-end type safety from database schema through tRPC to frontend components with comprehensive validation
  • Cross-Platform Compatibility: Creating unified image input experience that works seamlessly across mobile camera and desktop file upload workflows

This project taught me a lot about integrating modern AI capabilities into full-stack applications. Built during my 3rd week at the Fractal AI Accelerator.