flights_web/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

This is the Aeroflot Flights Web application — a flight information/booking interface. The current codebase is Angular 12 (located in ClientApp/), and it is being rewritten to React using ModernJS with Module Federation 2.0 as a remote micro-frontend component.

Current Angular App (ClientApp/)

Dev Commands

npm start                  # Dev server on :4200 (proxies /api, /flights → flights.test.aeroflot.ru)
npm run build:prod         # Production build
npm run build:dev          # Dev build with source maps
npm run build:testing      # Testing environment build
npm run test               # Karma/Jasmine with coverage → coverage/test/
npm run test:ci            # Tests with TeamCity reporter
npm run lint               # ESLint
npm run pretty             # Prettier (ts + html)
npm run analyze            # Webpack bundle analyzer
npm run storybook          # Storybook component docs

Path Aliases (tsconfig.json)

Alias	Resolves To
@app/*	src/app/*
@components/*	src/app/components/*
@shared/*	src/app/shared/*
@modules/*	src/app/modules/*
@features/*	— (use explicit paths)
@online-board/*	src/app/features/online-board/*
@schedule/*	src/app/features/schedule/*
@toolkit/*	src/app/toolkit/*
@utils/*	src/app/utils/*
@typings/*	src/typings/*
@environment	src/environments/environment

Architecture

src/app/
├── features/            # Lazy-loaded feature modules
│   ├── online-board/    # Main flight departure/arrival board
│   ├── schedule/        # Schedule search
│   ├── flights-map/     # Map view (feature-flag gated)
│   └── popular-requests/
├── modules/
│   ├── components/      # Reusable display components
│   ├── pages/           # Page-level components (board, details, schedule, errors)
│   └── prime-components-module.ts
├── shared/
│   ├── services/        # ~37 services (API, localization, settings, SEO, etc.)
│   ├── pipes/
│   ├── pipes-legacy/
│   ├── models-legacy/   # ~50 legacy DTOs
│   ├── interceptor/     # AppInterceptor (HTTP)
│   └── shared.module.ts
├── guards/
│   └── feature-flag.guard.ts
└── toolkit/             # Custom UI component library

State management: No NgRx/Akita — pure RxJS with BehaviorSubjects exposed as Observables from services.

Real-time: @microsoft/signalr for WebSocket connections (tracker hub URL set per environment).

Routing: All language prefixes (/ru, /en, /es, /fr, /it, /ja, /ko, /zh, /de) redirect to /onlineboard. Feature modules are lazy-loaded; flights-map is guarded by FeatureFlagGuard.

i18n: @ngx-translate with messageformat compiler. Translation JSON files in src/assets/i18n/. Supports 9 languages.

UI: PrimeNG 10 + custom toolkit/ components.

Environment Config

Each src/environments/environment*.ts exposes:

• apiRootUrl / wsRootUrl — proxied in dev, real URLs in prod
• features.flightsMap — boolean feature flag
• Refresh intervals, calendar date ranges
• Ticket purchase time windows (prod only)

React Rewrite Requirements

The new component must be a ModernJS SSR remote micro-frontend with:

Stack

• Framework: ModernJS (SSR enabled)
• Bundler: Webpack 5, Rsbuild, Rspack, or Vite — whichever supports Module Federation 2.0
• Module Federation: Must expose mf-manifest.json at https://<domain>/mf-manifest.json
• React: 18+ with Concurrent Mode, <Suspense> support, no side-effects outside useEffect, dynamic imports via React.lazy()

Functional Parity (port from Angular)

• Features to port: online-board, schedule, flights-map, popular-requests
• Data source: REST API (JSON) — same endpoints currently proxied under /api
• Real-time: SignalR hub integration
• Maps: Leaflet (or equivalent)
• i18n: 9 languages
• Multi-theme: Responsive / "rubber layout" for Web + PWA embedding

Non-functional Requirements

• SEO: SSR-rendered meta tags, JSON-LD, OpenGraph markup
• Analytics: Яндекс.Метрика, CTM, Вариокуб, Ключ-Астром
• Logging: Structured frontend log collection → customer logging system
• Monitoring: System events → metrics aggregator
• Isolation: Component must not affect or be affected by host application styles/globals
• Availability: 24/7, recovery < 6h after hardware restoration

Code Style for React Code

• Prettier config from .prettierrc.json: single quotes, trailing commas all, 4-space indent, semicolons
• ESLint config from .eslintrc.js: max line length 80, TypeScript strict

Markdown Style

Do not wrap or break lines in markdown files. Write each paragraph or list item as a single long line.

Release & Changelog

This project uses Keep a Changelog and Semantic Versioning. Version is tracked in two places: pyproject.toml and audio_transcribe/__init__.py.

Per-commit rule: When committing a fix:, feat:, or breaking change, also add a line to the [Unreleased] section of CHANGELOG.md under the appropriate heading (### Added, ### Fixed, ### Changed, ### Removed). This keeps the changelog current while context is fresh.

Releasing: Use /release to bump version, stamp changelog, commit, tag, and optionally push. The skill auto-detects the bump level from commit prefixes (fix: → patch, feat: → minor, BREAKING CHANGE → major) and lets you override.

Git Conventions

Do not include Co-Authored-By lines in commit messages.