As developers, we often seek projects that challenge us to apply our front-end knowledge while also creating something beautiful and functional. That was my goal with French Barber — a fictional barber shop website I built to improve my skills with Next.js, TypeScript, and Tailwind CSS.
In this blog post, I’ll walk you through the key features of the project, the tech stack I used, and how I recently integrated Cal.com (formerly Calendso) to allow users to book appointments online.
About the Project
French Barber is not a real business. It's a web design and development exercise inspired by a beautiful UI I found on Figma. The site replicates a clean, modern barber shop landing page, complete with service highlights, imagery, and — now — an embedded booking experience.
I designed this app to be deployed and easily accessible online, using Vercel for continuous deployment.
Tech Stack
- Next.js – for server-side rendering and routing
- TypeScript – for type safety and scalability
- Tailwind CSS – for utility-first styling
- Cal.com – for real-time appointment scheduling
- Vercel – for effortless deployment and hosting
Appointment Scheduling with Cal.com
One of the most exciting recent additions to the project is the integration of Cal.com, which allows users to schedule appointments seamlessly.
Instead of building a backend scheduling system from scratch, I opted for a modern SaaS solution that handles availability, calendar syncing, and email notifications — all in one.
Users can now:
- Book their haircut online
- Select available time slots
- Get reminders and confirmations
Adaptable for Any Service Business
While the current design is tailored to a barber shop, this project can be easily adapted to other service-based businesses, such as:
- 💼 Psychologists or therapists
- 🦷 Dentists and doctors
- ✂️ Hairdressers and beauticians
- 💆 Aesthetic or wellness clinics
- 🧑🏫 Coaches or consultants
With Cal.com, scheduling isn't limited to physical appointments. It can be fully integrated with Google Calendar, and supports platforms like Zoom, Google Meet, and Microsoft Teams — making it perfect for online consultations or meetings.
This opens the door to use this template as a base for:
- Booking online therapy sessions
- Scheduling medical appointments
- Managing spa and salon services
- Organizing remote consultations or coaching calls
All with automatic calendar syncing and video conferencing links sent to the user.
📸 Screenshots
🧪 Running Locally
Want to test it out or build on top of it? Here's how you can run it locally:
git clone https://github.com/MSpilari/barber-shop.git
cd barber-shop
npm install
npm run dev
Open http://localhost:3000 in your browser.
Top comments (1)
I like this,