TrivAI

Inspiration

TrivAI was born from the desire to revolutionize the traditional trivia game experience. My girlfriend and I like trivia and we noticed that conventional trivia games often lack personalization, asking questions about topics we don't care about. By leveraging AI technology, TrivAI seizes an opportunity to create dynamic, engaging, and customizable trivia experiences that adapt to players' interests, helping us learn more about our favorite topics!

What it does

TrivAI is an interactive multiplayer trivia game that uses AI to generate unique questions based on player-chosen topics. Key features include:

• Real-time multiplayer gameplay using Pusher for live updates
• Custom topic selection
• AI-powered question generation using gpt-4o
• Dynamic scoring system
• Instant answer validation using AI
• Fun, playful UI with bouncing shapes and smooth transitions

How we built it

We built TrivAI using a modern tech stack:

• Frontend: Next.js with TypeScript for type safety and better developer experience
• Styling: Tailwind CSS for responsive design and custom animations
• Real-time Communications: Pusher for websocket connections and live game updates
• AI Integration: OpenAI's gpt-3.5-turbo for question generation and answer validation
• State Management: Server-side global state for managing game sessions and player data

Challenges we ran into

1. Answer Validation: Creating a fair and accurate system for validating player answers was complex. We solved this by using GPT-3.5 Turbo to compare answers contextually rather than exact matching.
2. Real-time Synchronization: Coordinating game state across multiple players presented challenges. We implemented a robust Pusher-based system to ensure all players stay synchronized.
3. Question Quality: Ensuring AI-generated questions were both challenging and accurate required careful prompt engineering and validation.

Accomplishments that we're proud of

1. Created a seamless multiplayer experience with real-time updates
2. Implemented an animated UI that gives the game a fun vibe
3. Successfully integrated AI for both question generation and answer validation
4. Built a scalable architecture that can handle multiple concurrent game sessions

What we learned

• Websocket implementation with Pusher
• Prompt engineering for AI interactions
• State management in a real-time multiplayer context
• Complex animation implementations with CSS
• TypeScript best practices in a Next.js environment

What's next for TrivAI

1. Custom Game Modes: Implement different game modes like time trials, tournament-style competitions, and Jeopardy style betting
2. Difficulty adjustment based on player performance
3. Friend lists and public lobbies
4. Achievement system
5. A dashboard for players to track their performance and learning progress over time

Built With

• nextjs
• openai
• pusher
• typescript