AI App Development from Zero Knowledge – 1000 Hours #17

#17: Collapse and Reconstruction of Structure

Summary

This time, I document how I worked with ChatGPT to break down a bloated React app and rebuild it into a more reusable structure. As the number of files grew, so did the number of errors. I pushed ChatGPT hard with many questions, but we kept moving forward. The key idea is "Separation of Concerns." If your project is “running, but disorganized,” this story might offer some helpful insights.

The Beginning of Collapse: “Just Split It Up” They Say

When TaskManager.js exceeded 700 lines, I asked:

“Are we really going to split the two JS files into eight?”

ChatGPT’s answer was yes.
But I couldn’t agree — why were the detail screens being split neatly, while the penalty screens remained a chaotic mess?

Yes, separating structure allows for reuse. But it also increases management complexity.

---

Button, Avatar, StatusBox... First Steps of Component Separation

We started with the easier components:
Button.js for displaying buttons, Avatar.js for avatars, and StatusBox.js for user stats.

Here's how we started organizing them:

{
  "component": "StatusBox",
  "props": {
    "level": 3,
    "hp": 15,
    "mp": 2,
    "strength": 10,
    "intelligence": 4,
    "endurance": 5,
    "missedDays": 1
  }
}

However, both ChatGPT and I underestimated how these changes would ripple through the entire app.

---

Endless Frustration: “You Wrote This Code, Didn’t You?”

I kept saying to ChatGPT:

“Why are there bugs in the code you gave me?”
“This can’t be right. Are you kidding me?”

This wasn’t anger — it was anxiety born of distrust.
The deeper I got into the project, the more my trust in AI was tested.
But each time, ChatGPT would admit:

“I didn’t fully grasp your intention. I’m sorry.”

At times, it was more honest than a human.

---

CSS Hell and the Trap of File Organization

A capitalization mismatch caused a compile error.

“TaskList.js and tasklist.js are not the same!”

VS Code’s file handling, Git integration, TypeScript’s strict checks...
Everything felt heavy.
Here’s how that conversation went:

Me:

“Why won’t the error go away?! Explain it!”

ChatGPT:

“It might be a mismatch in folder name capitalization. Git treats them as different.”

When I fixed that, the screen finally rendered correctly.

---

Git Is a Save Point — But Comes With No Instructions

I once asked:

“Is Git like a save point in a game?”

ChatGPT replied:

“That’s correct. But ‘loading’ requires the right commands and understanding.”

Exactly. A save is meaningless if you don’t know how to load it.
Through this article, I want to share the habit of saving and the know-how of going back.

---

Splitting Isn’t the End — “Maintaining the Whole” Is Your Job

Each button, every line of CSS — it’s all part of the functioning whole.

After restructuring, some features broke:
Missed days stopped displaying. Buttons stopped responding.

That’s when I realized:

“Organization” is just a method to avoid losing sight of the whole.

---

Conclusion: Completion Means Having the Will to Keep Fixing

On the surface, this task was just tidying up.
But in reality, it was a cycle of breaking and fixing.
Splitting things apart caused more bugs and revealed weaknesses.

Yet, through ongoing dialogue with ChatGPT, my understanding deepened.
It pointed out dangers, suggested necessary variables — but the final decisions were mine.

That’s app development.
And honestly, it’s a lot like life itself.

Today's Haiku

One by one, overcome each bug—and a path will emerge.