AI from Zero to App Development in 1000 Hours #24

#24: A Pitch-Black Screen!? Returning to Basics from Minimized UI

Summary

This episode explores how my attempt to create a "stylish minimized UI" ended up confusing users. Realizing this, I decided to return to a simpler, always-visible layout. Through detailed conversations with ChatGPT, I identified the root cause and documented the entire restoration process. This story is a lesson in prioritizing usability over visual flair.

A Black Screen on Launch... Caused by “Style”?

I first noticed something strange when launching the app—the screen was completely black, with nothing visible. Even though I sensed something was wrong, I couldn’t pinpoint the issue. So I asked ChatGPT:

“The initial screen goes completely black. I want the prison labor screen to be fully visible from the start again. I’d like to undo the minimization feature.”

Trying to create a sleek interface, I had implemented a “minimized list” that only revealed content when clicked. But that very feature seemed to be the culprit.

Investigating with ChatGPT: “Is MinimizedList the Problem?”

I immediately suspected MinimizedList.js. I had already sent the file to ChatGPT, so I asked directly if this minimized list was breaking the display.

Surprisingly, the answer came back:

“I don’t see any reference to MinimizedList in App.js.”

That threw me off. “Then why doesn’t the screen change even if I delete it?” “What was the point of creating MinimizedList in the first place?” My confusion deepened.

ChatGPT calmly assessed the situation, pointing to elements like expandedComponent and overlay in App.js and App.css. It concluded that the screen rendering was likely being controlled at the App level.

Back to Basics: Showing Everything from the Start

I asked:

“So if I revert the js and css in App, everything will be back to normal? You’re sure the minimization issue is coming from App, right?”

ChatGPT replied clearly:

“Yes, restoring those will return it to normal.”

Without hesitation, I began restoring the original App structure. Here's an example of the restoration state used:

{
  "expandedComponent": null,
  "rendering": "Display all UI from the start",
  "components": ["TaskManager", "Timer"],
  "minimizedList": "Deleted",
  "visibleState": "Always visible"
}

Once the original UI was restored, the app started working normally again. That comforting feeling of instantly seeing a familiar screen—it's more valuable than I expected.

The UI Design Trap: Clarity Over Coolness

This experience taught me that “stylish” doesn’t always mean “user-friendly.” Just because something is technically possible doesn’t mean users can intuitively interact with it.

Still, experimenting with the minimized list helped me gain:

• A deeper understanding of useState for state management
• Experience with conditional rendering using expandedComponent
• Skills in controlling visibility with CSS

The Takeaway: “No Feature Is Truly Wasted”

Even though I reverted the change, I don’t consider it a failure. It was because I tried something new that I learned what’s necessary and what’s not.

Talking with AI helped me organize both my code and the current state of my UI. Returning to basics isn’t regression—it’s progress in disguise.

---

Today's Haiku (English)

The screen was too dark.
So I lit it with old ways—
Clarity returned.