When I built my first React app, I didn’t expect to be embarrassed by it.
I had the logic working. Components rendered. Data flowed. But when I stepped back and looked at the whole thing… it just felt off. No one had to tell me I knew it was ugly.
Looking back now, I realize that this “ugly” version was one of the best things that could have happened. It forced me to think deeply about design, user flow, and what I was really trying to build.
The App: A Minimal Portfolio
You can check it out here: modello-oro-jb.netlify.app
It’s still minimalistic and could definitely use more polish. But I’m proud of it not because it’s perfect, but because it shows progress. Every section is a reminder of the small (but crucial) lessons I picked up while learning React and frontend design at the same time.
Where I Went Wrong
Here are a few things I didn’t get right at first:
1. Design Without Spacing Logic
I underestimated the power of padding and margins. Everything felt crammed or too spaced out. I learned quickly that design isn’t just about color and fonts it’s also about breathing room and visual hierarchy.
2. Responsiveness? What’s That?
I focused so much on getting it to look good on desktop that I forgot people would visit on mobile too. The first time I opened it on my phone, I was horrified. Buttons overflowed, text broke, layouts collapsed.
3. State Management Overkill
In one section, I used useState and useEffect when a simple conditional would’ve done the job. I was so eager to use React tools that I forgot about clarity and simplicity.
4. Animations Were… Missing
I didn’t think much about transitions or feedback animations. So every interaction felt a bit lifeless. Later on, I discovered how even subtle motion can change the user’s perception of quality.
What I Fixed (and Still Improving)
Switched to a component-first approach to keep code dry and reusable
Adopted Tailwind CSS for more consistent styling and responsive utility classes
Focused more on typography and spacing to guide the eye better
Added some subtle transitions and hover effects for interactivity
Started thinking of mobile-first instead of retrofitting for small screens later
What I Learned
Here’s what I’d tell my past self (or anyone just starting out with React and frontend):
Ugly is part of the process and it’s a great teacher.
Don’t obsess over frameworks; obsess over the user experience.
Write your code like someone else has to read it because one day, that someone will be you.
Design and development aren’t separate they go hand in hand, especially for solo devs.
Final Thoughts
The app still isn’t perfect, but I see it as a snapshot of my learning curve and that’s something to be proud of.
If you're building your first project and it feels a bit ugly, don’t give up. Instead, ask why, fix what you can, and learn from the rest.
I’d love to hear from others who’ve gone through the same phase drop your link or story below
