The latest articles on DEV Community by SQL SIDE QUEST (@sqlsidequest). https://dev.to/sqlsidequest https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3668016%2F614fa147-5687-43d9-8442-c4ea26692954.png https://dev.to/sqlsidequest en SQL SIDE QUEST Thu, 18 Dec 2025 23:15:20 +0000 https://dev.to/sqlsidequest/sql-side-quest-an-immersive-story-telling-sql-game-4jin https://dev.to/sqlsidequest/sql-side-quest-an-immersive-story-telling-sql-game-4jin <h2> <strong>Let's be honest: practicing SQL can feel dry.</strong> </h2> <p>Running queries against static datasets often lacks context and thrill. What if you could learn by defending a city from missiles or solving a murder mystery instead?</p> <p>That is the problem <strong>SQL SIDE QUEST</strong> aims to solve. It’s an immersive, storytelling-driven way to practice and learn SQL. Think of it as an interactive novel where you don’t just read the story. you drive it forward by writing real SQL queries to solve mysteries.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8er1yqxdc13n8v8r4hxl.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8er1yqxdc13n8v8r4hxl.png" alt=" " width="800" height="422"></a></p> <h2> <strong>Key Features &amp; Player Benefits</strong> </h2> <p><strong>Learning Mode:</strong> Includes recorded lessons designed for beginners or those looking to polish their skills. I prioritized this feature because I found it frustrating to flip between video tabs and a code editor on other platforms. I’ve built a split-screen view so you can watch lectures and practice queries simultaneously without losing your flow.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F960jdxwh2h3yr97gqhvq.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F960jdxwh2h3yr97gqhvq.png" alt=" " width="800" height="412"></a></p> <p><strong>Story Mode:</strong> Progress through chapters of immersive, narrative-driven challenges.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdisf8qdm7012khn33z91.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdisf8qdm7012khn33z91.png" alt=" " width="800" height="425"></a></p> <p>**Scenario Mode: **Standalone SQL challenges for quick practice.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5fjblhgnsh5w0yjiirwn.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5fjblhgnsh5w0yjiirwn.png" alt=" " width="800" height="395"></a></p> <p><strong>Website:</strong> <a href="http://www.sqlsidequest.com" rel="noopener noreferrer">www.sqlsidequest.com</a></p> <h2> <strong>The Tech Stack</strong> </h2> <p>I chose a modern stack to keep the experience snappy and responsive:</p> <p><strong>Frontend</strong>: React 18 + TypeScript + Vite</p> <p><strong>Styling</strong>: Tailwind CSS + Framer Motion (for those smooth transitions!)</p> <p><strong>Database</strong>: Supabase (PostgreSQL)</p> <p><strong>Code Editing</strong>: Custom implementation (built from scratch, not using Monaco/CodeMirror)</p> <p><strong>i18n</strong>: React-i18next</p> <p>Final Thoughts<br> My biggest hope is simply that you enjoy the game while you learn. I want SQL to feel like an adventure you actually look forward to. Also, there are <strong>no subscriptions or payments</strong>. it is completely <strong>free to play (F2P)</strong>.</p> <p>Thank you for checking out my passion project. I’m looking forward to hearing your comments and feedback!</p> sql webdev programming typescript