How I Built My First Mentoring Website – Next.js & Vercel

Introduction

This was my first real client project – a mentoring website that needed to be professional, fast, and easy to maintain. In this post I'll share my journey building it from scratch and the key decisions that shaped the final product.

Tech Stack

For this project I chose a modern, performant stack:

• Next.js – For server-side rendering and great developer experience
• TypeScript – For type safety and better code quality
• Tailwind CSS – For rapid, consistent styling
• Vercel – For seamless deployment and hosting

This combination allowed me to move fast while maintaining code quality and performance.

Challenges

The biggest challenges I faced:

1. Responsive Design – Making sure the site looked great on all devices required careful planning of breakpoints and flexible layouts
2. Performance – Optimizing images and load times was crucial for user experience
3. Booking Integration – Connecting with the scheduling system required careful API design

What I Learned

This project taught me valuable lessons:

• Clean code structure matters more than you think
• Performance optimization should be considered from the start
• Communication with clients is just as important as coding
• Testing on real devices catches issues that emulators miss

Next Steps

For future projects I want to:

• Implement better animation patterns
• Focus more on accessibility from day one
• Explore headless CMS solutions for content management