Building an AI-Powered Multiplayer Quiz Platform Without a Traditional Backend

Jeswin Madona — Fri, 11 Sep 2026 08:37:05 +0000

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! 🚀

DEV Community: Jeswin Madona

Building an AI-Powered Multiplayer Quiz Platform Without a Traditional Backend

Building an AI-Powered Multiplayer Quiz Platform Without a Traditional Backend

🧠 The Idea Behind MindArena

🎯 Practice Mode

⚔️ Multiplayer Contest Mode

MindArena Home Experience

🤔 But Where Is the Backend?

🔌 Keeping the Frontend Clean

🤖 AI Quiz Generation

Quiz Generation Interface

Interactive Quiz Experience

⚔️ Making Multiplayer Work

Creating a Multiplayer Contest

Joining a Contest

👥 The Multiplayer Lobby

Contest Lobby

🏆 The Live Contest

Live Multiplayer Contest

🥇 Leaderboard and Results

Real-Time Leaderboard Updates

🗄️ Where Supabase Fits In

Authentication

Database

🏗️ The Final Architecture

💡 What I Learned

🚀 What's Next?

🛠️ Tech Stack

📂 Explore the Project

🔗 GitHub Repository

🌟 Featured in the n8n Community

👨‍💻 About Me