SQL learning often suffers from abstract tutorials or simulated environments that don’t translate well to real-world database skills. SQL Noir tackles this problem by turning SQL querying into an interactive mystery game, where each case is a self-contained investigation requiring real SQL queries against a live PostgreSQL database.
How SQL Noir turns SQL into detective work
SQL Noir is an open-source project written in TypeScript using Next.js for the frontend and Supabase as the backend database layer. The game presents players with criminal cases ranging from simple thefts to complex murders. Each case corresponds to a schema and data set in a PostgreSQL database hosted on Supabase.
Players write actual SQL queries to explore the evidence database and solve the mystery. Unlike many SQL learning tools that simulate query results or use sandboxed interpreters, SQL Noir executes the queries directly against a real PostgreSQL instance. This means the skills you develop while playing translate directly to real-world SQL querying.
The architecture relies on Next.js to deliver an interactive web interface, while Supabase provides the managed PostgreSQL backend and authentication. The project supports multiple community-contributed localizations, including Brazilian Portuguese and a culturally adapted Simplified Chinese version with localized characters and a Shanghai setting.
This setup requires Node.js 18.17 or higher, the Supabase CLI for database migrations, and environment variables to connect the Next.js frontend to the Supabase backend.
What makes SQL Noir’s approach to learning SQL stand out
The standout feature is its gamified approach that uses authentic SQL queries rather than a simulated or restricted environment. This makes the learning experience hands-on and directly applicable to real databases.
The game’s design treats the database schema as a crime scene and the SQL queries as investigative tools. This metaphor helps learners understand schema exploration, joins, filtering, aggregation, and other SQL concepts in a contextualized way.
The codebase is written in TypeScript with a clear separation of concerns: Next.js handles the UI and API routes, while Supabase manages the data layer. The use of Supabase migrations automates schema setup and updates, improving developer experience.
The project balances community engagement through localization contributions, which not only broadens its accessibility but also demonstrates a flexible architecture that can adapt to different cultural contexts.
One tradeoff is the dependency on Supabase and PostgreSQL, which means learners need to set up a Supabase project rather than run a fully local environment. However, this aligns well with modern cloud-based development practices and offers a realistic environment.
The code quality is approachable for developers familiar with Node.js and React ecosystems, with clear documentation and a modular structure. It is opinionated around PostgreSQL syntax and features, so learners focusing on other SQL dialects may find some differences.
Getting started with SQL Noir
Prerequisite: Node.js 18.17+ (required by Next.js).
- Clone the repository.
- Install dependencies:
npm install - Create a new project on Supabase.
- Copy your Supabase project’s
anon public keyandProject URL. - Create a
.env.localfile in the project root with the following content:NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key NEXT_PUBLIC_SUPABASE_URL=your_supabase_url - Install the Supabase CLI following Supabase CLI instructions.
- Login to Supabase:
supabase login - Link your local project to your Supabase project:Select the project when prompted.
supabase link - Apply database migrations:
supabase db push - Start the development server:
npm run dev - Open your browser and navigate to
http://localhost:3000to play.
This setup runs the full game locally with a live connection to your Supabase PostgreSQL instance.
Verdict
SQL Noir is a solid example of gamified learning that uses real SQL execution to teach database querying. Its architecture leveraging Next.js and Supabase aligns with modern full-stack development practices, offering learners practical skills on real tools.
The main limitation is the dependency on Supabase, which involves cloud setup and may not suit everyone wanting a fully local or lightweight environment. However, this tradeoff provides a realistic backend experience that sandboxed tutorials often lack.
For developers or learners wanting to improve their SQL skills in a contextual, engaging way—especially those comfortable with web technology stacks—SQL Noir is worth exploring. It’s also a neat case study in how to build educational games that double as practical skill builders.
If you’re looking for a straightforward tutorial or a quick SQL playground, other tools might be simpler. But if you want a deeper dive into SQL queries in a fun, scenario-driven setting, SQL Noir delivers without shortcuts.
Related Articles
- Inside Mandiant’s FLARE Learning Hub: A practical Go reverse engineering reference and malware analysis training platform — Explore Mandiant’s FLARE Learning Hub, an open educational platform for malware analysis and reverse engineering with a
- GrafeoDB: a high-performance Rust graph database supporting six query languages with a unified execution model — GrafeoDB is a Rust-native graph database supporting LPG and RDF with six query languages. Its modular translator compile
- Supabase: composable open-source backend-as-a-service built around Postgres — Supabase combines specialized open-source tools around Postgres to offer a Firebase-like backend platform. Its modular a
- OpenGame: generating playable web games from natural language with a dual-skill LLM framework — OpenGame from CUHK MMLab generates full web games from natural language prompts using a dual-skill LLM architecture that
- OrcaQ: a family-aware multi-database editor with safe AI assistance — OrcaQ is a Vue 3 and Tauri-based desktop database editor that adapts its UI for SQL and Redis. It offers schema explorat
→ GitHub Repo: hristo2612/SQLNoir ⭐ 1,611 · TypeScript