KidC: C Programming Platform for Children

A web-based platform designed to teach C programming to children through interactive lessons, exercises, and a real-time code editor.

Features

  • ๐Ÿงฉ Structured Learning Paths: Progressive lessons from basic to advanced concepts
  • ๐Ÿ’ป Interactive Code Editor: Real-time compilation and execution of C code
  • ๐Ÿ” Hands-on Exercises: Practice with immediate feedback
  • ๐Ÿงช Automated Testing: Verify code solutions against test cases
  • ๐Ÿ† Progress Tracking: Monitor learning achievements

Project Structure

โ”œโ”€โ”€ backend/
โ”‚   โ”œโ”€โ”€ database/
โ”‚   โ”‚   โ”œโ”€โ”€ migrations.ts    # Schema definitions
โ”‚   โ”‚   โ””โ”€โ”€ queries.ts       # DB query functions
โ”‚   โ”œโ”€โ”€ routes/
โ”‚   โ”‚   โ”œโ”€โ”€ api.ts           # API routes
โ”‚   โ”‚   โ””โ”€โ”€ static.ts        # Static file serving
โ”‚   โ”œโ”€โ”€ services/
โ”‚   โ”‚   โ”œโ”€โ”€ compiler.ts      # C code compilation service
โ”‚   โ”‚   โ””โ”€โ”€ exercises.ts     # Exercise management
โ”‚   โ””โ”€โ”€ index.ts             # Main entry point
โ”œโ”€โ”€ frontend/
โ”‚   โ”œโ”€โ”€ components/
โ”‚   โ”‚   โ”œโ”€โ”€ CodeEditor.js    # Interactive code editor
โ”‚   โ”‚   โ”œโ”€โ”€ ExercisePanel.js # Exercise display and testing
โ”‚   โ”‚   โ””โ”€โ”€ LessonView.js    # Lesson content display
โ”‚   โ”œโ”€โ”€ data/
โ”‚   โ”‚   โ”œโ”€โ”€ lessons.js       # Lesson content
โ”‚   โ”‚   โ””โ”€โ”€ exercises.js     # Exercise definitions
โ”‚   โ”œโ”€โ”€ index.html           # Main HTML template
โ”‚   โ”œโ”€โ”€ app.js               # Frontend JS entry point
โ”‚   โ””โ”€โ”€ style.css            # Custom styles
โ””โ”€โ”€ shared/
    โ””โ”€โ”€ types.ts             # Shared type definitions

How It Works

  1. Students select a lesson from the structured learning path
  2. Each lesson includes explanations, examples, and interactive code snippets
  3. Students can write and execute C code directly in the browser
  4. Exercises challenge students to apply what they've learned
  5. Automated tests verify solutions and provide immediate feedback
  6. Progress is tracked to guide the learning journey

Technologies Used

  • Frontend: HTML, CSS, JavaScript, TailwindCSS
  • Code Editor: Monaco Editor
  • Backend: Hono (TypeScript)
  • Database: SQLite
  • C Compilation: WebAssembly-based C compiler