A gamified SQL learning platform built for the Playpower EdSprint Hackathon.
Created by Team Whitesnake: Tarun Nagpal & Gaurav Daware
SQL Quest is a fun, interactive game designed to help users practice and master SQL queries through level-based challenges. Each level features a unique theme and storyline with a progressively harder SQL problem. Users play as a character navigating through different stages on a map, solving SQL puzzles to advance.
- Traditional SQL practice can be boring or overwhelming.
- Students often struggle to retain SQL knowledge without consistent, interactive practice.
- SQL Quest adds storytelling, gaming mechanics, and interactivity to learning SQL.
- Built for beginners to intermediate learners, especially engineering students and tech aspirants.
- 🎮 10 gamified levels from Easy → Hard
- 🌍 Story-based Map interface with interactive design
- 🧠 Real SQL challenges per level
- 📊 Progress tracking with localStorage
- 🧾 Lives & progress bar tracking in-game
- 📹 Video intro on homepage
- 🗨️ Animated character & chat bubbles for guidance
- Video Introduction for first-time users
- “Play Now” button for quick access
- Components: About, Story, CTA
- Built with React + TailwindCSS for sleek UI
- Bubble messages to guide users
- Displays remaining lives and progress
- Unlocks level cards as users progress
- Interactive levels implemented in Phaser.js
- Each level contains a unique SQL challenge
- Levels get progressively harder
- Backgrounds, stories, and character sprites per level
| ID | Title | Difficulty | Objective | SQL Concept |
|---|---|---|---|---|
| 1 | Path to the Hidden Map | Basic | Reveal all paths in the map table. | SELECT * FROM table |
| 2 | 🌿 Jungle River Adventure | Basic | Find explorers with high courage. | WHERE, > |
| 3 | Archery Castle Challenge | Intermediate | Filter artifacts based on category and if found. | WHERE, IN, IS NOT NULL |
| 4 | Build the Raft | Intermediate | Find raft instructions with bamboo or vines. | WHERE, LIKE, OR |
| 5 | Free the Sacred Beast | Intermediate | Select weapons with high agility and low weight. | AND, >=, < |
| 6 | The Trap Tiles of Truth | Intermediate | Count animals and find duplicates. | GROUP BY, COUNT, HAVING |
| 7 | Arm the Heroes | Advanced | Join explorers with their spells. | JOIN, SELECT with alias |
| 8 | Jungle River Raft Race | Advanced | Get the average courage of racers. | AVG() |
| 9 | Ancient Jungle Temple Quest | Expert | Update door state for gold treasures. | UPDATE, WHERE |
| 10 | FINAL - SQL Battle Arena | Legendary | Find the strongest fire spell by power. | WHERE, ORDER BY, LIMIT |
| Frontend | Game Engine | Styling | State Management | Animation | Storage |
|---|---|---|---|---|---|
| React | Phaser.js | TailwindCSS | Redux | Three.js | LocalStorage |
| Tool | Purpose |
|---|---|
| ChatGPT | Ideation & Storytelling |
| Claude & Perplexity | Development guidance |
| Gemini | Game assets generation |
- Redux is used for global state and user management
- LocalStorage is used for persisting level progress, lives, and unlocked content securely
- Simple and efficient architecture for gamified learning
Here are some useful resources that helped shape this project and may help you contribute or build further:
- Phaser.js Documentation – HTML5 2D game framework used for building interactive levels.
- Three.js Documentation – JavaScript 3D rendering library used for cinematic background animations.
- SQL Games – A Fun Way to Learn SQL (Medium) – Inspiration and perspective on how gamification can be used to teach SQL concepts.
# Clone the repo
git clone https://github.com/Tarunnagpal7/sql-quest.git
# Navigate into the project folder
cd sql-quest
# Install dependencies
npm install
# Start the development server
npm run dev