How Building the Same Website Three Times Made Me a Better Developer

How It All Began

Before explaining how and why I built the same website three times, I want to share some context about who I am, how this project came to be, and why it became a meaningful part of my journey as a developer.

I had always been interested in coding and technology, but hadn't imagined turning it into a career until 2023. That year, I took a leap of faith to pursue my passion as a profession, joining a 12-week full-stack engineering bootcamp. It gave me a solid start in web development, and I began my journey of learning by doing.

Soon after graduating, I joined Tag Operations as their sole web developer. It was my first role, and I had my first real-world challenge: designing and building the company’s website.

Little did I know that this project would become more than just a website—it evolved into a living case study of my growth as a developer. Over my time at Tag Operations, I built the same site three times, with each iteration marking a new stage in my skills and an opportunity to raise the bar even higher.

Iteration 1

The first version of the website was not terrible, but not the greatest. It reflected me as a developer in my early stages and was built using just React. But at the time, it was an exciting milestone: my first production project for a real company.

From that point, as I gained more knowledge and experience, I started to recognize that there was a lot of room for improvement. It lacked polish and professionalism, and its underlying foundation wasn’t as scalable, maintainable, or performant as it could be. So, I took the initiative to redesign and rebuild the site entirely.

Iteration 2

In this second iteration, I:

• Rebuilt the site with Next.js, enabling faster load times, better SEO, and improved performance.
• Refined the website's design to be more professional and polished. Based on feedback from a Go-To-Market (GTM) consultant, I improved the layout and content flows, updated the color palette and typography, and restyled all components.
• Enhanced maintainability by implementing a headless Content Management System (CMS) with Sanity. This change empowers non-technical team members to edit content easily.

These upgrades were a huge step forward in both appearance and functionality. The site looked and felt more like a professional product, and content changes no longer required a developer.

However, as I continued learning and grew more confident in my development skills, I saw even more opportunities to improve the site.

Iteration 3

In this iteration, I focused on five key areas of improvement:

Design

I revamped the design by establishing a consistent atomic design system that struck a stronger balance between professionalism and the company’s unique personality. This new foundation helped me elevate the design and feel of individual components, refine typography, enhance visual hierarchy with thoughtful color and spacing choices, and improve mobile responsiveness.

Performance

To improve speed and responsiveness, I implemented Incremental Static Regeneration (ISR), dynamic route caching, and on-demand revalidation to deliver up-to-date content efficiently, while minimizing server load. I optimized images, replaced Framer Motion with lightweight CSS animations, and transitioned from Tailwind CSS to handwritten styles for greater control and reduced bloat.

Discoverability

By implementing ISR and dynamic route caching, I improved load times and search engine indexing. I further enhanced SEO and social sharing by adding a sitemap and robots.txt, while optimizing metadata with Open Graph and Twitter tags, which helped to boost visibility across search and social platforms.

Accessibility

Making the site usable by everyone was non-negotiable. I focused on improving semantic HTML, adding ARIA roles, enhancing keyboard navigation, and ensuring proper color contrast by following WCAG best practices. Tools like Lighthouse and manual testing helped guide these accessibility improvements.

Maintainability

I created and documented atomic-level components following the new design system, which helped build a modular, scalable system that is easy to update and maintain. Documenting these components in Storybook provided a centralized visual guide, and adding prop-type validation improved reliability by catching errors early, resulting in a more organized and maintainable codebase.

How Building the Same Website Three Times Made Me a Better Developer

Rebuilding this website three times was more than just updating code; it was a hands-on learning experience that helped shape who I am as a developer today. With each iteration, I learned new skills and best practices and applied fresh ideas, always striving to improve the quality of my work. This continuous process of reflection and refinement not only enhanced the site but also deepened my understanding of development, teaching me the importance of building with purpose and prioritizing the user experience.

What’s Next?

Over the coming weeks, I’ll dive deeper into these five key areas—design, performance, discoverability, accessibility, and maintainability—to share what I have learned along the way and the challenges I faced. By writing about this journey, I hope to share helpful insights that others building their skills or working on similar projects might find useful!