Audiophile E-commerce Website

I started this project with one main goal: to get better at React. I wanted to push myself by trying new tools and learning how experienced developers build their sites. On top of that, I wanted to sharpen my eye for detail by matching designs as closely as possible.

Another big reason was to have something solid for my portfolio. Building a real project meant I could actually show what I’d learned—not just talk about it. Along the way, I knew I’d run into tough problems, but that was the point: solving them was how I’d grow.

Performance and SEO were some of the toughest hurdles. E-commerce sites need to be lightning fast and discoverable on search engines. Thankfully, Next.js’s server-side rendering made both achievable. Pages loaded quickly, and I didn’t have to stress too much about search engines missing my content.

Design was a whole different story. At first, Tailwind CSS felt overwhelming—so many utility classes everywhere. But after watching this Tailwind Crash Course on YouTube, things started to click. Suddenly, building a clean, responsive UI felt natural, almost fun.

Looking back, this project wasn’t just about getting a shopping site online—it was about learning how to juggle performance, SEO, and design all at once. Those lessons are now baked into how I approach every new project.

One of the biggest takeaways was performance. E-commerce sites can’t afford to be slow, so using Next.js server-side rendering taught me how to build pages that load quickly and stay SEO-friendly. Seeing product pages render almost instantly was a big win.

Tailwind CSS also changed how I approach design. At first, the utility-first approach felt cluttered, but after building out responsive product pages, I realized how much time it saved. The design came together faster, and I could stay focused on consistency instead of writing endless CSS rules.

This project reinforced how important performance, design, and state management are in building a smooth e-commerce experience.