TM
Tomás Mattioli

F1 Guessing Game - Copy this React, Tailwind Component to your project

Interactive Page to Guess a Formula 1 Driver with Real Time Data This page allows users to guess the name of a Formula 1 driver in a maximum of 5 attempts, using dynamically fetched data from an API to ensure up to date information. Main Features: Dynamic User Interface: Text box for entering names: Users can type the driver's name, and as they type, an autocomplete list appears with related suggestions. Suggestions are dynamically generated through an API query. Progressive Hints Based on Incorrect Attempts: After each incorrect guess, the page requests a new hint from the API. Possible hints include: 1st incorrect attempt: Year of the driver’s debut. 2nd incorrect attempt: Current or most notable team. 3rd incorrect attempt: Nationality. 4th incorrect attempt: Number of wins or championships. Final hint: A circuit where the driver achieved an iconic victory. Attempt Validation: Each time the user submits a name, the API checks if it matches the correct driver. Results are displayed with visual markers (correct or incorrect), alongside the unlocked hints. API Integration: The API provides updated driver data, including names, teams, statistics, and other relevant details. Both the autocomplete list and the hints are fetched in real time from the API. Result Management: If the user guesses correctly, a congratulatory message is displayed, including the driver’s full name, current team, and key achievements. If the user exhausts all 5 attempts, the correct driver’s name is revealed, along with a brief description. Additional Options: A button to restart the game with a new driver, ensuring updated information is fetched from the API. Optional: A scoreboard or user statistics to track performance. Technical Aspects: Real Time Updates: Every game interaction (autocomplete, hints, attempts) sends a request to the API to ensure the displayed data is always accurate and current. Optimized User Experience: API responses are fast, and the page uses visual indicators and animations to create an engaging and intuitive experience. Visual Design: The design is modern and responsive, optimized for both mobile and desktop devices, with colors inspired by Formula 1 aesthetics (red, black, white).

Prompt
Component Preview

About

F1GuessingGame - Guess F1 drivers in 5 tries with real-time hints, autocomplete, and API data. Built with React and Tailwind. Free code available!

Share

Last updated 1 month ago