Battle Prompt - Challenge the AI Mind

In a world of short attention spans, experience gamified learning: battle AI, earn XP, complete quests and earn achievements with thrilling prompt duels. Knowledge meets competition!

Comment

Inspiration

The initial idea was a platform where users can share their prompts with a community of AI builders. I was thinking of having a voting system for the content that they were producing and based on that to rank them up into leaderboards for the specific topic they are targeting. Then I decided that it would be better to educate people in a way that will make them better prompters instead of copy-pasting, and also learn new topics along the way. This is where the idea of creating a gamified website came about. I wanted to have an engaging experience while the user is trying to prompt his way out of a debate which will purposefully reward him with new knowledge in a certain category.

What it does

A gamified arena where you battle against an AI to sharpen your prompt engineering skills and learn new stuff along the way. You pick a battle topic, fire off your best prompt, and then the AI fires back its counter-response. But here’s the cool part: another AI acts as a judge, meticulously evaluating your prompt's clarity, creativity, and effectiveness, assigning you a "damage score". As you battle, you are:

  • Earning XP
  • Leveling up
  • Tracking your stats
  • Managing your energy

This transforms a learning process into a thrilling, competitive game. It’s about making every interaction a step towards becoming a better prompter while discovering new topics.

How I built it

The project was built using a modern tech stack, integrating several AI tools and libraries to create a complex, gamified experience.

  • Core Framework: The initial structure is based on Next.js with TypeScript, chosen for handling the complex gamification logic.
  • Development & Database: Bolt.new was the primary development platform, with Supabase serving as the database.
  • AI & Backend Logic: The chat system integrates Gemini and Firebase functions.
  • Component & Prompt Generation: UI components were sourced from 21st.dev via their prompt generation tool.
  • State Management & Validation: Zod for data validation and Zustand for global state management were used to complete the package.
  • Code Quality & Review: CodeRabbit was integrated with GitHub for automated AI code reviews to catch potential bugs.
  • Development Assistance: Trae.ai served as an IDE for complex bug fixes and refactoring, while ideas were discussed with Perplexity and t3.chat.

Challenges I ran into

Several challenges were encountered during development, primarily related to integration and system design:

  • Database & Framework Integration: There were significant challenges with the Supabase integration and developing with Next.js through Bolt.new, requiring package version adjustments and different libraries.
  • Gamification Systems: The energy system was particularly difficult to implement and connect with other parts of the arena.
  • Core Gameplay Loop: Implementing the chat workflow—including user messages, AI counter-responses, and damage calculations—needed significant time and iteration.
  • Multi-AI Coordination: Getting the AI roles (opponent and judge) to work together smoothly, manage conversation history, and provide consistent feedback was a huge but rewarding puzzle.

Accomplishments that I'm proud of

I am particularly proud of several key accomplishments that brought the project to life:

  • Seamless AI System: Successfully getting the multi-role AI system to work, with one AI as the opponent and another as the impartial judge, all within a real-time battle flow.
  • Complex Feature Implementation: Getting the energy system to function correctly and integrating it with battles and topics was a massive win.
  • Technical Integration: Successfully combining so many different tools and libraries into one cohesive, gamified experience is a huge personal accomplishment.

What's next

The future roadmap focuses on expanding the competitive and community features:

  • Performance & Refactoring: As the application grew in complexity during development, a key priority will be to refactor the codebase and optimize performance. This will ensure the app remains fast and stable as new features are added.
  • Leaderboard System: I plan to implement leaderboards to allow players to see their rank globally and within specific topics on a daily, weekly, and all-time basis, reviving the initial competitive spark.
  • Quest System: A new system will feature daily and weekly challenges (e.g., 'Win 3 battles in Creative Writing' or 'Achieve a damage score of 20+') to provide clear goals and encourage daily engagement.
  • Achievement System: A rich achievements system will be introduced, offering unique, beautifully designed badges for various milestones.
  • UI/UX Enhancements: The entire arena design will undergo UI improvements to create a more polished and intuitive user experience.
  • AI Improvement: The AI will be modified to be more balanced, unique, and concentrated on the topic at hand, ensuring fairer and more engaging debates.

These features are the essential foundation for the ultimate vision, which includes future plans for live multiplayer battles and community-driven events.

Built With

Share this project:

Updates