MJS Memory Card
A two-stage memory card matching game built for MJ Solution event booths - featuring avatar selection, timed stages, sound effects, and a real-time Supabase leaderboard.
MJS Memory Card is a browser-based memory card game designed for event booths and exhibitions. Players enter their name, pick an avatar, then race through two timed stages matching product image pairs. Stage 1 runs for 60 seconds and Stage 2 for 45 seconds - with a 5-second countdown overlay between stages. Scores are ranked by total completion time and saved to a Supabase leaderboard. The UI supports two layout modes: desktop landscape and portrait signage display, making it ready for both kiosk and standard screens.
Event booths often rely on passive displays or printed materials that fail to engage visitors. There was no interactive experience that could draw crowds, encourage participation, and organically introduce MJ Solution's products.
An interactive game that disguises product exposure as entertainment - card images are MJ Solution products, and the competitive leaderboard drives repeat plays. The dual layout mode means the same app runs on both standard laptops and portrait digital signage screens at the booth.
- Two-stage timed gameplay (60s + 45s) with 5-second countdown overlay between stages
- 6 randomized product image cards per stage for replayability
- Real-time leaderboard ranked by fastest total completion time (Supabase PostgreSQL)
- Podium display for top 3 with avatar, name, and time
- Sound effects for flip, match, wrong, and win via Howler.js AudioManager singleton
- Dual layout mode: desktop (landscape 4x3 grid) and signage (portrait 3x4 grid)
- Zustand global state management for player, stage, and settings
- 3D flip card animation via Framer Motion
- Avatar selection with 6 options on registration screen