DEV Community

Arsen Stepanyan
Arsen Stepanyan

Posted on

Stop Watching Tutorials, Start Coding: How I Built CodeQuizz, an AI-Powered Active Learning Engine

Let’s be honest: we’ve all been trapped in "Tutorial Hell." You watch a 4-hour video on advanced Python or React, nod along feeling like a genius, and then open a blank editor only to realize you don't know where to start.

Passive consumption gives us the illusion of competence. Real growth, however, requires friction. It requires active learning and hands-on coding practice.

That’s why I built CodeQuizz—a platform designed to replace passive watching with interactive, challenging, AI-generated coding problems that adapt to your skill level and dynamically expand the more you learn.

Here is a deep dive into the philosophy behind CodeQuizz, the tech stack that powers it, and the engineering challenges I solved to bring it to life.


🧠 The Core Philosophy: Active Problem Solving

The initial value proposition for CodeQuizz was simple but aggressive. Over time, I refined the messaging to focus on what actually matters to developers: hands-on practice.

Instead of pre-written, static questions that eventually run out, CodeQuizz uses a dynamic, AI-driven taxonomy. The platform evaluates you based on the language of your choice, your difficulty preference, and specific topic scopes, forcing you to write code and solve problems rather than just multiple-choice guessing.


🏗️ The Tech Stack & Architecture

To make the platform fast, scalable, and cost-effective, I built a robust full-stack architecture deployed entirely on Google Cloud Platform (GCP).

The Stack:

  • Backend: Python + FastAPI for high-performance, asynchronous API routing.
  • Database: PostgreSQL (running in a Docker container) managed with Alembic for migrations.
  • Frontend: A modern Javascript framework (React/Vue) served via Nginx.
  • Infrastructure: Deployed on a GCP e2-medium Compute Engine instance.
  • Routing & SSL: Traefik acts as a reverse proxy to manage domain routing and automatic Let's Encrypt SSL certificates.
  • AI Engine: Integrated with Google's Vertex AI / Gemini for on-the-fly curriculum generation.

By containerizing everything with Docker Compose, the local development environment matches production exactly. I even opted for a single-VM deployment over serverless to maintain maximum flexibility and keep monthly costs highly optimized (under $35/month).


🤖 The "Secret Sauce": A Dynamically Expanding AI Curriculum

The most complex feature of CodeQuizz is how it generates content. I didn't want an AI that just spits out generic, repetitive questions.

1. The Taxonomy System

The curriculum is built on a "Taxonomy Node" system. When a user requests a question, the engine checks their selected language, difficulty (Easy, Medium, Hard), and topic scope.

2. Auto-Expanding Topics

What happens when a user exhausts all the questions for a specific topic? Instead of hitting a wall, the app triggers an automated, AI-driven expansion of the taxonomy. The system detects the exhaustion and autonomously generates a brand-new, unique node, persisting it to the database. The curriculum grows organically alongside the users.

3. Academic Depth

To prevent the AI from generating superficial "standard library API" questions, I engineered the system prompts to enforce strict, academically grounded scope definitions. For example, if you hit an "Algorithms" node, the AI is prompted to pull concepts aligned with authoritative computer science resources (like CLRS), ensuring genuine technical depth.


🛠️ Overcoming Engineering Challenges

Building an AI-wrapper is easy. Building a scalable application with complex business logic is hard. Here are a few hurdles I had to cross:

  • Idempotent Data Seeding: To ensure a smooth onboarding for new, unregistered users, I built a seed_questions.py script. It guarantees a minimum baseline of 27 questions per programming language across various difficulties. The script intelligently checks the database state, ensuring it only generates what is missing without triggering unnecessary DB wipes or duplicate API calls.
  • Global Leaderboard Scaling: As the platform grew, a simple database query for rankings became inefficient. I had to design custom leaderboard logic capable of gracefully handling user rankings, managing growth well beyond the first 100 participants, and quickly locating a specific user's position within the global hierarchy.
  • Modernizing the UI: Waiting for an AI to generate a complex technical problem takes a few seconds. Instead of a boring spinner, I revamped the AI generation UI to feature a sleek, puzzle-themed "chaindrop" progress bar. It hides verbose status logs, features millisecond-precision timers, and cleanly indicates the phase of generation, keeping the user engaged.
  • Markdown Rendering Safety: Handling AI-generated Markdown containing complex code blocks is notoriously tricky on the frontend. Instead of writing brittle regex to parse the text in the browser, I shifted the responsibility to the LLM via strict system prompts, ensuring backticks and special characters are perfectly formatted before they ever hit the client.

🚀 What's Next?

Building CodeQuizz has been a masterclass in prompt engineering, full-stack architecture, and user experience design. The platform is live, the AI is generating incredible problems, and the leaderboard is waiting.

If you are tired of passive learning and want to genuinely level up your coding skills through friction and practice, come give it a try.

Check out CodeQuizz here: codequizz.com

I’d love to hear your feedback on the UI, the difficulty of the AI questions, and how the leaderboard feels! Drop a comment below if you have any questions about the architecture or the AI implementation.

Top comments (0)