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.
MindArena has two main modes.
Users can:
Choose a topic and difficulty
Generate AI-powered quizzes
Answer questions interactively
View their results
Receive AI-generated feedback
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.
The main dashboard allows users to choose between solo practice and multiplayer contests.
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
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.
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:
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.
The Practice Mode starts with a simple request.
For example:
Topic: JavaScript
Difficulty: Medium
Questions: 10
The workflow looks like this:
n8n Webhook
AI Model
Process Questions
Supabase
The AI generates the questions, n8n processes the response, and the quiz data is stored before being returned to the application.
Users can customize the topic, difficulty, and number of questions before generating an AI-powered quiz.
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 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.
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.
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.
Players can join an existing contest using the unique room code.
After joining, players enter the lobby.
This is where everyone waits until the host starts the contest.
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.
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.
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.
Once players submit their answers, the application calculates their standings and renders the final scoreboard.
Players are ranked based on two criteria:
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.
Supabase handles two major responsibilities.
User login
Session management
Protected routes
User information
The application stores information related to:
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 looks like this:
The core architecture keeps responsibilities strictly separated:
The architecture is relatively simple:
Frontend
API Layer
n8n Workflow
AI / Database
Response
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.
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
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.
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?"
⚛️ React
⚡ Vite
🎨 Tailwind CSS
🔄 n8n
🤖 AI Workflows
🗄️ Supabase
🐘 PostgreSQL
🔐 Supabase Authentication
🔗 REST APIs
🪝 Webhooks
The complete source code, n8n workflows, database schema, architecture documentation, and API contracts are available in the GitHub repository.
👉 MindArena - AI-Powered Quiz & Multiplayer Contest Platform
The repository includes:
📁 Frontend source code
📁 n8n workflow JSON files
📁 Supabase database schema
📁 API contracts
📁 Project documentation
📁 Architecture documentation
📁 Application screenshots
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
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! 🚀