Skip to main content

​
Welcome to BarberApp

BarberApp is a comprehensive barber shop management SaaS platform that streamlines appointment scheduling, client management, and medical history tracking. Built with cutting-edge technologies and clean architecture principles, it delivers a professional, responsive experience for both barbers and clients.
BarberApp is a demonstration project showcasing modern Angular development practices, Firebase integration, and clean architecture implementation.

​
What is BarberApp?

BarberApp simplifies barber shop operations by providing an intuitive online platform where:
  • Clients can book appointments, manage their profile, view their service history, and rate their experiences
  • Specialists can manage their schedule, track client history, provide diagnoses, and maintain detailed medical records
  • Everyone enjoys a modern, responsive interface that works perfectly on devices from 320px to large desktops
The platform handles everything from user authentication to appointment management, PDF generation, and image storage through Cloudinary.

​
Key features

Appointment management

Complete booking system with 4-step reservation flow, real-time availability checking, and status tracking (pending, completed, canceled)

Role-based dashboards

Separate dashboards for clients and specialists with role-specific features and permissions managed through guards

Medical history tracking

Automatic medical record generation from completed appointments with specialist diagnoses and client health data

Rating system

Clients can rate completed appointments, helping maintain service quality and specialist performance tracking

PDF export

Download appointment details and medical records as PDF documents using jsPDF integration

Profile management

Complete profile editing with Cloudinary-powered image uploads for profile pictures

​
Built with modern technology

BarberApp leverages the latest web technologies to deliver exceptional performance and developer experience:

Angular 20

Latest Angular with standalone components, signals, zoneless architecture, control flow syntax, and SSR support

Firebase

Complete Firebase integration for authentication, Firestore database, and hosting

Clean architecture

Three-layer architecture separating domain logic, adapters, and presentation with dependency injection

Tailwind CSS

Utility-first CSS framework with Tailwind CSS 4.1 and PostCSS for modern, responsive styling

​
Core dependencies

From package.json:22-39: 
"dependencies": {
  "@angular/core": "^20.1.0",
  "@angular/fire": "^20.0.1",
  "firebase": "^11.10.0",
  "@tailwindcss/postcss": "^4.1.13",
  "tailwindcss": "^4.1.13",
  "jspdf": "^3.0.3",
  "swiper": "^12.0.2",
  "rxjs": "~7.8.0"
}

​
Architecture overview

BarberApp implements a simplified clean architecture pattern with clear separation of concerns. From README.md:39-60: 
app/  
├── core/         👉 Domain (models, enums, interfaces, guards, constants, config)  
├── services/     👉 Adapters (Firebase, Cloudinary)  
├── features/     👉 Use cases + Presentation (facades, components, pages)  
└── shared/
1

Domain layer

Defines business logic with entities, enums, and repository interfaces. All business rules live here independent of frameworks.
2

Adapter layer

Concrete implementations of domain interfaces. Firebase services implement repository contracts using injection tokens for complete decoupling.
3

Presentation layer

Feature-based organization with components, pages, and facades. Facades simplify service injection and orchestrate business logic.

​
User roles

The platform supports two main user roles defined in src/app/core/enums/user-roles.enum.ts:1-6:

​
Client role

Clients can:
  • View and edit their profile information
  • Book appointments through a 4-step wizard
  • Manage appointments (view, cancel)
  • Access their complete medical history
  • Rate completed appointments
  • Download appointment PDFs

​
Specialist role

Specialists can:
  • Manage their profile and availability schedule
  • View and manage all appointments
  • Access complete client lists
  • Review any client’s medical history
  • Provide diagnoses with detailed notes
  • Mark appointments as completed
  • Download appointment PDFs

​
Performance and quality

BarberApp achieves excellent scores across all metrics:
  • SEO: 100/100 on all pages
  • Accessibility: 100/100 on all pages
  • Best Practices: 100/100 on all pages
  • Performance: 95-100 on desktop, 75-80 on mobile
  • Responsive: Works perfectly from 320px (iPhone 5) to large desktop displays

​
What you’ll learn

This documentation covers:

Getting started

Quick setup guide for both users and developers

Core features

Deep dive into authentication, appointments, and user roles

Architecture

Understanding clean architecture and folder structure

Development

Local setup, Firebase configuration, and development workflow

​
Live demo

Experience BarberApp in action:

Visit the live site

Explore the fully deployed application hosted on Firebase

​
Open source

View on GitHub

Access the complete source code and contribute to the project
BarberApp is a demonstration project. User data and profile images are not real and are sourced from This Person Does Not Exist.

Build docs developers (and LLMs) love

Get started for freeTalk to us