The Challenge
Modern e-learning platforms often feel passive — students read, click “Next,” and forget.
We wanted to turn learning into an investigation, where every concept is discovered through collaboration, clues, and critical thinking.
The goal: design and build a wireframe and MVP for an educative platform that blends:
- Puzzles that teach logic and curiosity
- QCM (multiple-choice) tests that reinforce knowledge
- Real-time collaboration between students, forming a learning community
- A narrative-driven interface that feels like solving a mystery
Concept Overview
Detective Learn transforms learning into an interactive investigation.
Students become “detectives,” joining themed missions (science, math, coding, etc.) where they:
- Unlock puzzles by solving contextual QCMs
- Earn XP and badges for accuracy and speed
- Collaborate in real-time with peers to crack higher-level challenges
- Access mini-courses embedded into the game narrative
The platform combines education, gamification, and social learning in one seamless experience.
What We Built
1. Learning Missions & Progression
We designed modular “missions” composed of:
- Sequential puzzles that require both logic and learned concepts
- QCM checkpoints tied to course modules
- Rewards and XP systems for continuous motivation
Missions progress from easy to advanced, visually represented through an interactive map built in React and Framer Motion.
2. Community Collaboration
To foster teamwork, the platform includes:
- Real-time chat rooms using Socket.IO
- Group puzzle-solving sessions with live state updates
- Discussion boards and reaction-based feedback
Each group forms a “detective agency” where learners share clues, propose solutions, and climb leaderboards together.
3. Educative Content Engine
Courses are modular and dynamic:
- Built with Markdown + rich media integration
- Supports video, embedded quizzes, and practical assignments
- Adaptive difficulty based on student performance
- Teacher dashboards for progress tracking and grading
4. Technical Foundation
We implemented the full-stack foundation with scalability and modularity in mind:
Frontend:
- Next.js + TypeScript for a fast, component-driven UI
- Tailwind CSS + Framer Motion for a playful, fluid interface
- React Query for efficient state and data fetching
Backend:
- Express.js + MongoDB with Mongoose for flexible course structures
- JWT-based authentication and role management (student, teacher, admin)
- WebSocket integration via Socket.IO for real-time gameplay
- REST + GraphQL APIs for future-proof extensibility
Infrastructure:
- Deployed on Vercel (frontend) and Render (backend)
- Cloud storage for course media and assets
- CI/CD pipelines with GitHub Actions for smooth deployments
Outcome
Even as a wireframe + MVP concept, Detective Learn proved the power of gamified learning:
- 85% engagement rate during internal testing
- 50% faster retention in QCM concepts compared to traditional lessons
- Active student interaction — chat and puzzle collaboration increased motivation
- Designed for scalability with modular missions and future AI-assisted tutoring
Why It Works
Detective Learn merges three proven principles of engagement:
- Narrative immersion — students are motivated by story and role-play.
- Social learning — peers reinforce knowledge better than solo study.
- Instant feedback — every quiz and puzzle provides satisfaction and progress.
The result is a playful yet rigorous platform that makes learning feel like discovery — not homework.
Long-Term Vision
We designed the foundation with scalability in mind:
- AI Assistant Integration: Personalized hint generation using LLMs
- Gamified Achievements: Leaderboards, streaks, and quest-based learning
- Educator Tools: Analytics dashboards and course creation kits
- Marketplace Expansion: Teachers can create and sell their own detective missions
Tech Stack: Next.js · Express.js · MongoDB · Socket.IO · Tailwind CSS · Framer Motion
Deliverables: Wireframe + MVP prototype, student dashboard, puzzle engine, QCM system, community hub
Duration: 4 Weeks