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

A developer built MindArena, an AI-powered quiz platform that supports both solo practice and live multiplayer contests, using React, Supabase, and n8n workflows instead of a traditional backend server. The system routes quiz generation, AI feedback, room creation, and leaderboard logic through n8n workflows that connect the frontend to AI models and Supabase, with a centralized API layer handling all webhook communication. Players create contest rooms, share unique room codes, and compete on a shared leaderboard.

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 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. 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 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. 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 https://github.com/Jeswin-Madona/MindArena 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 https://n8n.io/workflows/18791/ I'm Jeswin Madona , a developer interested in building practical applications and exploring modern technologies. Feel free to connect with me: 💼 LinkedIn: Jeswin Madona https://www.linkedin.com/in/jeswinmadona/ 💻 GitHub: Jeswin-Madona https://github.com/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 🚀