Quickstart

Two paths to get started

Choose your journey based on whether you want to use BarberApp or develop it:

For users

For developers

Clone the repository and run it locally

User quickstart
Developer quickstart

Get started as a user

Experience BarberApp’s full appointment booking and management workflow.

Visit the platform

Navigate to the live BarberApp site:

https://barber-shop-guy.web.app/

You’ll land on the home page featuring a carousel of barber services, quick access to the portal, and information about available specialties.

Create your account

Click Ingresar al Portal (Enter Portal) in the hero section or navigate to /auth/register.Fill in the registration form with:

First and last name
DNI (identification number)
Sex (Male/Female/Unspecified)
Birth date
Email address
Password (with confirmation)
Phone number (optional)
Profile picture upload

The registration form includes custom validators defined in src/app/core/validators/custom-validators.ts to ensure data quality.

Select your role:

Client: Book and manage appointments
Specialist: Manage schedule and provide services

Access your dashboard

After successful registration and login, you’ll be redirected to your role-specific dashboard:Client dashboard (/dashboard/client):

Overview of pending and completed appointments
Quick access to book new appointments
Medical history summary

Specialist dashboard (/dashboard/specialist):

Upcoming appointments
Client list
Schedule management

Book your first appointment (Clients)

Click Solicitar Turno (Request Appointment) to start the 4-step booking process:Step 1: User information

Your profile details are pre-filled
Update height and weight if needed
Component: appointment-user-info.component.ts

Step 2: Select specialty

Choose from available specialties (Haircut, Beard Trim, Facial Cleaning, etc.)
Specialties are loaded from Firestore via FirebaseSpecialtyService
Component: appointment-specialty-selector.component.ts

Step 3: Choose specialist

Browse specialists filtered by your selected specialty
View specialist profiles with ratings and availability
Component: appointment-specialist-selector.component.ts

Step 4: Select date and time

Pick an available date from the calendar
Choose a time slot based on specialist availability
Availability is checked against existing appointments
Component: appointment-date-selector.component.ts

Step 5: Confirm booking

Review all appointment details
Submit to create the appointment
Component: appointment-confirm.component.ts

Appointments are created with PENDING status and stored in Firestore through FirebaseAppointmentService as defined in src/app/services/firebase/firebase-appointment.service.ts:24-31.

Manage appointments

From your dashboard, you can:View appointments

See all appointments organized by status (pending, completed, canceled)
Filter by date range
Access from /dashboard/appointments

Cancel appointments

Click on a pending appointment
Select Cancelar (Cancel)
Provide a cancellation reason
Status updates to CANCELED in the database

Download appointment details

Click the PDF icon on any appointment
Download a formatted PDF with all appointment information
Generated using jsPDF library

Rate completed appointments (Clients only)

After a specialist marks an appointment as completed
Provide a star rating (1-5)
Add optional comments
Rating is stored in the appointment’s rating field

View medical history

For Clients:

Navigate to Historial (History) in the dashboard
View all completed appointments with diagnoses
Medical history is automatically generated from completed appointments

For Specialists:

Access any client’s history from the client list
View detailed diagnosis information
Add diagnoses to completed appointments
Diagnosis interface from src/app/core/models/diagnosis.model.ts

Next steps for users

Update your profile

Edit personal information and upload a new profile picture

Understand roles

Learn about client and specialist capabilities

Explore dashboards

Discover all dashboard features and navigation

Learn about appointments

Deep dive into appointment lifecycle and management

Get started as a developer

Set up BarberApp locally and start developing.

Prerequisites

Ensure you have the following installed:

Node.js: v18.0.0 or higher
npm: v9.0.0 or higher
Git: For cloning the repository
Firebase account: For backend services (optional for local development)

You can check your versions with:

node --version
npm --version
git --version

Clone the repository

Clone the BarberApp repository from GitHub:

git clone https://github.com/guyacevedo/barber-shop.git
cd barber-shop

The repository structure follows Angular best practices with feature-based organization:

barber-shop/
├── src/
│   ├── app/
│   │   ├── core/           # Domain layer
│   │   ├── services/       # Adapter layer
│   │   ├── features/       # Use cases + Presentation
│   │   └── shared/         # Shared components
│   └── environments/       # Environment configs
├── public/                 # Static assets
└── firebase.json           # Firebase configuration

Install dependencies

Install all required npm packages from package.json:22-53:

npm install

This installs:

Angular 20 and all core packages
Firebase SDK and AngularFire
Tailwind CSS 4.1
jsPDF for PDF generation
RxJS for reactive programming
And all development dependencies

Installation may take a few minutes depending on your internet connection.

Configure environment (Optional)

If you want to connect to your own Firebase instance:

Create a Firebase project at Firebase Console
Enable Authentication (Email/Password)
Create a Firestore database
Get your Firebase configuration
Update src/environments/environment.ts with your config:

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT.appspot.com",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  }
};

Without Firebase configuration, authentication and data persistence won’t work. See the Firebase Setup guide for detailed instructions.

Start the development server

Run the Angular development server using the script from package.json:6:

npm start

Or use the Angular CLI directly:

ng serve

The application will start at:

http://localhost:4200

The dev server supports hot module replacement - your changes will reflect immediately without full page reloads.

Explore the codebase

Key files to review:Application configuration

src/app/app.config.ts:1-46 - Application providers and dependency injection setup
src/app/app.routes.ts:1-86 - Route definitions with lazy loading

Core domain models

src/app/core/models/appointment.model.ts:1-20 - Appointment entity
src/app/core/models/user-base.model.ts:1-17 - User base interface
src/app/core/models/specialist.model.ts:1-8 - Specialist extension

Firebase services

src/app/services/firebase/firebase-auth.service.ts:1-74 - Authentication
src/app/services/firebase/firebase-appointment.service.ts:1-166 - Appointment CRUD

Route guards

src/app/core/guards/auth.guard.ts:1-22 - Authentication guard
src/app/core/guards/role.guard.ts - Role-based authorization

Build for production

When ready to deploy, build the optimized production bundle from package.json:7:

npm run build

This creates an optimized build in dist/barber-shop/browser/ with:

Minified JavaScript and CSS
Tree-shaken dependencies
Optimized images
Production environment configuration

The build output is configured for Firebase Hosting as specified in firebase.json:8-22.

Development workflow

Make changes

Edit files in the src/ directory. The dev server will automatically reload.

Follow architecture patterns

Add new models to src/app/core/models/
Create repository interfaces in src/app/core/interfaces/
Implement adapters in src/app/services/
Build features in src/app/features/

Use Angular 20 features

Leverage modern Angular:

Standalone components (no NgModules)
Signals for reactive state
Control flow syntax (@if, @for, @switch)
Dependency injection with inject()

Style with Tailwind

Use Tailwind utility classes for styling. Configuration in tailwind.config.js.

Available npm scripts

From package.json:4-9:

Script	Command	Description
`npm start`	`ng serve`	Start dev server at localhost:4200
`npm run build`	`ng build`	Build production bundle
`npm run watch`	`ng build --watch --configuration development`	Watch mode for development
`npm test`	`ng test`	Run unit tests with Karma

Next steps for developers

Architecture guide

Understand the clean architecture implementation

Firebase setup

Configure Firebase services and security rules

Technical reference

Explore models, services, and interfaces

Folder structure

Navigate the codebase organization

Getting help

View source code

Access the complete repository on GitHub

Report issues

Found a bug? Open an issue on GitHub

BarberApp is a demonstration project created to showcase modern Angular development. Contributions and feedback are welcome!

Get Started

Core Features

Architecture

Guides

Two paths to get started

For users

For developers

Get started as a user

Next steps for users

Update your profile

Understand roles

Explore dashboards

Learn about appointments

Get started as a developer

Development workflow

Available npm scripts

Next steps for developers

Architecture guide

Firebase setup

Technical reference

Folder structure

Getting help

View source code

Report issues

Build docs developers (and LLMs) love

Get Started

Core Features

Architecture

Guides

​Two paths to get started

For users

For developers

​Get started as a user

​Next steps for users

Update your profile

Understand roles

Explore dashboards

Learn about appointments

​Get started as a developer

​Development workflow

​Available npm scripts

​Next steps for developers

Architecture guide

Firebase setup

Technical reference

Folder structure

​Getting help

View source code

Report issues

Build docs developers (and LLMs) love

Two paths to get started

Get started as a user

Next steps for users

Get started as a developer

Development workflow

Available npm scripts

Next steps for developers

Getting help