DEV Community

Kyle Y. Parsotan
Kyle Y. Parsotan

Posted on Edited on AI-assisted

Barbershop Web App

#showdev #react #webdev #nextjs

Elite Cuts Barbershop

A redesign and modern website for a professional barbershop where customers can explore services, view previous work, contact the business, and book appointments online.

Overview

Elite Cuts Barbershop is a modern, responsive website built to help a barbershop provide a better online experience for its customers.
Demo
Github Repo

Visitors can:

  • View available barbering services
  • See service prices and estimated times
  • Browse haircut and grooming photos
  • Read customer testimonials
  • Book an appointment
  • Contact the barbershop
  • Ask questions using the AI chatbot
  • View the barbershop location
  • Subscribe to updates
  • Submit service questions or requests

The website is designed to work well on desktop, tablet, and mobile devices.

What This Project Does

The website acts as the barbershop's online storefront.

Instead of only using a physical location or phone calls, customers can use the website to:

Learn ā†’ Explore ā†’ Ask Questions ā†’ Book ā†’ Contact

For example:

  1. A customer visits the website.
  2. They look through the available services.
  3. They choose a haircut or grooming service.
  4. They can view the price and service details.
  5. They book an appointment online.
  6. The customer receives a confirmation email.
  7. The barbershop receives the appointment information.

Main Features

šŸ’ˆ Services

Customers can view the different services offered by the barbershop.

Each service can include:

  • Service name
  • Description
  • Price
  • Estimated duration
  • Features included with the service
  • Booking option

There are individual pages for different services such as:

  • Haircuts
  • Beard trims
  • Kids haircuts
  • Hot towel shaves
  • Hair coloring

šŸ“… Online Booking

Customers can book appointments directly through the website.

The booking form collects information such as:

  • Customer name
  • Email
  • Phone number
  • Selected service
  • Preferred date
  • Preferred time
  • Additional information

The information is validated before the appointment is processed.

After a successful booking, confirmation emails can be sent to both the customer and the barbershop.

šŸ¤– AI Chatbot (Coming Soon Feature)

The website includes an AI-powered chatbot that helps visitors get information.

Customers can use the chatbot to ask questions about things such as:

  • Services
  • Appointments
  • General questions
  • Contact information
  • Barbershop information

The chatbot is designed to give customers another way to interact with the business without immediately needing to call.

šŸ“§ Contact Forms

Customers can contact the barbershop through online forms.

The forms allow visitors to submit:

  • Name
  • Email
  • Subject
  • Message

The website validates the information before sending it.

The business can then receive the inquiry while the customer can receive a confirmation.

ā­ Customer Testimonials

The website displays customer reviews and testimonials.

Testimonials can be used throughout the website to help visitors understand previous customer experiences.

The project includes functionality for:

  • Viewing all testimonials
  • Showing featured testimonials
  • Finding individual testimonials

šŸ–¼ļø Gallery

The gallery allows customers to view examples of the barbershop's work.

Visitors can browse photos of:

  • Haircuts
  • Beard styles
  • Grooming
  • Other barbering work

This gives potential customers a visual idea of the services provided.

šŸ“ Location

The website includes a map so customers can easily find the barbershop.

The map functionality uses Leaflet to display location information.

Technology

The project uses modern web development tools.

Frontend

Next.js

Used to build the website and its pages.

React

Used to create reusable website components such as the navigation bar, booking form, gallery, services, and chatbot.

TypeScript

Used to make the code safer and easier to maintain by checking the types of data used throughout the application.

Tailwind CSS

Used to design the website and make it responsive across different screen sizes.

Backend & Services

Firebase

Used for backend functionality and application data.

Resend

Used for sending emails such as:

  • Appointment confirmations
  • Contact form notifications
  • Service inquiries

Forms & Validation

Zod

Used to validate information submitted through forms.

For example, it can make sure an email address is valid and required fields are completed.

Maps

Leaflet

Used to display the barbershop's location on an interactive map.

Development Tools

The project also uses:

  • ESLint ā€” helps find coding problems
  • npm ā€” manages project packages
  • PostCSS ā€” helps process CSS
  • date-fns ā€” helps work with dates
  • Git/GitHub ā€” manages the project code

Project Structure

The project is organized into a few main folders.

barbershop/
ā”‚
ā”œā”€ā”€ app/
ā”‚   ā”œā”€ā”€ about/
ā”‚   ā”œā”€ā”€ booking/
ā”‚   ā”œā”€ā”€ contact/
ā”‚   ā”œā”€ā”€ gallery/
ā”‚   ā”œā”€ā”€ services/
ā”‚   ā””ā”€ā”€ testimonials/
ā”‚
ā”œā”€ā”€ components/
ā”‚   ā”œā”€ā”€ booking.tsx
ā”‚   ā”œā”€ā”€ contact.tsx
ā”‚   ā”œā”€ā”€ gallery.tsx
ā”‚   ā”œā”€ā”€ hero.tsx
ā”‚   ā”œā”€ā”€ navbar.tsx
ā”‚   ā”œā”€ā”€ services.tsx
ā”‚   ā”œā”€ā”€ testimonials.tsx
ā”‚   ā””ā”€ā”€ elite-chatbot.tsx
ā”‚
ā”œā”€ā”€ lib/
ā”‚   ā”œā”€ā”€ actions.ts
ā”‚   ā”œā”€ā”€ ai-chat.ts
ā”‚   ā”œā”€ā”€ appointment-actions.ts
ā”‚   ā”œā”€ā”€ chatbot-actions.ts
ā”‚   ā”œā”€ā”€ reviews.ts
ā”‚   ā””ā”€ā”€ service-actions.ts
ā”‚
ā”œā”€ā”€ public/
ā”‚   ā””ā”€ā”€ images/
ā”‚
ā”œā”€ā”€ types/
ā”‚
ā”œā”€ā”€ firebase.js
ā”œā”€ā”€ package.json
ā”œā”€ā”€ next.config.ts
ā”œā”€ā”€ tailwind.config.ts
ā””ā”€ā”€ README.md
Enter fullscreen mode Exit fullscreen mode

What These Folders Mean

app/

Contains the different pages of the website.

For example:

app/about/
Enter fullscreen mode Exit fullscreen mode

contains the About page.

app/booking/
Enter fullscreen mode Exit fullscreen mode

contains the booking page.

app/services/
Enter fullscreen mode Exit fullscreen mode

contains the service pages.

components/

Contains reusable pieces of the website.

For example:

  • navbar.tsx ā†’ Website navigation
  • hero.tsx ā†’ Main homepage section
  • services.tsx ā†’ Services section
  • gallery.tsx ā†’ Image gallery
  • booking.tsx ā†’ Booking interface
  • contact.tsx ā†’ Contact section
  • elite-chatbot.tsx ā†’ AI chatbot

Instead of rebuilding these sections on every page, they can be reused where needed.

lib/

Contains the logic that makes the website's features work.

For example:

appointment-actions.ts
Enter fullscreen mode Exit fullscreen mode

handles appointment-related operations.

service-actions.ts
Enter fullscreen mode Exit fullscreen mode

handles service inquiries.

chatbot-actions.ts
Enter fullscreen mode Exit fullscreen mode

handles chatbot-related functionality.

reviews.ts
Enter fullscreen mode Exit fullscreen mode

handles customer testimonials.

public/

Contains images and other files that are displayed on the website.

types/

Contains TypeScript definitions that help the application understand the structure of certain data.

Getting Started

Requirements

Before running the project, you should have:

  • Node.js installed
  • npm installed
  • Git installed

You should also have access to the required Firebase and email service configuration if you are working with the full application.

Installation

1. Clone the repository 

git clone https://github.com/Kyl67899/barbershop.git
Enter fullscreen mode Exit fullscreen mode

2. Open the project 

cd barbershop
Enter fullscreen mode Exit fullscreen mode

3. Install the packages 

npm install
Enter fullscreen mode Exit fullscreen mode

This installs all of the libraries required by the project.

Running the Website

Start the development server with:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Then open the local website in your browser.

Usually this will be:

http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

Building for Production

To create a production build:

npm run build
Enter fullscreen mode Exit fullscreen mode

Then start the production server:

npm start
Enter fullscreen mode Exit fullscreen mode

Environment Variables

Some features require private configuration values.

These should be stored in an environment file rather than directly inside the source code.

Create:

.env.local
Enter fullscreen mode Exit fullscreen mode

and add the required configuration values for services such as:

  • Firebase
  • Resend
  • AI services

Do not commit .env.local or private API keys to GitHub.

How the Main Features Work

Appointment Flow 

Customer
   ā†“
Booking Form
   ā†“
Validate Information
   ā†“
Process Appointment
   ā†“
Send Confirmation Email
   ā†“
Customer + Barbershop
Enter fullscreen mode Exit fullscreen mode

Contact Flow 

Customer
   ā†“
Contact Form
   ā†“
Validate Information
   ā†“
Send Message
   ā†“
Email Notification
Enter fullscreen mode Exit fullscreen mode

AI Chatbot Flow 

Customer
   ā†“
AI Chatbot
   ā†“
User Question
   ā†“
AI Processing
   ā†“
Response
   ā†“
Customer
Enter fullscreen mode Exit fullscreen mode

For Developers

If you are a developer working on this project, the main areas you will probably work with are:

Website pages 

app/
Enter fullscreen mode Exit fullscreen mode

Reusable UI 

components/
Enter fullscreen mode Exit fullscreen mode

Application logic 

lib/
Enter fullscreen mode Exit fullscreen mode

Images and static files 

public/
Enter fullscreen mode Exit fullscreen mode

TypeScript definitions 

types/
Enter fullscreen mode Exit fullscreen mode

When adding a new feature, try to keep the project organized by putting:

  • Pages in app/
  • Reusable UI in components/
  • Business/application logic in lib/
  • Images in public/
  • Types in types/

For Non-Developers

You do not need to understand the code to understand what this project does.

Think of the application as a digital version of a barbershop.

Website Area What It Does
Home Introduces the barbershop
Services Shows available services
Booking Allows customers to schedule appointments
Gallery Shows examples of barber work
Testimonials Shows customer reviews
Contact Allows customers to send messages
Map Shows the business location
AI Chatbot Answers customer questions
Firebase Helps manage application data
Resend Sends emails

Contributing

Contributions and improvements are welcome.

1. Fork the repository

Create your own copy of the project on GitHub.

2. Clone your copy 

git clone https://github.com/Kyl67899/barbershop.git
Enter fullscreen mode Exit fullscreen mode

3. Create a new branch 

git checkout -b new-feature
Enter fullscreen mode Exit fullscreen mode

4. Make your changes

Update the code and test your changes locally.

5. Commit your changes 

git add .
git commit -m "Add new feature"
Enter fullscreen mode Exit fullscreen mode

6. Push your branch 

git push origin new-feature
Enter fullscreen mode Exit fullscreen mode

7. Create a Pull Request

Open a Pull Request on GitHub and explain what you changed.

Keeping Packages Updated

To check for outdated npm packages:

npm install -g npm-check-updates
Enter fullscreen mode Exit fullscreen mode

Then:

ncu
Enter fullscreen mode Exit fullscreen mode

To update the packages:

ncu -u
npm install
Enter fullscreen mode Exit fullscreen mode

Project Goal

The goal of this project is to provide a professional online experience for a barbershop while making it easier for customers to:

Discover services ā†’ Learn about the business ā†’ Ask questions ā†’ Book an appointment ā†’ Stay connected

The application combines a modern website, online booking, customer communication, email notifications, location information, testimonials, and an AI chatbot into one platform.

Top comments (2)

Collapse
 
santi_029155e profile image
Santi •

Hello is there a link or instruction for the code? Thank you!

Collapse
 
kyl67899 profile image
Kyle Y. Parsotan •

In my github profile there is one. github.com/Kyl67899/barbershop

Some comments may only be visible to logged-in visitors. Sign in to view all comments.