Barbershop Web App

Source: Dev.to

Summary

A full‑featured, responsive barbershop website built with Next.js, React, TypeScript, Tailwind CSS, Firebase, and a collection of reusable UI components. Features include:

• Booking system (via JotForm)
• Service pages (haircut, beard trim, kids haircut, hair coloring, etc.)
• AI‑powered chatbot
• Gallery with tabbed navigation
• Testimonials
• Contact form with validation & email notifications
• Firebase analytics integration
• Fully modular component architecture

What the Project Is

A modern, responsive barbershop website that provides:

• A homepage with hero, services, gallery, testimonials, and booking sections.
• Individual service pages for each offering.
• A dynamic booking system embedded from JotForm.
• A contact form with client‑side validation and email notifications.
• An AI‑driven chatbot for quick responses.
• A tabbed gallery organized by categories.
• Firebase analytics for tracking.

Core Technologies Used

Project Structure (Simplified)

barbershop/
│
├─ app/               # All pages (home, services, booking, contact, gallery)
├─ components/        # Reusable UI + feature components
├─ lib/               # Backend logic (emails, validation, chatbot, reviews)
├─ hooks/             # Custom hooks (toast system)
├─ public/            # Images
├─ styles/            # Global CSS + Tailwind configs
└─ config files      # next.config, tailwind.config, tsconfig, etc.

Key Features Explained Simply

Homepage

• Hero section
• Services preview
• About section
• Gallery preview
• Testimonials
• Booking CTA
• Contact section

Services System

• Dedicated page per service
• Pricing, duration, description displayed
• Inquiry form embedded via JotForm
• Layout wrapper ensures consistent design

Booking System

• Booking form embedded via an “
• URL parameters pre‑fill user information
• Email confirmations sent through Resend
• Validation logic located in lib/ai-chat.ts and lib/appointment-actions.ts

Contact System

• Contact form with client‑side validation (Zod)
• Sends emails to both the user and the barbershop
• Toast notifications provide feedback

Chatbot

• AI‑powered quick responses
• State saved via cookies
• Can auto‑fill JotForm data

Gallery

• Tabbed interface organized by categories (haircuts, beard trims, etc.)

Testimonials

• Stored in lib/reviews.ts
• Displayed on the homepage and on a dedicated testimonials page

Demo