Building an AI-Powered Multiplayer Quiz Platform Without a Traditional Backend
How I built MindArena using React, Supabase, n8n, and AI workflows.
When I started building MindArena, I thought I was creating a simple AI quiz generator.
The idea was straightforward.
Users choose a topic, difficulty, and number of questions, and AI generates a quiz.
But then I thought:
What if quizzes could be competitive too?
That small idea slowly turned into something much bigger.
MindArena became an AI-powered platform where users can practice quizzes individually or create multiplayer quiz contests, invite players using room codes, compete together, and view a leaderboard.
The interesting part?
I built most of the backend logic without creating a traditional backend server.
🧠 The Idea Behind MindArena
MindArena has two main modes.
🎯 Practice Mode
Users can:
Choose a topic and difficulty
Generate AI-powered quizzes
Answer questions interactively
View their results
Receive AI-generated feedback
⚔️ Multiplayer Contest Mode
Users can:
Create contest rooms
Share a unique room code
Join other players
Wait in a lobby
Start a live contest
Submit results
View the leaderboard
The goal was simple:
Make learning feel a little more like playing a game.
MindArena Home Experience
The main dashboard allows users to choose between solo practice and multiplayer contests.
🤔 But Where Is the Backend?
This was the part where I wanted to experiment.
Normally, I would think about building something like this:
React
↓
Express / Node.js Backend
↓
Database
`
Instead, I tried something different:
`text
React
↓
n8n Workflows
↓
AI + Supabase
↓
React
`
I used n8n as a workflow layer between my frontend, AI services, and database.
Different workflows handle operations such as:
Generating quizzes
Retrieving quiz questions
AI performance feedback
Creating contest rooms
Joining rooms
Starting contests
Retrieving contest questions
Submitting results
Generating leaderboards
This allowed me to visually build and manage backend logic through workflows.
🔌 Keeping the Frontend Clean
One thing I learned early was that I didn't want fetch() calls scattered across every React component.
So I created a centralized API layer:
`text
src/lib/api.js
`
All communication with n8n happens from one place.
Conceptually, the frontend communicates through functions like:
`javascript
createRoom()
joinRoom()
getRoom()
startContest()
getContest()
submitResult()
getLeaderboard()
generateQuiz()
getQuiz()
getAIFeedback()
`
This made the application easier to maintain and debug.
Instead of each page worrying about webhook URLs and error handling, the pages simply call the API functions they need.
🤖 AI Quiz Generation
The Practice Mode starts with a simple request.
For example:
`text
Topic: JavaScript
Difficulty: Medium
Questions: 10
`
The workflow looks like this:
`text
React
↓
n8n Webhook
↓
AI Model
↓
Process Questions
↓
Supabase
↓
React
`
The AI generates the questions, n8n processes the response, and the quiz data is stored before being returned to the application.
Quiz Generation Interface
Users can customize the topic, difficulty, and number of questions before generating an AI-powered quiz.
Interactive Quiz Experience
The generated questions are presented through an interactive quiz interface.
One challenge here was response time.
AI generation isn't always instant.
Initially, users could click a button and wait several seconds without knowing what was happening.
So I added proper loading experiences with messages such as:
Preparing your quiz...
Generating questions...
Setting up your contest...
It is a small UX improvement, but it makes waiting feel much better.
⚔️ Making Multiplayer Work
The multiplayer mode was probably the most interesting part of the project.
A player creates a room.
Create Room → Generate Room Code → Open Lobby
Other players can join using that room code.
Creating a Multiplayer Contest
The host configures the topic, difficulty, number of questions, and maximum number of players.
After creating the room, the host receives a unique room code.
That code becomes the entry point for other players.
Joining a Contest
Players can join an existing contest using the unique room code.
👥 The Multiplayer Lobby
After joining, players enter the lobby.
This is where everyone waits until the host starts the contest.
Contest Lobby
The lobby displays the connected players and keeps the room synchronized across multiple browser sessions.
This created an interesting challenge:
How do multiple browsers know when someone joins or when the host starts the contest?
I didn't use WebSockets.
Instead, I used polling.
Every few seconds, the frontend requests the latest room state.
Player joins → Supabase updates → Clients poll room state → Player list updates
When the host starts the contest:
Host starts contest → Room status updated → Other clients detect change → Everyone enters contest
It is simpler than implementing WebSockets, but it works well for the current scope of the project.
🏆 The Live Contest
Once the host starts the contest, players move into the quiz interface.
Each player answers the questions individually while the application tracks their progress and completion time.
Live Multiplayer Contest
Players compete by answering the same set of questions and submitting their results.
After completing the contest, answers are submitted to the backend workflow.
The backend processes the results and stores them in Supabase.
🥇 Leaderboard and Results
Once players submit their answers, the application calculates their standings and renders the final scoreboard.
Players are ranked based on two criteria:
- Score (total correct answers)
- Completion time (used as a tiebreaker)
Real-Time Leaderboard Updates
Because players finish at slightly different paces, the leaderboard also relies on short-interval polling. As remaining participants submit their final questions, the scoreboard updates dynamically, giving players a live view of the final standings without needing a manual page refresh.
🗄️ Where Supabase Fits In
Supabase handles two major responsibilities.
Authentication
User login
Session management
Protected routes
User information
Database
The application stores information related to:
`text
profiles
quizzes
questions
rooms
room_players
contest_results
`
This gives MindArena persistent quiz data, multiplayer rooms, player information, and contest results.
The relationship between the frontend, workflows, and database became the foundation of the application.
🏗️ The Final Architecture
The final architecture looks like this:
The core architecture keeps responsibilities strictly separated:
- React + Vite UI: Manages interactive gameplay, timers, and client state.
-
API Layer (
src/lib/api.js): Centralizes outbound webhooks and handles room polling. - n8n Workflows: Orchestrates backend business logic, validation, and AI chaining.
- AI Model: Dynamically generates quiz questions and contextual player feedback.
- Supabase: Manages PostgreSQL data persistence and user authentication.
The architecture is relatively simple:
`text
Frontend
↓
API Layer
↓
n8n Workflow
↓
AI / Database
↓
Response
↓
Frontend
`
The main idea was to keep responsibilities separated.
React handles the user experience.
n8n handles workflow orchestration.
AI generates quiz content and feedback.
Supabase handles authentication and persistent data.
💡 What I Learned
MindArena taught me more than I expected.
While building it, I worked with:
AI integration
Workflow-based backend design
API contracts
Database relationships
Authentication
Multiplayer synchronization
Polling
Error handling
Loading states and UX
But the biggest lesson was this:
A backend doesn't always have to look like a traditional backend.
For this project, workflow automation became a practical way to connect the frontend, AI services, and database.
That doesn't mean n8n replaces a traditional backend.
But for automation-heavy or AI-powered applications, it can be a surprisingly useful architectural choice.
🚀 What's Next?
There are still many things I would like to add to MindArena.
Some ideas include:
WebSocket or Supabase Realtime synchronization
Global leaderboards
Player profiles
Achievements and XP
Contest history
Public contests
Friend systems
Anti-cheating mechanisms
Tournament modes
Team-based quiz contests
MindArena started as a simple quiz generator idea.
Somewhere along the way, it became an experiment combining:
AI + Multiplayer + Workflow Automation + Modern Web Development
And honestly, that's what made building it interesting.
Sometimes the best projects start with a simple question:
"What happens if I try building this differently?"
🛠️ Tech Stack
⚛️ React
⚡ Vite
🎨 Tailwind CSS
🔄 n8n
🤖 AI Workflows
🗄️ Supabase
🐘 PostgreSQL
🔐 Supabase Authentication
🔗 REST APIs
🪝 Webhooks
📂 Explore the Project
The complete source code, n8n workflows, database schema, architecture documentation, and API contracts are available in the GitHub repository.
🔗 GitHub Repository
👉 MindArena - AI-Powered Quiz & Multiplayer Contest Platform
The repository includes:
`text
📁 Frontend source code
📁 n8n workflow JSON files
📁 Supabase database schema
📁 API contracts
📁 Project documentation
📁 Architecture documentation
📁 Application screenshots
`
🌟 Featured in the n8n Community
I'm excited to share that the MindArena n8n workflow was officially reviewed, approved, and published in the n8n Community workflow library.
👉 View the MindArena workflow on n8n Community
👨💻 About Me
I'm Jeswin Madona, a developer interested in building practical applications and exploring modern technologies.
Feel free to connect with me:
💼 LinkedIn: Jeswin Madona
💻 GitHub: Jeswin-Madona
If you're building something similar or experimenting with AI workflows, n8n, React, or Supabase, I'd love to hear about your approach.
Happy building! 🚀
Top comments (0)