Blog #31: 1 AM and the Search for the 'Missing' File

It was 1 AM, just a few hours before an important demo with the client. A critical display bug appeared on the "Payment" button—it was misaligned and unclickable on mobile devices. I told myself: "It'll probably only take 5 minutes to fix the CSS."

But 5 minutes turned into an hour. I opened the src/components directory; there were hundreds of files. I searched for Button.tsx, not it. I searched for PaymentSelection.tsx, didn't see the logic there either. I started to panic. This project had passed through the hands of three generations of developers, each with their own "taste" for organization. Some divided by atoms/molecules, some by features, others just threw everything into common.

I used grep to search for the UI text. It returned 5 different places. I fixed it in one spot, but it was still broken elsewhere. I started to doubt my own ability: "Why can't a senior engineer find the file they need?". Ambiguity took over. I realized I was standing in a directory "minefield" created by my own and my colleagues' impulsiveness.

1. What happened?

The system lacked a unified file organization standard. Code was scattered chaotically, making it impossible to determine the "Single Source of Truth" for a specific component.

2. What I thought the cause was

Initially, I thought it was a code caching issue or that I was searching for the wrong keyword. I spent time digging through global style folders, thinking it was a CSS override bug.

3. How I debugged it

I started by trying to delete elements in the DOM using DevTools to see which CSS was actually having an effect. Then, I traced that class name in the source code and used VS Code Search to scan the entire project.

4. The moment of realization

I realized that the button had been copy-pasted into 3 different places with 3 separate CSS files instead of being reused from a Shared Component. The "messy" folder structure made managing these duplicates impossible.

5. The fix

• Quick patch: Fix all 3 spots to make it in time for the demo that night.
• Real fix: Reorganize based on a Module-based Structure. Everything belonging to Payment should be in features/payment. Eliminate duplication by creating a truly shared BaseButton.

6. Looking back

If I were to redesign from scratch, I would establish an extremely strict Folder Convention from day one. Folder structure isn't the place to express creativity; it's a place where anyone can find what they need within 30 seconds, even at 1 AM. I've learned that a good structure is more valuable than a thousand lines of clever code.