Vibe Coding is Computational Thinking

At Hello World CS, our curriculum lives in giant JSON files. To edit even a single field (a title, a block of content, or a step in a learning sequence) you have to dive deep into nested structures and hope you don’t introduce a syntax error. It’s not scalable, and it makes collaboration harder than it should be. It makes it nearly impossible to bring in less-technical contractors to help build or revise content.

So I set out to build something better: a visual curriculum builder that we could use to edit, manage, and export curriculum data without ever touching raw JSON. Is it intuitive to use if you don’t know our curriculum architecture? No. But it’s a first step.

I didn’t start with a spec. I didn’t wireframe. I opened up ChatGPT and started typing.

Preview a draft of the Curriculum Builder

Why Vibe Coding?

I’m a former high school CS teacher and now serve as a Director of Curriculum. I earned my master’s in Computer and Information Technology through UPenn’s MCIT program, but I don’t write code every day anymore.

When I needed to build this tool, I didn’t want to return to a full developer workflow. I had dropped my GitHub Copilot subscription when coding stopped being part of my day-to-day. But I kept my ChatGPT Plus subscription, so that’s what I turned to to build the app.

I relied on GPT-4o for high-level decisions and o4-mini-high for most of the implementation. I connected ChatGPT to VS Code so it could directly read and edit my files. It wasn’t flawless. It sometimes overwrote good code, introduced bugs, or misunderstood structure, but I could pair with it, review diffs, and undo as needed.

What emerged wasn’t just a tool. It was a reminder: even when I’m vibe coding, I’m still using computational thinking.

Computational Thinking in Action

Here’s how the entire process, from blank file to functioning app, mirrored the core elements of computational thinking.

1. Decomposition: From Chaos to Components

The JSON was massive. Trying to edit it directly is risky and overwhelming.

To fix that, I broke it into smaller, manageable parts. I mapped out the nested structure and built UI cards for each layer:

• Courses Details
• Rubrics
• Section Groups (Section Groups > Sections > Steps > Block Groups > Blocks)
• Scoring
• Activities Mapping

Each had its own fields, controls, and containers. I didn’t plan the whole hierarchy in advance. I just started with what made sense and expanded outward, one level at a time.

2. Abstraction: Focus on What Matters

I didn’t surface every key from the JSON. I focused on what mattered for editing: titles, types, activity IDs, and teacher-only settings.

When the same UI patterns kept appearing like a labeled input field or a collapsible card layout, I directed ChatGPT to create functions to abstract the pattern. I reused grid layouts, consistent button groups, and styling conventions to keep things clean.

Abstraction helped reduce clutter and kept the interface usable as the complexity grew.

3. Pattern Recognition: Letting the UI Reveal Itself

The UI was repetitive in the best way. Most structures followed a similar format: a title, a few controls, and a nested list of child elements. As I worked, I started to spot patterns:

• Each section needed up/down/× buttons
• Most forms followed a label-and-input grid
• Drag-and-drop logic is reusable in many different sections

Recognizing those patterns allowed me to reuse layout rules and logic, saving time and avoiding bugs.

4. Algorithms and Logic: Hidden, but Everywhere

This wasn’t algorithmic in the textbook sense. I wasn’t writing Dijkstra’s or Merge Sort, but there was logic everywhere:

• Recursive cleaning of exported JSON
• Conditional rendering of fields (for example, show the URL input only when audio is enabled)
• Drag-and-drop list ordering with consistent IDs

ChatGPT helped me get the structure down, but my own knowledge helped when things didn’t behave as expected.

5. Evaluation and Debugging: Trust, but Verify

ChatGPT was helpful, but not flawless. It sometimes overwrote working logic or broke functional layouts. I couldn’t blindly accept every change. I had to evaluate each update, debug in DevTools, and roll back when necessary.

I went through a frustrating period when almost every request was met with a generation error where ChatGPT couldn’t edit my code directly. I learned to narrow the scope of my requests, and highlight directly where ChatGPT should be working in my files. This led to less errors.

I used tricks I used to teach my students: adding red dotted borders around elements I was testing, logging intermediate values, and stepping through UI updates to see where things broke.

My ability to debug came directly from my background in web development and teaching. I wasn’t just reviewing code. I was evaluating behavior, tracing data, and trying fast experiments.

6. Refinement and Polish: Making It Feel Good

Once the core functionality was working, it was time for the fun part: polish. This is the stage that’s often skipped in classroom projects, but in real software development, it’s where a good tool becomes a great one.

I added a pull-out JSON preview pane so I could instantly see what the final export would look like. That helped me spot issues early and gave me confidence that the app was doing exactly what I needed.

I built a dynamic sidebar that lets you navigate to any section, step, or group in the course. With large JSON structures, scrolling wasn’t going to cut it. A simple nav list made the interface feel manageable.

Then came the visual layers:

• Smooth animations to help sections collapse and expand naturally
• Icons from Bootstrap and Font Awesome to make the interface feel familiar
• Background color tinting for the card hierarchy: section groups, sections, steps, and blocks each got a slightly different shade to help visually distinguish structure

These details made the tool feel responsive and usable. They didn’t change the logic, but they improved the experience dramatically. And even these refinements involved computational thinking: breaking down layout problems, applying abstraction, and using logic to make small pieces work together.

Tools Are Not Magic

ChatGPT did a lot of heavy lifting. But my knowledge made the difference.

I knew when to trust it, when to override it, and when to just take over and write a fix myself. I used my frontend experience to tweak margins, refactor card layouts, and smooth out interactions without needing to walk ChatGPT through every decision.

That’s why coding is not dead. Smart tools are powerful, but they still need a smart human behind them.

A Final Thought: Let Students Do This

This project reminded me how much you learn when you build something for real. I had to think through problems, test solutions, debug unexpected behavior, and manage both logic and layout. It was fun, frustrating, and incredibly rewarding.

If I were teaching CS again, I’d turn this into a final project. Let students build a tool from scratch or extend an existing one. Let them experience how their skills show up in the real world.

They’ll learn how to decompose problems, abstract complexity, recognize patterns, write logic, and debug behavior.

That’s not just coding. That’s computational thinking.