Flight Board (Angular Demo)

A small Angular application demonstrating clean component boundaries, reactive data flow, and performance-aware defaults.

The goal of this project is not feature completeness or visual polish, but clarity: how data moves through an Angular application, how responsibilities are separated, and how the UI remains predictable and easy to reason about.

What This Demonstrates

• Feature-level module organization
• Smart (container) vs presentational components
• Observable-driven data flow using RxJS
• Performance-aware defaults (OnPush, trackBy, async pipe)
• Simple UI composition using Bootstrap primitives

Architecture Overview

• FlightsComponent acts as the container:
  • Fetches flight data
  • Manages filtering and selection
• FlightListComponent renders a selectable list
• FlightDetailComponent displays read-only details
• FlightService encapsulates data access
• Mock data is loaded from a static JSON file

Design Approach

Styling intentionally avoids heavy theming or custom components. Bootstrap is used for spacing, layout, and hierarchy, aiming for a calm, editorial feel—similar to internal airline tools or Notion-style interfaces.

A light/dark mode toggle is included to demonstrate global UI state handled without introducing unnecessary complexity.

Tradeoffs & Omissions

• No backend API (static JSON for clarity)
• No global state library (NgRx would be overkill at this scale)
• No authentication or routing complexity

In a production application, this feature would likely be lazy-loaded, backed by an API, and integrated with shared state and route resolvers.

Running the App

npm install
ng serve