This was designed and built as a personal project to play with my family on Christmas Day 2025. My Wife and I being big fans of the TV gameshow, we modified the structure of the game slightly to allow everyone to take part. It was designed with the intention of using a physical wheel divided into each player's name and scoring was done manually outside off the app. The final app showcases a modern frontend architecture and AI integration, including a custom-built "Mich-AI-l McIntyre" host to generate unique trivia, banter, and game categories on the fly.
This project was designed as a high-performance Single Page Application (SPA) with a focus on type safety, scalable state management, and seamless API integration.
React 19 and TypeScript: Leveraging the latest React features for UI and TypeScript 5.9 for robust type safety across the entire game logic.
Vite 7: High-speed build tooling and development server.
Tailwind CSS: A utility-first approach to styling, featuring a custom theme with game-accurate color palettes.
OpenAI SDK: Powers the "Mich-AI-l" host persona. It dynamically generates:
Thematic trivia questions across 4 difficulty levels.
Character-driven monologues and host commentary.
Context-aware "Money Spinner" categories and final "Cashout" questions.
State Management: Built using the React Context API (GameContext) for global game flow and LocalStorage for session persistence.
Service Architecture: A dedicated aiService.ts layer handles API communication with fall-back mock modes for offline development.
Visuals: All character avatars and logos were generated using Google Gemini, designed to create a consistent game-show aesthetic.
Audio: Background tracks and sound effects were generated using Suno, customized to match the high-energy tone of the game.
The Wheel.ai is designed to be played with 6 players, each bringing one Specialist Subject they know everything about!
1. The Specialist Rounds: There are 6 rounds (one for each player's subject).
2. The Spin: Unless it’s your own subject, you must spin the physical wheel!
Expert: Get help from the person who picked the subject.
Non-Expert: Get help from a random player.
Solo: Go it alone for maximum points!
3. The Question: You have 120 seconds to answer an AI-generated question. Correct answers earn you points (and your helper gets a bonus too!).
4. The Money Spinner: A rapid-fire round! Mich-AI-l gives a category (e.g., "Types of Pasta") and you have 5 seconds to shout a correct answer as the turn moves clockwise. Each correct answer earns you a point!
5. The Cash Out: With the game points now totalled, it's time for the final showdown! Based on your rank, you choose a prize tier and must answer one final question on a preselected category. Win the question, and you and your assistants win the tier! Miss it and the next person in the rankings gets a turn to play for a prize, until all of the prizes are gone.
This project is a non-commercial, transformative work created for educational and portfolio purposes only.
Copyright: All rights to the original concept, branding, and format of "The Wheel" belong to the BBC and Hungry McBear Media.
AI Disclosure: This video contains AI-generated content including synthetic voiceovers, music, and imagery. These assets were created solely for this personal project to demonstrate AI integration within web applications.
Parody: The "Mich-AI-l" character is an AI-generated parody and is not affiliated with, or endorsed by, Michael McIntyre or the BBC.
Fair Use: This video demonstrates software development skills and AI implementation. It is not for sale and is not intended to infringe upon any existing copyrights.