TeSuena - Guess the Song

About the project

Full-Stack music game project demonstrating advanced skills in modern web development, streaming API integration, real-time systems, and scalable architecture. Includes Single Player (Classic), Daily Challenge (Wordle-style), and Versus (Online Multiplayer) game modes.

Technologies

Features

• Game Modes: Classic, Daily, and Versus (Real-time Multiplayer)
• Deezer API Integration (Search, Top Tracks, Audio Previews)
• Smart song fetching and caching in Supabase
• Spotify OAuth 2.0 Integration (Playlist Import)
• 100% automated Cronjobs for daily challenge management
• Realtime System with Supabase (WebSockets) for online matches
• Optimized Search with PostgreSQL (Trigrams, GIN Index)
• Premium UI/UX: Glassmorphism, Framer Motion, Canvas Confetti
• Advanced Audio System: Preloading, Crossfade, fragment control

Technical challenges

• Real-time event synchronization for multiplayer mode
• Latency and connection state management in online matches
• Implementation of seamless and skip-free audio system
• Fuzzy search optimization in large databases
• Integration and normalization of data from multiple music sources

Learnings

• Use of Next.js App Router and Server Components
• Real-time system architecture with Supabase
• Advanced performance optimization and Core Web Vitals
• PostgreSQL database design for high performance
• Robust OAuth and security implementation (RLS)

Screenshots

Vista 1

Vista 2

Vista 3