Introduction The Trippins frontend is built with Angular 17 , providing a modern single-page application (SPA) for hotel booking and management. The application uses TypeScript, reactive forms, and RxJS for state management and asynchronous operations.
Components View component architecture
Services Explore Angular services
Routing Learn about routing configuration
Backend API API documentation
Technology Stack
Angular : 17.0.0TypeScript : 5.2.2RxJS : 7.8.0Zone.js : 0.14.2
Bootstrap : 5.3.5Bootstrap Icons : 1.11.3Font Awesome : 4.7.0 & 6.7.2Animate.css : 4.1.1Owl Carousel : 2.3.4
@auth0/angular-jwt : 5.2.0HttpClient : Built-in Angular moduleJWT-based authentication
HTTP interceptors for token injection
SweetAlert2 : 11.19.1 (modals & alerts)jQuery : 3.7.1 (legacy components)WOW.js : 1.2.2 (scroll animations)CounterUp2 : 2.0.2 (number animations) Project Structure The frontend follows Angular’s standard project structure with feature-based organization:
src/ ├── app/ │ ├── components/ # Feature components │ │ ├── about/ # About page │ │ ├── admin/ # Admin panel with sub-components │ │ │ ├── housing-panel/ │ │ │ └── reservation-panel/ │ │ ├── error/ # Error page │ │ ├── footer/ # Footer component │ │ ├── header/ # Header/navigation │ │ ├── index/ # Landing page │ │ ├── login/ # Login form │ │ ├── newhotel/ # Hotel creation │ │ ├── profile/ # User profile │ │ ├── register/ # Registration form │ │ ├── room/ # Room listing │ │ ├── room-details/ # Individual room │ │ └── testimonials/ # Reviews display │ ├── services/ # Business logic │ │ ├── auth.service.ts │ │ ├── housing-service.service.ts │ │ ├── layout.service.ts │ │ ├── reservation-service.service.ts │ │ ├── review-service.service.ts │ │ └── user-service.service.ts │ ├── guards/ # Route protection │ │ ├── auth.guard.ts │ │ └── role.guard.ts │ ├── interceptors/ # HTTP interceptors │ │ └── auth.interceptor.ts │ ├── models/ # TypeScript interfaces │ │ └── DTOS/ │ │ ├── housing-dto.ts │ │ ├── reservation-dto.ts │ │ ├── review-dto.ts │ │ └── user-dto.ts │ ├── app-routing.module.ts │ ├── app.component.ts │ └── app.module.ts ├── assets/ # Static files ├── environments/ # Environment configs └── styles.css # Global styles
Application Module The root module declares all components and configures providers:
import { NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { AppRoutingModule } from './app-routing.module' ; import { AppComponent } from './app.component' ; import { FormsModule , ReactiveFormsModule } from '@angular/forms' ; import { HTTP_INTERCEPTORS , HttpClientModule } from '@angular/common/http' ; import { AuthInterceptor } from './interceptors/auth.interceptor' ; @ NgModule ({ declarations: [ AppComponent , AboutComponent , HeaderComponent , FooterComponent , IndexComponent , RoomComponent , AdminComponent , ErrorComponent , LoginComponent , NewhotelComponent , ProfileComponent , RegisterComponent , RoomDetailsComponent , ReservationPanelComponent , HousingPanelComponent , TestimonialsComponent ], imports: [ BrowserModule , AppRoutingModule , ReactiveFormsModule , HttpClientModule , FormsModule ], providers: [ { provide: HTTP_INTERCEPTORS , useClass: AuthInterceptor , multi: true } ], bootstrap: [ AppComponent ] }) export class AppModule { }
The AuthInterceptor is registered globally to automatically attach JWT tokens to all HTTP requests.
Root Component The app component initializes layout services on startup:
import { Component , OnInit } from '@angular/core' ; import { LayoutService } from './services/layout.service' ; @ Component ({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrl: './app.component.css' , standalone: false }) export class AppComponent implements OnInit { title = 'TrippinsApp' ; constructor ( private layoutService : LayoutService ) {} ngOnInit () { this . layoutService . initializeDropdownHover (); this . layoutService . initializeVideoModal (); this . layoutService . checkLoggedInCookie (); } }
Environment Configuration The application uses environment files for configuration:
src/environments/environment.development.ts
export const environment = { baseUrl: '/' , baseUrlApi: '/v1/api' };
API requests are proxied through /v1/api to avoid CORS issues during development. See proxy.conf.json for proxy configuration.
Key Features Authentication Flow
User Login
User submits credentials via the login form
JWT Token
Backend returns JWT token and user roles
Token Storage
AuthService stores token and roles in localStorage
Auto-injection
AuthInterceptor attaches token to all subsequent requests
Route Protection
Guards verify authentication and authorization before route activation
Data Flow Pattern The application follows a consistent data flow pattern:
Component
Service
Interceptor
// Component requests data from service export class RoomComponent implements OnInit { houses : any [] = []; constructor ( private houseService : HousingServiceService ) {} ngOnInit () : void { this . loadHouses (); } loadHouses () : void { this . houseService . getRooms ( this . currentPage , this . pageSize ) . subscribe ({ next : ( response ) => { this . houses = [ ... this . houses , ... response . content ]; }, error : ( err ) => { console . error ( 'Error loading houses:' , err ); } }); } }
Development Setup
Start Development Server
Application runs at http://localhost:4200
Build for Production
ng build --configuration production
Output directory: dist/trippins-app Package Scripts Script Command Description startng serveStart development server buildng buildBuild for production watchng build --watch --configuration developmentRebuild on changes testng testRun unit tests
Ensure the backend API is running before starting the frontend. The application expects the API to be available at /v1/api (configured in proxy.conf.json).
Next Steps
Component Architecture Explore individual components and their structure
Angular Services Learn about business logic and HTTP services
Routing & Guards Understand navigation and route protection
API Integration View backend API endpoints
