Skip to main content

​
Directory Overview

The Happy Habitat frontend follows Angular’s recommended project structure with a feature-based organization: 
happy-habitat-frontend/
├── src/
│   ├── app/
│   │   ├── auth/                    # Authentication module
│   │   ├── components/              # Feature components
│   │   ├── constants/               # Application constants
│   │   ├── enums/                   # TypeScript enums
│   │   ├── guards/                  # Route guards
│   │   ├── interceptors/            # HTTP interceptors
│   │   ├── interfaces/              # TypeScript interfaces
│   │   ├── layouts/                 # Layout components
│   │   ├── pages/                   # Page components
│   │   ├── services/                # Application services
│   │   ├── shared/                  # Shared components and utilities
│   │   ├── utils/                   # Utility functions
│   │   ├── app.component.ts         # Root component
│   │   ├── app.config.ts            # Application configuration
│   │   └── app.routes.ts            # Root routing configuration
│   ├── environments/                # Environment configurations
│   ├── main.ts                      # Application entry point
│   └── styles.css                   # Global styles
├── public/                          # Static assets
├── angular.json                     # Angular CLI configuration
├── package.json                     # Dependencies
└── tsconfig.json                    # TypeScript configuration

​
Core Directories

​
/src/app/auth

Authentication feature module with its own layout and routing. 
auth/
├── auth-page/                       # Auth layout component
├── login/                           # Login component
├── register/                        # Registration component
├── forgot-password/                 # Password recovery
├── reset-password/                  # Password reset
└── auth-routes.ts                   # Auth routing configuration
Purpose: Handles all authentication flows with a dedicated layout (no header/menu/footer).

​
/src/app/components

Feature-based components organized by functional area.

​
Key Feature Modules

Admin Company (components/admincompany/)
  • historial-pagos-residente/ - Resident payment history
  • morosos/ - Delinquent accounts management
  • saldo-banco/ - Bank balance tracking
  • top-menu/ - Admin navigation
Amenities (components/amenidades/)
  • amenidades-grid.component.ts - Grid view
  • amenidades-list.component.ts - List view
  • amenidad-horario-modal/ - Schedule modal
  • amenidades-top-menu/ - Navigation
  • amenidades-routes.ts - Amenity routing
Residents (components/resident/)
  • registro-visitante/ - Visitor registration
  • registro-mascota/ - Pet registration
  • registro-auto/ - Vehicle registration
  • registro-preferencias/ - Preferences
  • resident-encuestas/ - Surveys
  • resident-top-menu/ - Resident navigation
Vigilance (components/vigilancia/)
  • vigilancia-incidentes/ - Incident tracking
  • vigilancia-reservaciones/ - Reservation management
  • vigilancia-residentes/ - Resident monitoring
  • vigilancia-tickets/ - Ticket handling
System Administration (components/system-administation/)
  • comunidades/ - Community management
  • contratos/ - Contract management
  • banners/ - Banner administration
  • statement/ - Financial statements
Additional Features
  • tickets/ - Support ticket system
  • comunicados/ - Announcements
  • encuesta/ - Survey system
  • documento/ - Document management
  • pagos-residente/ - Resident payments
  • proveedores-residentes/ - Service providers

​
/src/app/layouts

Layout components that define page structure for different user roles. 
layouts/
├── admincompany/                    # Admin company layout
├── amenidades/                      # Amenities layout
├── registro/                        # Registration layout
├── resident/                        # Resident portal layout
├── sysadmin/                        # System admin layout
└── vigilancia/                      # Security layout
Purpose: Provides consistent structure (header, menu, footer) for different application sections.

​
/src/app/pages

Top-level page components that represent full-page views. 
pages/
├── home-page/                       # Landing page
├── dashboard-page/                  # Dashboard
├── documents-page/                  # Documents view
└── not-found-page/                  # 404 page

​
/src/app/services

Application-wide services for business logic and API communication. Key Services:
  • auth.service.ts - Authentication and authorization
  • logger.service.ts - Logging functionality
  • error.service.ts - Error handling
  • amenidades.service.ts - Amenity operations
  • comunicados.service.ts - Announcements
  • communities.service.ts - Community management
  • dashboard.service.ts - Dashboard data
  • documents.service.ts - Document operations
  • encuestas.service.ts - Survey management
  • file.service.ts - File upload/download

​
/src/app/guards

Route protection guards. 
guards/
├── auth.guard.ts                    # Authentication check
└── role.guard.ts                    # Role-based access control
See: Routing Configuration for details.

​
/src/app/interceptors

HTTP interceptors for cross-cutting concerns. 
interceptors/
├── auth.interceptor.ts              # Add auth tokens to requests
├── error.interceptor.ts             # Handle HTTP errors
└── logging.interceptor.ts           # Log HTTP requests/responses
Execution Order: logging → error → auth

​
/src/app/shared

Reusable components, pipes, and utilities used across the application. 
shared/
├── components/
│   ├── banner-carousel/             # Banner slider
│   ├── community-filter/            # Community selector
│   ├── file-upload/                 # File upload widget
│   ├── generic-list/                # Generic list component
│   ├── notification/                # Notification component
│   ├── notification-container/      # Notification manager
│   └── top-menu/                    # Generic top menu
├── header/                          # Application header
├── footer/                          # Application footer
├── left-menu/                       # Side navigation menu
│   ├── menu-header/                 # Menu header
│   ├── menu-item/                   # Menu item component
│   └── menu-panic-button/           # Emergency button
├── charts/                          # Chart components
├── pipes/                           # Custom pipes
├── breadcrums/                      # Breadcrumb navigation
├── pagination/                      # Pagination component
├── post/                            # Social post component
└── interfaces/                      # Shared interfaces

​
/src/app/interfaces

TypeScript interfaces for type safety. Purpose: Define data models and contracts for API responses, component inputs, etc.

​
/src/app/enums

TypeScript enumerations. Example: RolesEnum - User role definitions

​
/src/app/constants

Application-wide constants.

​
/src/app/utils

Utility functions and helper classes. Key Utilities:
  • error-handler.util.ts - Global error handler

​
File Naming Conventions

​
Components

feature-name/
├── feature-name.component.ts        # Component logic
├── feature-name.component.html      # Template
├── feature-name.component.css       # Styles
└── feature-name.component.spec.ts   # Unit tests
Pattern: kebab-case.component.ts

​
Services

Pattern: service-name.service.ts Example: auth.service.ts, logger.service.ts

​
Guards

Pattern: guard-name.guard.ts Example: auth.guard.ts, role.guard.ts

​
Interceptors

Pattern: interceptor-name.interceptor.ts Example: auth.interceptor.ts

​
Routes

Pattern: feature-routes.ts Example: auth-routes.ts, resident-routes.ts

​
Interfaces

Pattern: PascalCase without suffix Example: User, Community, Amenity

​
Enums

Pattern: PascalCase.enum.ts Example: RolesEnum

​
Module Organization

​
Standalone Components

Happy Habitat uses Angular’s standalone components architecture: 
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-feature',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './feature.component.html'
})
export class FeatureComponent { }
Benefits:
  • No NgModule boilerplate
  • Explicit dependencies
  • Better tree-shaking
  • Easier lazy loading

​
Lazy Loading

Features are lazy-loaded using dynamic imports: 
{
  path: 'resident',
  loadChildren: () => import('./components/resident/resident-routes')
}

​
Component Prefix

All components use the app prefix as configured in angular.json: 
@Component({
  selector: 'app-my-component'
})

​
Asset Management

​
Public Directory

Static assets are placed in the public/ directory and are copied as-is during build: 
{
  "assets": [
    {
      "glob": "**/*",
      "input": "public"
    }
  ]
}

​
Code Organization Best Practices

​
Feature Modules

  1. Each feature has its own directory under components/
  2. Features include:
    • Components (list, detail, form)
    • Routes (feature-routes.ts)
    • Services (feature.service.ts)
    • Top menu component (navigation)

​
Shared Code

  1. Reusable components go in shared/components/
  2. Reusable pipes go in shared/pipes/
  3. Common interfaces go in shared/interfaces/

​
Services

  1. Services are application-wide and placed in services/
  2. Feature-specific services can be co-located with features
  3. Example: proveedores-residentes/services/

​
Type Safety

  1. Interfaces in dedicated files
  2. Enums for fixed sets of values
  3. Constants for magic numbers/strings

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us