Mug Matcher

The Challenge

Traditional criminal justice education and detective training often rely on theoretical knowledge without practical application. Law enforcement professionals, criminology students, and true crime enthusiasts lack engaging, interactive tools to develop their visual recognition skills and understanding of criminal behavior patterns. The challenge was to create an educational yet entertaining platform that tests visual recognition abilities, builds understanding of crime categorization, provides immediate feedback, and remains engaging across multiple play sessions while working seamlessly across desktop and mobile devices.

The Solution

Mug Matcher is a web-based detective skills game that challenges players to match mugshots with their corresponding crimes. Built as a Progressive Web App using Next.js 15, the game combines visual recognition challenges with criminal justice education. Players are presented with 6 mugshots and 6 crime descriptions, testing their ability to make connections based on visual cues, crime patterns, and criminal profiling knowledge. The game features a sophisticated points system that rewards accuracy, speed, and consecutive correct matches, while providing detailed feedback to help players learn from their mistakes.

Key Features

• Intelligent Crime Matching System with 400+ real criminal records
• Smart crime categorization preventing similar offenses in single rounds
• Sophisticated scoring system considering accuracy, speed, and attempt count
• Real-time statistics with accuracy percentage and completion time tracking
• Dual UI themes: Professional ShadCN and animated Aceternity interfaces
• Progressive Web App with mobile-first responsive design and haptic feedback

Technical Implementation

Mug Matcher combines cutting-edge web technologies with sophisticated game mechanics: