Back to projects
Daily GameEntertainmentLive

FrameGuessr

Daily Movie & TV Show Guessing Game with Cinematic Experience

View DemoView Source

Overview

FrameGuessr combines the appeal of daily puzzle games like Wordle with cinema knowledge, creating an engaging guessing game where players identify movies and TV shows from progressively clearer image hints, enhanced with soundtrack previews and social sharing features.

Built as a full-stack web application, FrameGuessr demonstrates advanced frontend interactions, API integrations, database management, and user experience design, all wrapped in a cinema-themed interface that makes film discovery fun and social.

The Challenge

Creating an engaging daily game required solving several technical and design challenges while ensuring a smooth, accessible experience for film enthusiasts of all levels.

  • Progressive blur system that maintains visual appeal while providing fair difficulty scaling
  • Audio integration with copyright-compliant preview system via Deezer API
  • Intelligent search for movie/TV show identification with fuzzy matching
  • Daily challenge generation and result sharing without spoilers
  • Rate limiting and abuse prevention while maintaining smooth UX

Solution

I designed a sophisticated hint progression system combined with a clean, cinema-inspired interface that makes the game accessible while maintaining engagement through multiple difficulty layers.

Progressive Blur System

Custom CSS blur effects with three difficulty levels, maintaining image aesthetics while providing fair progression from heavily obscured to clearly visible.

CSS FiltersImage Processing

Audio Integration

Seamless soundtrack preview system using Deezer API with custom audio controls, time-limited playback, and fallback handling.

Deezer APIWeb Audio

Smart Search

Real-time search with TMDB API integration, debounced queries, and intelligent result ranking by popularity and relevance.

TMDB APIFuzzy Search

Social Features

Spoiler-free result sharing with visual indicators, daily challenge URLs, and streak tracking for returning players.

Share APILocal Storage

Key Features

Core Features

  • • Daily Challenges: New movie/TV show every day with curated image selection
  • • Three-Tier Hint System: Progressive blur reduction from heavily obscured to clear
  • • Audio Hints: Soundtrack previews with time-limited playback controls
  • • Smart Search: Real-time movie/TV show search with intelligent ranking
  • • Historical Access: Play previous days' challenges with date navigation
  • • Social Sharing: Spoiler-free result sharing with visual progress indicators
  • • Responsive Design: Optimized experience across all device sizes
  • • Performance Optimized: Edge functions, caching, and image optimization
  • • Guess Validation: Server-side validation with comprehensive error handling
  • • Rate Protection: Built-in rate limiting and abuse prevention

Technical Implementation

System Architecture

Frontend (Next.js 15)      Backend APIs               External Services
    │                          │                          │
    ├─ Game UI                ├─ /api/daily              ├─ TMDB API
    ├─ Search System          ├─ /api/search             ├─ Deezer API
    ├─ Audio Player           ├─ /api/audio              └─ Image CDN
    ├─ Share System           ├─ /api/guess
    └─ Date Navigation        └─ Rate Limiting

Database (Supabase)          Deployment
    │                          │
    ├─ Daily Movies           ├─ Vercel Edge
    ├─ User Progress          ├─ PostgreSQL
    └─ Analytics              └─ CDN Caching

Technical Highlights

  • • Custom Blur Algorithm: Three-level blur progression maintaining visual appeal
  • • Audio Streaming: Seamless integration with Deezer API and fallback handling
  • • Search Intelligence: Debounced queries with popularity-based ranking
  • • Rate Limiting: Comprehensive API protection using Next.js middleware
  • • Server Validation: Client-optimistic updates with server-side verification
  • • Daily Generation: Automated content rotation with database management
  • • Share System: Spoiler-free result encoding for social sharing
  • • Performance: Edge functions, image optimization, and aggressive caching

Project Details

Role
Full-Stack Developer & Designer
Context
Personal Project
Timeline
2025
Status
Live & Active

Tech Stack

Frontend

Next.js 15TypeScriptTailwind CSSReact Context

Backend & APIs

Next.js API RoutesTMDB APIDeezer APISupabase

Infrastructure

VercelPostgreSQLEdge FunctionsRate Limiting

Impact

Daily
Active Players
3-Level
Hint System
99.9%
Uptime

Key Achievements

Live
Production deployment with daily updates
Engaging
Progressive hint system maintains challenge
Social
Spoiler-free sharing drives engagement

Project Impact

FrameGuessr demonstrates full-stack development capabilities through a production-ready entertainment application. The project showcases API integration, real-time features, database design, and user experience optimization - all delivered through a polished, engaging interface that combines technical complexity with accessibility.