Skip to main content
This guide will walk you through installing BarberApp on your local machine for development.

​
Prerequisites

Before you begin, ensure you have the following installed on your system:

Node.js

Version 18.x or higher required

npm

Version 9.x or higher (comes with Node.js)

Git

For cloning the repository

Firebase CLI

Optional, for Firebase deployments
BarberApp is built with Angular 20 and uses modern JavaScript features. Make sure your Node.js version supports ES2022.

​
Installation Steps

1

Clone the Repository

Clone the BarberApp repository to your local machine:
git clone https://github.com/yourusername/barber-shop.git
cd barber-shop
2

Install Dependencies

Install all project dependencies using npm:
npm install
This will install the following key dependencies:
  • @angular/core (^20.1.0) - Angular framework
  • @angular/router (^20.1.0) - Client-side routing
  • @angular/forms (^20.1.0) - Reactive forms
  • @angular/cdk (^20.2.5) - Component Dev Kit
  • @angular/fire (^20.0.1) - Angular Firebase library
  • firebase (^11.10.0) - Firebase SDK
  • tailwindcss (^4.1.13) - Utility-first CSS framework
  • @tailwindcss/postcss (^4.1.13) - PostCSS plugin
  • swiper (^12.0.2) - Touch slider library
  • rxjs (~7.8.0) - Reactive programming
  • jspdf (^3.0.3) - PDF generation
  • zone.js (~0.15.0) - Change detection
3

Verify Installation

Verify that all dependencies were installed correctly:
npm list --depth=0
You should see all the packages listed without any errors.
4

Start Development Server

Start the Angular development server:
npm start
Or use the Angular CLI directly:
ng serve
The application will be available at http://localhost:4200
Make sure you have configured your environment files before running the app. See the Configuration guide for details.

​
Available npm Scripts

BarberApp includes several npm scripts for development and building: 
npm start
# Starts the Angular dev server on http://localhost:4200

​
Development Tools

The project includes the following development dependencies:
  • @angular/cli (^20.1.3) - Angular command-line interface
  • @angular/build (^20.1.3) - Angular build system
  • TypeScript (~5.8.2) - Type-safe JavaScript
  • Karma & Jasmine - Testing framework

​
Project Structure

After installation, your project structure should look like this: 
barber-shop/
├── src/
│   ├── app/              # Application source code
│   │   ├── core/         # Domain layer (models, interfaces, guards)
│   │   ├── services/     # Adapters (Firebase, Cloudinary)
│   │   ├── features/     # Feature modules and components
│   │   └── shared/       # Shared components and utilities
│   ├── styles.css        # Global styles with Tailwind
│   ├── main.ts          # Application entry point
│   └── index.html       # HTML template
├── public/              # Static assets
├── angular.json         # Angular workspace configuration
├── firebase.json        # Firebase hosting configuration
├── package.json         # Dependencies and scripts
└── tsconfig.json        # TypeScript configuration

​
Next Steps

Configuration

Configure environment variables and application settings

Firebase Setup

Set up Firebase authentication, Firestore, and hosting

Architecture

Learn about BarberApp’s clean architecture

Technical Reference

Understand facades and Angular Signals patterns

​
Troubleshooting

If you encounter errors related to Node.js version:
node --version  # Should be 18.x or higher
Use nvm to manage Node.js versions:
nvm install 18
nvm use 18
If npm install fails, try:
# Clear npm cache
npm cache clean --force

# Delete node_modules and package-lock.json
rm -rf node_modules package-lock.json

# Reinstall
npm install
If port 4200 is already in use, you can specify a different port:
ng serve --port 4300
If ng command is not found, install Angular CLI globally:
npm install -g @angular/cli@20

Build docs developers (and LLMs) love

Get started for freeTalk to us