✂️ Barbershop Web App — Simple, Rebuild‑Friendly Summary This project is a full-featured barbershop website built with Next.js, React, TypeScript, Tailwind CSS, Firebase, and a collection of reusable UI components. It includes booking, service pages, a chatbot, gallery, testimonials, and contact forms.
Below is a streamlined breakdown of what the project is, how it works, and what you need to recreate it.
🚀 1. What the Project Is A modern, responsive barbershop website with:
A homepage featuring hero, services, gallery, testimonials, and booking sections.
Individual service pages (haircut, beard trim, kids haircut, hair coloring, etc.).
A dynamic booking system (via JotForm).
A contact form with validation + email notifications.
A chatbot powered by AI logic.
A gallery with tabbed navigation.
Firebase analytics integration.
A fully modular component architecture.
🧱 2. Core Technologies Used Area Tools Frontend Next.js, React, TypeScript Styling Tailwind CSS, PostCSS, Autoprefixer Backend / Services Firebase, Resend (email) Forms JotForm embeds Maps Leaflet / OpenStreetMap Validation Zod Linting ESLint Utilities date-fns, clsx, tailwind-merge 📁 3. Project Structure (Simplified) Code 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. 🧩 4. Key Features Explained Simply Homepage Uses components like:
Hero
Services preview
About section
Gallery preview
Testimonials
Booking CTA
Contact section
Services System Each service has:
A dedicated page
Pricing, duration, description
Inquiry form (JotForm embed)
Layout wrapper for consistent design
Booking System Booking form embedded via iframe
URL parameters prefill user info
Email confirmations sent via Resend
Validation handled in lib/ai-chat.ts and lib/appointment-actions.ts
Contact System Contact form with validation
Sends emails to both user + barbershop
Uses toast notifications for feedback
Chatbot AI-powered quick responses
Saves state via cookies
Can fill JotForm data automatically
Gallery Tabbed interface
Organized by categories (haircuts, beard trims, etc.)
Testimonials Stored in lib/reviews.ts
Displayed on homepage + dedicated page
Top comments (0)