Skip to main content
Menu
Back to projects
PuzzlePy logoPuzzlePy

Python learning platform

Learn Python by building it.

A visual learning platform that helps beginners move from playful blocks to generated Python, one focused concept at a time.

Explore the productWatch walkthrough
Role
Creator and Full-Stack Developer
Status
In active development
PuzzlePy visual programming lesson assembling blocks beside live generated Python

Visual blocks, generated Python, and guided feedback in one learning flow.

Project overview

A visual path from
first idea to real Python.

Visual logic to code
Live concept
repeat 3 times
move forward
generated.py
for i in range(3): move_forward()

PuzzlePy is a full-stack learning platform for beginners who need a clearer first step into programming. Learners assemble programs with visual blocks, inspect the Python those blocks generate, and build confidence through structured lessons, challenges, and persistent progress.

PuzzlePy learning engine

A workspace where each learning signal connects.

System canvas
Learner workspaceConnected flow
Learning Engine
  1. Visual LogicBuild
  2. Python OutputGenerate
  3. Guided ProgressionGuide
  4. Gamified PracticeReinforce

What it delivers

One connected system for learning by building.

  1. 01

    Build visually

    Assemble program logic using Blockly-based puzzle pieces.

  2. 02

    See real Python

    Inspect generated Python beside the visual workspace.

  3. 03

    Learn progressively

    Follow structured courses, lessons, prerequisites and validated completion.

  4. 04

    Practise through challenges

    Solve guided tasks using contextual block toolboxes.

  5. 05

    Earn persistent progress

    Gain XP, streaks, achievements and leaderboard positions.

  6. 06

    Manage learning content

    Create, review, version, publish and archive educational content.

Product showcase

A connected learner experience from the first block to lasting progress.

A first interaction lets learners assemble a tiny program and inspect the generated Python.
A learner dashboard that brings progress, XP, and the next lesson into one place.
A structured course catalogue with visible learning paths and completion state.
Course-level progress and focused lessons help learners take the next step.
Lesson instructions, concepts, and completion feedback share one clear workspace.
The playground connects a block library, visual canvas, generated Python, and console.
Workspace controls support saving, importing, exporting, undoing, redoing, and inspecting generated code.
Challenges turn concepts into short, practical programming tasks.
The profile surfaces learning activity, skill mastery, and accumulated progress.

System architecture

Architecture plus engineering decisions become a trustworthy learning platform.

Architecture

The server owns what matters.

The learner client, backend API, and MongoDB content model are deliberately separated. The browser can build and simulate a bounded Blockly subset, while the server owns identity, workspaces, completion checks, XP events, achievements, and publishing state.

  • Learner client and generated Python visibility — architecture signal 1
  • Server-owned identity, completion and XP events — architecture signal 2
  • Bounded Blockly browser simulation — architecture signal 3
MongoDB-backed content, workspaces, progress, and reward events.

Engineering focus

  1. 01

    Make Python approachable without hiding it

    Visual blocks lower the entry barrier, while the generated Python view keeps the learning path connected to real source code.

  2. 02

    Keep progression trustworthy

    Completion, XP, streaks, rankings, and ownership are resolved by authenticated backend endpoints rather than client-submitted values.

  3. 03

    Support safe experimentation

    The browser simulator supports a bounded Blockly subset instead of executing arbitrary generated Python in the application server.

Technology stack

Learner experience

Interface
  • React
  • React Router
  • Blockly
  • Context API
  • CSS

Application backend

Authority
  • Node.js
  • Express
  • MongoDB
  • Mongoose
  • JWT authentication

Quality and testing

Reliability
  • Jest
  • React Testing Library
  • Supertest
  • OpenAI-compatible content adapter

Project walkthrough

See PuzzlePy in motion.

A recorded overview of the project, its learner-facing experience, and the visual programming workflow.

How PuzzlePy works

Connect the logic.
Watch it become Python.

Build programs visually with puzzle blocks while PuzzlePy reveals the equivalent Python code in real time.

Five connected visual puzzle blocks create a message, store it, print it, repeat three times, and print the loop step. The equivalent Python code appears alongside the visual program.

generated.py
Live output
Output

Hello, Python!

0

1

2

Visual program

Puzzle workspace

0 blocks
  1. 01

    Create text

    Text value: “Hello, Python!”

  2. 02

    Store value

    Variable: message

  3. 03

    Print message

    Send message to output

  4. 04

    Repeat

    Repeat the next action three times

  5. 05

    Print step

    Print the current loop step

Program complete

Product roadmap

The next pieces of PuzzlePy.

A forward-looking journey focused on deeper learning tools, safer execution and richer classroom experiences.

PuzzlePy's roadmap follows six connected future milestones, from expanded browser simulation to advanced content infrastructure, ending at the next horizon.

  2. Future roadmap milestone. Scroll further to discover this item.
  3. Future roadmap milestone. Scroll further to discover this item.
  4. Future roadmap milestone. Scroll further to discover this item.
  5. Future roadmap milestone. Scroll further to discover this item.
  6. Future roadmap milestone. Scroll further to discover this item.