Skip to main content
This guide covers all configuration aspects of BarberApp, from environment files to Angular settings and external service integrations.

​
Environment Configuration

BarberApp uses environment files to manage configuration across different deployment environments. These files are gitignored for security.
Never commit environment files containing sensitive data like API keys or Firebase credentials to version control.

​
Creating Environment Files

1

Create environments directory

Create the src/environments directory if it doesn’t exist:
mkdir -p src/environments
2

Create development environment

Create src/environments/environment.ts for development:
src/environments/environment.ts
export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: 'YOUR_API_KEY',
    authDomain: 'YOUR_PROJECT_ID.firebaseapp.com',
    projectId: 'YOUR_PROJECT_ID',
    storageBucket: 'YOUR_PROJECT_ID.appspot.com',
    messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
    appId: 'YOUR_APP_ID'
  },
  cloudinary: {
    cloudName: 'YOUR_CLOUD_NAME',
    uploadPreset: 'YOUR_UPLOAD_PRESET'
  }
};
3

Create production environment

Create src/environments/environment.prod.ts for production:
src/environments/environment.prod.ts
export const environment = {
  production: true,
  firebaseConfig: {
    apiKey: 'YOUR_PRODUCTION_API_KEY',
    authDomain: 'YOUR_PROJECT_ID.firebaseapp.com',
    projectId: 'YOUR_PROJECT_ID',
    storageBucket: 'YOUR_PROJECT_ID.appspot.com',
    messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
    appId: 'YOUR_APP_ID'
  },
  cloudinary: {
    cloudName: 'YOUR_CLOUD_NAME',
    uploadPreset: 'YOUR_UPLOAD_PRESET'
  }
};
The production environment file is automatically used when building with ng build due to file replacement configured in angular.json:74-79.

​
Angular Configuration

BarberApp’s Angular workspace is configured in angular.json with specific settings for optimal development and production builds.

​
Project Settings

{
  "projectType": "application",
  "root": "",
  "sourceRoot": "src",
  "prefix": "app"
}
All Angular schematics use specific conventions:
  • Components: OnPush change detection, no test files by default
  • Services/Directives/Guards: Type separator using . (e.g., auth.service.ts)
  • Style: CSS files (Tailwind handles most styling)

​
Build Configurations

​
Development Build

angular.json (Line 81-85)
{
  "development": {
    "optimization": false,
    "extractLicenses": false,
    "sourceMap": true
  }
}
Features:
  • No optimization for faster builds
  • Source maps enabled for debugging
  • License extraction disabled

​
Production Build

angular.json (Line 60-79)
{
  "production": {
    "budgets": [
      {
        "type": "initial",
        "maximumWarning": "500kB",
        "maximumError": "1MB"
      },
      {
        "type": "anyComponentStyle",
        "maximumWarning": "4kB",
        "maximumError": "8kB"
      }
    ],
    "outputHashing": "all",
    "fileReplacements": [...]
  }
}
Features:
  • Bundle size budgets enforced
  • Output hashing for cache busting
  • Environment file replacement
  • Full optimization enabled

​
Tailwind CSS Configuration

BarberApp uses Tailwind CSS 4.1.13 with custom theme configuration defined in src/styles.css.

​
Custom Theme Variables

The application defines custom CSS variables using the @theme directive: 
@theme {
  /* Primary brand colors */
  --color-bs-primary: #d45211;
  --color-bs-secondary: #ffd9ae;
  --color-bs-third: #221610;
}

​
Global Styles

The application includes several global style enhancements:
src/styles.css (Line 39-45)
html, body {
  font-family: "Rubik Variable", sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
  scroll-behavior: smooth;
}
src/styles.css (Line 48-66)
@keyframes pop-up {
  from {
    opacity: 0.1;
    transform: translateY(80px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 1024px) {
  .animate-on-scroll {
    animation: pop-up 0.8s ease-out forwards;
    animation-timeline: view();
    animation-range-end: entry 30%;
  }
}
Custom focus-visible styles for better accessibility:
src/styles.css (Line 69-79)
:is(a, button, [tabindex]):focus-visible {
  outline: 3px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px oklch(62.815% 0.20376 254.812 / 0.95);
  transition: box-shadow 0.15s ease-in-out;
}
src/styles.css (Line 82-90)
::selection {
  background-color: var(--color-bs-third);
  color: var(--color-lightblue-primary);
}

​
Using Custom Theme Values

Access custom theme variables in your components:
Example Usage
<!-- Brand colors -->
<div class="bg-bs-primary text-bs-secondary">
  Primary branding
</div>

<!-- Custom spacing -->
<div class="h-[--spacing-dashboard-height]">
  Dashboard container
</div>

<!-- Custom breakpoints -->
<div class="hidden xxs:block">
  Visible on extra small devices and up
</div>

​
Cloudinary Configuration

BarberApp uses Cloudinary for image storage and management, particularly for user profile pictures.

​
Setting Up Cloudinary

1

Create Cloudinary Account

Sign up for a free account at cloudinary.com
2

Get Your Credentials

From your Cloudinary dashboard, note:
  • Cloud Name: Found in the dashboard URL
  • Upload Preset: Create an unsigned upload preset in Settings → Upload
3

Configure Environment

Add Cloudinary settings to your environment files:
export const environment = {
  // ... other config
  cloudinary: {
    cloudName: 'your-cloud-name',
    uploadPreset: 'your-unsigned-preset'
  }
};

​
Default Profile Image

The application uses a default profile image hosted on Cloudinary:
src/app/services/firebase/firebase-auth.service.ts (Line 63)
profilePictureUrl: 'https://res.cloudinary.com/dfurubiqj/image/upload/v1759346209/default-profile_qzf9ga_mkixzk.png'
You can replace this with your own default image by uploading to your Cloudinary account and updating the URL.

​
TypeScript Configuration

BarberApp uses strict TypeScript settings for type safety:
tsconfig.json (Line 5-16)
{
  "compilerOptions": {
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "experimentalDecorators": true,
    "target": "ES2022",
    "module": "preserve"
  }
}

​
Angular Compiler Options

tsconfig.json (Line 18-24)
{
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "typeCheckHostBindings": true,
    "strictTemplates": true
  }
}
These strict settings help catch errors early but may require more explicit type annotations. Don’t disable them unless absolutely necessary.

​
Application Bootstrap

The application is bootstrapped in src/main.ts with a minimal, modern approach:
src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';

bootstrapApplication(App, appConfig)
  .catch((err) => console.error(err));
All configuration is centralized in app.config.ts, including:
  • Firebase providers
  • Router configuration
  • HTTP client
  • Dependency injection tokens
  • Locale settings
See Firebase Setup for details on Firebase configuration.

​
Next Steps

Firebase Setup

Configure Firebase services and deployment

Project Structure

Explore the clean architecture organization

Build docs developers (and LLMs) love

Get started for freeTalk to us