The Wheel.AI, a full-stack web application that brings the excitement of Michael McIntyre’s "The Wheel" to life using the power of Generative AI.

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.

How I Built It: The Tech Stack

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.

Frontend Core:

• 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.

AI and Logic:

• OpenAI SDK: Powers the "Mich-AI-l" host persona. It dynamically generates:

1. 1. Thematic trivia questions across 4 difficulty levels.

   2. Character-driven monologues and host commentary.

   3. 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.

AI Asset Generation:

• 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.

How To Play

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.

Disclaimer

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.