Inspiration
Deen Duel came from a simple problem: most Islamic learning apps feel static, and most quiz games care more about entertainment than real learning. The goal was to build something people would actually want to come back to, compete in, and learn from at the same time. The idea was to combine live trivia with study tools like lessons, flashcards, daily challenges, and an AI tutor.
What it does
Deen Duel is a real-time multiplayer Islamic trivia app built for competitive learning. Players can challenge each other in live 1v1 matches, join group or classroom-style games, complete daily challenges, review flashcards, and take AI-generated quizzes. The content focuses on Qur’anic knowledge, Islamic history, the pillars of worship, and the 99 Names of Allah. It also includes lessons and an AI bot that answers questions and helps users study beyond the game itself.
How it was built
The frontend was built with React 18 and Vite 5 using JavaScript, HTML, and custom CSS. Real-time gameplay runs through Socket.io, which handles room creation, matchmaking, live question flow, and score updates. The backend uses Node.js with Express for the API layer and Socket.io for multiplayer events.
For AI features, the app uses the Anthropic Claude API to generate quizzes and power the tutor panel. On the client side, localStorage handles progress tracking, streaks, and achievements, while the server keeps live game state in memory. The project also uses the Web Audio API for generated sound effects, the Canvas API for confetti and shareable game cards, and qrcode.react for room sharing. It is packaged as a PWA so users can install it and keep parts of the app available offline.
Challenges
The biggest challenge was managing complexity without overbuilding the stack. Since the app does not use a database, client-side progress had to stay separate from temporary in-memory multiplayer state on the server. Another challenge was handling real-time multiplayer cleanly, especially syncing players, keeping game state consistent, and avoiding issues when users answered at different times or disconnected mid-game.
Another tough part was balancing competition with learning. It was easy to make the app feel like a quiz game. It was harder to make it feel like a real study tool too. That meant adding lessons, flashcards, daily systems, and an AI tutor without turning the app into a cluttered mess.
Accomplishments that We're proud of
One of the biggest wins was building a live multiplayer experience that actually feels fast and competitive while still staying educational. Deen Duel is not just a static question bank. It supports 1v1 battles, group play, daily challenges, flashcards, lessons, and AI-generated quizzes in one app.
Another accomplishment was building the whole thing without relying on a heavy stack. The app runs without a database, stores long-term progress in localStorage, and still supports live multiplayer sessions through Socket.io. It also works as an installable PWA, which made it feel more like a real product than a class project or prototype.
What We learned
This project taught us a lot about real-time systems, especially syncing state across clients, handling race conditions, and keeping gameplay fair. It also showed how much product design matters. A quiz app is easy to make functional, but much harder to make clear, replayable, and fun.
What's next for Deen Duel
The next step is to make the app more scalable and easier to maintain. That likely means moving away from a single large frontend file and adding a real database for accounts, saved progress, leaderboards, and custom question sets.
Feature-wise, the next focus is stronger classroom support, better private room controls, more lesson content, and better user-generated question tools. Another goal is to improve the AI tutor so it can give more guided explanations instead of only answering direct questions. Long term, the aim is to make Deen Duel feel like a full learning platform, not just a trivia game.
Built With
- anthropic-claude-api-(@anthropic-ai/sdk)
- canvas-api
- concurrently
- css
- express.js
- google-fonts
- html
- javascript-(es-modules)
- localstorage
- node.js
- npm
- pwa-(manifest-+-service-worker)
- qrcode.react
- react-18
- render
- socket.io
- socket.io-client
- vite-5
- web-audio-api
Log in or sign up for Devpost to join the conversation.