Inspiration
Watching the massive success of daily web games like Wordle showed me how powerful a simple, once a day puzzle could be. We wanted to capture that exact addictive, competitive energy and apply it directly to football. Our goal was to build a clean, fast web experience where trivia isn't just a basic text question, but a visual and analytical process. Players use real clues like matching positions, age ranges, and squad numbers to deduce the mystery player. Ultimately, We wanted to build a game that challenges your football memory, looks sleek, and becomes a mandatory part of every fan's daily routine.
What it does
This project is an interactive, web-based sports guessing game where players try to identify a mystery football player based on various clues. It features dynamic search autocomplete, an interactive guess history grid, and player face rendering to provide an engaging, Wordle-inspired experience for sports fans.
How we built it
Frontend Framework: React (via Vite) for a highly responsive, component-driven user interface. Styling: Tailwind CSS for a modern, dark-themed, and fully mobile-responsive UI design. Data Structure: A localized JSON asset framework mapping out player demographics, team positions, and unique data markers. Hosting & Deployment: Managed through GitHub
Challenges we ran into
A significant challenge we faced was handling inconsistent player data and edge cases within our initial dataset. Because we compiled a pool of fifty specific players from different sources, attributes like positions and shirt numbers were formatted differently depending on where the data was pulled from. During early testing, the game grid would break or show empty blocks because some players were missing specific fields, or their positions were listed as abbreviated strings in one place and full words in another. We solved this by developing a custom script to format and sanitize all the player data before passing it into our final JSON file. This script normalized every single attribute into a strict, predictable structure, ensuring the frontend code receives perfectly clean data and preventing layout bugs entirely.
Accomplishments that we're proud of
We are proud of building a fully functional, highly responsive web game from scratch. Turning a concept into a working application where a user can search, select, and receive real-time, visual feedback on their guesses is a huge milestone for us.
We are also proud of the clean, intuitive user interface we designed. Keeping the experience dark-themed, sleek, and mobile-friendly means that the game looks and feels like a professional modern web app. Successfully writing the pre-formatting data script to handle our JSON pipeline seamlessly was another major win, ensuring that the app runs smoothly with zero data crashes.
What we learned
Pure Component Architecture: I mastered the importance of keeping React components pure and data-isolated, ensuring that state changes in loops cannot be corrupted or overridden by global variables.
What's next for WorldCupdle
Our primary focus moving forward is polishing the overall user experience by formatting the website layout a bit better to ensure it feels even cleaner and more seamless across all devices. We also plan to expand the game by introducing new gamemodes to give players fresh challenges.
Log in or sign up for Devpost to join the conversation.