F1 Tech Insights and Simulation Portal

A full-stack platform that brings the cutting-edge world of Formula 1 technology to life with AI-driven race predictions, interactive 3D simulations, and expert insights.

Comment

F1 Tech Insights & Simulation Portal

Welcome to the F1 Tech Insights & Simulation Portal, a full-stack web application built for Formula 1 enthusiasts, aspiring engineers, and data analysts. Our platform offers a unique blend of AI-powered predictions, interactive 3D simulations, and expert blog content, providing a one-stop shop for diving deep into the technical world of F1.

🚀 Live Application

Link to Deployed Application

đź’ˇ Inspiration

The world of Formula 1 is a thrilling intersection of high-speed racing and cutting-edge technology. However, the deep engineering concepts and strategic nuances are often opaque to the average fan. Our inspiration was to bridge this gap, creating a platform that demystifies the technical complexities of F1 and makes them accessible, interactive, and engaging for everyone, from casual viewers to aspiring race engineers. We wanted to build a tool that not only provides insights but also serves as an educational platform to spark curiosity in STEM fields like data science and aerodynamics.

⚙️ What It Does

Our platform is built around three core pillars to deliver a comprehensive F1 technical experience:

  1. đź”® AI-Driven Race Prediction: Leverage the power of Google's Gemini AI to generate detailed race outcome predictions. Users can input historical data, current car specifications, and track conditions to receive an AI-generated forecast, including the predicted winner, the top three finishers, and the key factors influencing the outcome.

  2. 🏎️ Interactive 3D Aerodynamic Simulation: Explore a high-fidelity 3D model of a Formula 1 car directly in your browser. This feature, powered by an embedded Sketchfab model, allows users to rotate, pan, and zoom to inspect the intricate aerodynamic surfaces of a modern F1 car, offering a glimpse into its complex design.

  3. đź“ť Expert Blog Content: Stay ahead of the curve with our curated blog, filled with deep-dive articles on F1 technology, race strategies, and engineering marvels. The blog is fully searchable, allowing users to quickly find content on topics ranging from tire management and ERS deployment to aerodynamics and historic regulations.

🛠️ How We Built It

This project is a modern, full-stack application built with cutting-edge technologies to deliver a performant, scalable, and visually appealing user experience.

  • Framework: Next.js (App Router)
  • Language: TypeScript
  • AI Integration: Google AI via Genkit
  • Styling: Tailwind CSS
  • UI Components: ShadCN UI
  • 3D Rendering: Embedded Sketchfab viewer

The architecture is centered around Next.js Server Components and Server Actions to ensure a fast, server-first approach. We used Genkit to create structured, server-side AI flows that communicate with Google's Gemini model, ensuring that our AI features are robust and reliable. The UI is built with the highly-regarded ShadCN UI component library for a polished and consistent look and feel.

🚧 Challenges We Ran Into

One of the biggest challenges was integrating the generative AI in a way that provided structured, predictable, and genuinely useful outputs, rather than just generic paragraphs of text. We overcame this by using Genkit's schema features, which allowed us to define the exact JSON output we needed from the Gemini model, making the AI's predictions easy to parse and display on the front end.

Another challenge was ensuring a seamless user experience across the different parts of the app—from the data-intensive AI prediction forms to the interactive 3D model. The Next.js App Router was instrumental in solving this, allowing us to create distinct, performant sections of the application that feel part of a cohesive whole.

🏆 Accomplishments That We're Proud Of

We are incredibly proud of building a full-stack application that successfully integrates three distinct, high-tech features—AI predictions, 3D simulation, and a content platform—into a single, polished product in a short timeframe.

Our most significant accomplishment is the meaningful integration of Google's Gemini AI. Instead of using it as a simple chatbot, we've leveraged it as a powerful analytics engine. Using Genkit to enforce a strict output schema for race predictions is a feature we are particularly proud of, as it turns the LLM into a reliable data source for our application.

Finally, we're proud of the clean, intuitive, and responsive UI/UX we created using ShadCN UI and Tailwind CSS, which we believe elevates the project to a professional standard.

đź“š What We Learned

Throughout this hackathon, we gained significant hands-on experience with Google's generative AI stack. We learned how to effectively use Genkit to define, orchestrate, and manage server-side AI flows, which was a new and powerful paradigm for us.

We also deepened our understanding of modern web development with the Next.js App Router, learning how to structure a complex application using Server Components and Server Actions for optimal performance. Most importantly, we learned how to take a complex idea and break it down into achievable components, integrating multiple advanced technologies to create a functional and impressive final product.

🚀 What's Next for F1 Tech Insights and Simulation Portal

The vision for this portal is just getting started. Here are some of the exciting features we plan to implement next:

  • Real-Time Data Integration: Connect the AI prediction engine to a live telemetry data feed for real-time race strategy adjustments and predictions.
  • Historical Database: Build a comprehensive database of past races, allowing the AI to draw on a much richer dataset for more accurate historical analysis.
  • Advanced Simulations: Move beyond visual models to interactive simulations where users can change parameters (e.g., wing angle, ride height) and see the immediate impact on aerodynamic performance.
  • Community Features: Introduce a community dashboard where users can share their own race strategies, discuss engineering concepts, and compete on prediction leaderboards.

🏆 Alignment with Judging Criteria

We designed this project to excel across the CodeKong hackathon's judging criteria.

  • Impact (8/10): Makes the complex and often opaque world of F1 engineering accessible to a wider audience. It serves as an educational tool that can spark interest in STEM fields like data science and aerodynamics.
  • Technical Complexity (9/10): This is a full-stack application integrating a powerful generative AI model (Google's Gemini) via server-side flows, built on a modern Next.js architecture with server components and server actions.
  • Use of Emerging Tech (9/10): The core of our application is the use of Genkit to orchestrate calls to Google's Gemini AI model. This provides structured, AI-powered insights, representing a meaningful integration of a powerful emerging technology.
  • Functionality (10/10): The application is fully functional. Predictions are generated on-demand, the 3D model is interactive, and the blog content is searchable and readable.
  • Presentation & Demo (N/A): We have structured this README to be a clear guide for our demo video, walking through each core feature.
  • UI/UX Design (9/10): The UI is built with the highly-regarded ShadCN UI component library and styled with Tailwind CSS, following modern design principles. It is clean, intuitive, responsive, and features a sleek, dark theme fitting for a high-tech F1 application.
  • Originality & Creativity (8/10): While sports analytics apps exist, our portal is unique in combining three distinct, high-tech features—AI predictions, 3D simulation, and expert content—into a single, cohesive platform for F1 fans.
  • Submission Quality (10/10): The repository is well-organized, and this detailed README provides a clear overview of the project, its architecture, and its purpose.

🔧 How to Run Locally

  1. Clone the repository:

    git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name

  2. Install dependencies:

    npm install

  3. Set up environment variables: Create a .env file in the root of the project and add your Google AI API key:

    GEMINI_API_KEY=your_api_key_here

  4. Run the development server:

    npm run dev

The application will be available at http://localhost:9002.

Built With

  • gemini-api
  • tsx
Share this project:

Updates