Why I Built My Own Website with React, Next.js, and Vercel: A Product Designer’s Coding Adventure

As a product designer, my journey has always been about creating and innovating. But recently, I embarked on a new challenge: building my own website from scratch. Why did I decide to go down this road? It was a blend of wanting total control over my digital presence, a thirst for learning new development skills, and, frankly, just to see if I could do it.

Diving Into the Deep End: React and Next.js

I chose React and Next.js for a few key reasons. React’s component-based architecture offered me the flexibility and reusability I was looking for. It meant I could think of my website as a collection of independent, manageable pieces, much like the products I design. Next.js, on the other hand, brought server-side rendering to the table, which was perfect for SEO and performance – two things I couldn’t compromise on.

The Deployment: Why Vercel?

Vercel and Next.js go together like bread and butter. Vercel’s focus on frontend frameworks, especially Next.js, made it an obvious choice for deployment. It promised a smooth, seamless experience and it delivered. From the ease of integration to the instantaneous deployments, Vercel made the process feel less like a chore and more like a superpower.

The Product Designer's Perspective in Coding

Coming from a product design background, I approached the project with a user-centric mindset. Every line of code wasn't just about functionality; it was about creating an experience. This perspective helped me immensely, especially when designing the UI/UX of the site. However, it also meant I had to balance my design instincts with the technical limitations and possibilities of web development.

Challenges Along the Way

The journey wasn’t without its challenges. React and Next.js, while powerful, come with a steep learning curve. I had to grapple with concepts like state management, server-side rendering, and hooking up APIs. Debugging was another area where I spent more time than anticipated. But every bug fixed and every issue resolved was a lesson learned and a skill gained.

Learning and Growing Beyond Design

This project was more than just about building a website. It was a leap into the unknown, a test of my ability to adapt and learn. It pushed me beyond my comfort zone as a product designer and allowed me to dabble in the realms of coding and development.

In Conclusion

Building my own website using React, Next.js, and deploying on Vercel was a rewarding journey. It gave me total control over my digital presence, and more importantly, it provided me with invaluable learning experiences. For any product designer thinking of diving into coding, my advice is simple: embrace the challenge. The skills and insights you gain are well worth the journey.