Home

Coding Drills Wiki

Coding Drills is a comprehensive, interactive programming education platform for mastering coding through active recall and hands-on practice. It supports 25 programming languages, 4 frontend frameworks, and multiple learning modes.

Live site: coding-drills.vercel.app

---

Quick Links

Page	Description
Architecture Overview	System design, tech stack, data flow
App Routes	Every page and route in the application
Components	All React components and their responsibilities
Data Model	Types, interfaces, and data structures
Frontend Drills System	React, Angular, Vue, Native JS drill platform
Problem & Exercise System	How problems, exercises, and quizzes work
AI Features	WebLLM tutoring, AI mock interviews
State Management	Context providers, hooks, localStorage
Styling & Design System	Tailwind, CSS variables, dark mode
Testing	Vitest, Playwright, Storybook setup
Configuration & Build	Next.js config, scripts, CI/CD
Contributing	How to add languages, problems, and features

---

At a Glance

Metric	Count
Programming languages	25 (21 general + 4 database)
Frontend frameworks	4 (React, Angular, Vue, Native JS)
Algorithm visualizations	100+
Algorithm pattern problems	170
Interview problems	72 algorithm + 28 system design
Regex categories	7
Exercise categories	8
Frontend drill problems	460 (all sample-validated, with real-world context examples)
Frontend quiz questions	448
Frontend UI patterns	616+ (with starter code and behavioral tests)
Total language problems	8,280+ across 25 languages
Unit tests (Vitest)	13,995 across 67 test files
Learning modes	9+ (Drill, Quiz, Study, Training, Building Blocks, UI Patterns, Cheatsheet, Interview, Regex)

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
UI	React 19, Tailwind CSS 4
Editor	Monaco Editor
Animation	Motion (Framer Motion)
AI (local)	WebLLM (Llama-3.1-8B via WebGPU)
AI (cloud)	OpenAI SDK (optional fallback)
Testing	Vitest + Playwright + Storybook 10
Linting	ESLint + Biome
Package manager	pnpm