Full-Stack•interactive-web-game•photo-tagging
Where’s Waldo?
Photo Tagging Game
Overview
A fast, interactive hidden-object game inspired by Where’s Waldo. Players search characters in a detailed image and compete on a global leaderboard.
Challenge
A full-stack challenge from The Odin Project focused on building a photo-tagging game with multiple scenes, character detection, and a persistent leaderboard.
Implementation
I built a React-based game interface that uses predefined character positions stored in a PostgreSQL database. Game scenes and character data are served via a REST API, while the frontend handles click detection, game flow, and UI feedback.
Technologies
TypeScriptReactTailwindMotionZustandAxiosReact QueryNode.jsExpressPrismaPostgreSQLCloudinary
Highlights
- Smooth animations and polished UI interactions
- Predefined character positions stored as normalized ratios for responsive layout
- Global leaderboard with persistent timestamps
- Optimized frontend state management for fast user feedback
Challenges
- Mapping clicks to normalized character coordinates across screen sizes
- Synchronizing client and server during leaderboard submissions
- Creating a responsive and smooth UI for large game images
Lessons Learned
- Modeling character positions for responsive, scalable images
- Building full-stack interactions that feel instant
- Managing complex UI state for click detection and game flow
Future Improvements
- Build an admin UI for uploading scenes and managing character data
- Implement optional authentication for personalized experiences
- Increase test coverage for frontend and backend
- Add new game scenes to expand gameplay variety
Interested in this project?
Check out the live demo or explore the repository.