Building a Flashcard App Home Screen with Claude Code Without Understanding a Single Line of Code

How I Built the Home Screen of an English Vocabulary App Using Claude Code Without Understanding a Single Line of Code

I honestly didn't understand a single line of the code.

Furthermore, I can't explain what Next.js, Prisma, or SQLite even are. Everything is running, but what's happening under the hood remains a total mystery to me.

This is a story about how I ended up building the home screen of an English vocabulary app in just a few hours over the weekend by messing around with Claude Code in that exact state.

About Me

I work in the security field. While I have experience in infrastructure-related roles, I have zero programming experience. Please keep in mind that I have never worked as a developer while reading this.

The Trigger: Asking Claude to "Build Something"

I heard about a coding tool called Claude Code and wanted to give it a try. However, I had no idea what to build. So, I started by throwing the question to Claude via Chat (the same partner I'm writing this article with): "I want to use Claude Code to build a test app; can you give me some ideas?"

From the ideas provided, I chose an "English Vocabulary Flashcard App (with Spaced Repetition)." Since I was at it, I got greedy and added requirements like audio support and AI-driven automated sentence generation.

Delegating the Entire Design

Claude decided on the entire technology stack:

• Next.js + TypeScript
• Tailwind CSS
• Prisma + SQLite
• Leitner system (spaced repetition algorithm)

...even being told that, the only thing I recognized at that point was the name "TypeScript." I just gave it a thumbs up, saying, "Sure, sounds good."

Claude then suggested, "I'll divide this into Phases 1 through 4, and for each phase, I (Claude) will give you the prompts to feed into Claude Code." Talk about full-service support. I decided to rely on it gratefully.

Phase 1: A Time of Constantly Pressing "Yes"

Chat Claude gave me the prompt for Phase 1 and told me, "Copy and paste this into Claude Code." I obediently pasted it.

Claude Code started thinking and then asked, "Can I execute this command?"

npx create-next-app@latest flashcard-app --typescript --eslint --tailwind ...

...I had no idea what that meant. Because I didn't know, I would take a screenshot and send it to Chat Claude, asking, "What is this? Is it okay to press Yes?"

"This is a command to create a new project. Yes is fine."

"Yes."

"This is just looking for the location of Node.js. It's safe."

"Yes."

"This is type checking; it's read-only."

"Yes."

...The time spent going back and forth between the screens hitting "Yes" continued for a while. I felt zero sense of having done this myself. But, it was moving forward.

Stumbling Block #1: Node.js Wasn't Installed

A few minutes later, Claude Code started searching for Node.js over and over again, checking every possible directory.

When I showed the situation to Chat Claude, it said, "It seems it's probably not installed." I tried typing node -v in the terminal to test it.

zsh: command not found: node

Yeah, it wasn't there.

I swallowed the question of what Node.js even was, downloaded the installer from the official website, and clicked through the installation. v24.15.0 was installed. I didn't know what it was, but it was in.

Stumbling Block #2: Getting Bogged Down by Prisma v7

Once the Node.js issue was resolved, Claude Code started acting weird regarding Prisma.

"Checking version of @prisma/adapter-libsql," "Checking version of @libsql/client," "Checking if Node exists in Homebrew"... it kept endlessly investigating something.

It was clearly not right. I begged Chat Claude for help.

Claude directed me to look at the top of the screen, where I found an error message:

Prisma 7 introduced a breaking change that removed URL configuration in the schema. Downgrading to Prisma 5 (stable/standard configuration) which supports Next.js 15 is the simplest path.

In short, "create-next-app was too new and brought in a newer version of Prisma than the stable one." Claude Code had suggested "let's downgrade to v5."

I had absolutely no idea if this was the right judgment to make.

When I asked Chat Claude if I should accept this, it said, "v7 is too new and lacks information. v5 is a mature, stable version. Downgrading is a reasonable decision; it's okay to say Yes."

"Yes."

Minutes later, after restarting everything with Prisma 5.22.0, the error vanished. Apparently, it was fixed. Honestly, I don't really understand what happened.

Stumbling Block #3: Deciding to Stop Claude Code's Runaway Process

What I learned most from this stumbling process was the phenomenon that "if left alone, Claude Code starts trying to solve problems by messing with the environment."

It started running in a direction where it tried to solve things by adding or replacing components—checking @prisma/adapter-libsql, checking another client, checking Homebrew, etc.

Chat Claude sensed this and taught me that I should choose "No" and stop it for a moment.

"It has entered 'escape via environment tinkering' mode. This is a typical wandering pattern; if you leave it, it will turn into a quagmire."

To a layman's eyes, you might think, "Claude Code is amazing, so if I just leave it, it'll solve everything." But apparently, you need to make the judgment to 'stop and ask for details' at key moments.

This wasn't so much something I did, but a lesson I learned from Chat Claude. In reality, I wasn't the one making the technical judgment; it was a state where one AI was supervising another. I was just the person standing to the side hitting the Yes/No buttons.

Completion: The Home Screen Appeared

After everything in Phase 1 was finished, I hit npm run dev in a separate terminal and opened localhost:3000 in my browser.

I genuinely thought, "Wow, that's amazing."

Centered layout, four cards, icons, descriptions, and a hover effect that makes them move slightly. My only instructions were "make a home screen and four links," yet something this polished came out.

And I didn't write a single line of code for this screen, nor did I read a single line.

Reflections: What does this mean?

It was fun. The joy of having something that actually works right in front of me.

However, I usually work in security. I'm the kind of person who tells others, "Do not run code if you don't understand what's inside it."

What I did today as that very person was:

• Installing a runtime I don't know.
• Creating a project with a framework I don't know.
• Downgrading versions for reasons I don't know.
• Committing files without seeing their content.

This is exactly the kind of behavior I usually tell people "Don't do."

Since this was just local playtime, there was zero actual damage, but next time, I want to properly face it, starting from at least opening up what's already running to see what's inside.
As a security professional, I am well aware that doing this in a production or business environment is out of the question.

For those starting out (light advice)

If there is anyone out there thinking, "I want to try building something with Claude Code too," here is some rough advice:

• Combining Chat Claude and Claude Code is the ultimate combo: When you don't know what Claude Code is doing, sending a screenshot will get you a kind explanation.
• Get into the habit of asking before hitting Yes: Especially be careful with "install," "downgrade," and "setting change" types of operations. I delegated this entirely to Chat Claude (though be careful, as other AIs can also misjudge, so be extra cautious on business machines or shared environments).
• If you get stuck, ask 'why are you trying to do that?': When Claude Code starts to go off the rails, asking for the reason can help you regain composure.
• Take lots of screenshots: They are useful when you write an article later (this is exactly what I did).
• The cost is currently zero (as of 2026/05/05): It is included in the monthly subscription for Claude.ai. If you start using API integration, it will incur separate costs, but I haven't reached that point yet.

---

This article itself was also written together with Chat Claude. Not only do I not understand the content of the app, but half of the content of my own experience log was organized by Claude. I really don't understand anything anymore.

The End.