plan/react-rewrite #1
@@ -1,129 +1,68 @@
|
||||
# CLAUDE.md
|
||||
# Aeroflot.Flights.Web
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
## Current State
|
||||
|
||||
## Project Overview
|
||||
ASP.NET host (`Aeroflot.Flights.Web.csproj`, `Startup.cs`, `Program.cs`) serving an Angular 12 SPA located in `ClientApp/` (Angular CLI + custom webpack config, Karma, Cypress, Storybook/Compodoc).
|
||||
|
||||
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.
|
||||
## Target: React Remote Component Rewrite
|
||||
|
||||
## Current Angular App (ClientApp/)
|
||||
The Angular app is being rewritten as a **remote frontend component** embeddable in the customer's channel apps (Web, PWA). Requirements below are contractual — treat them as hard constraints when designing or implementing the new codebase.
|
||||
|
||||
### Dev Commands
|
||||
### 1. Tech Stack
|
||||
|
||||
```bash
|
||||
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
|
||||
```
|
||||
- **ModernJS (SSR)** for the frontend framework.
|
||||
- **Module Federation 2.0**. Any bundler with MF 2.0 support is acceptable: Webpack 5, Rsbuild, Rspack, or Vite.
|
||||
- Must emit `mf-manifest.json` at `https://<domain>/mf-manifest.json` exposing components and logic. Reference: https://module-federation.io/guide/basic/webpack.html.
|
||||
- **React 18+**, Concurrent Mode compatible.
|
||||
- `<Suspense>` support required when async loading is used.
|
||||
- Component bodies must be side-effect free — **no `fetch` outside `useEffect`**.
|
||||
- Dynamic imports must use `React.lazy()`.
|
||||
|
||||
### Path Aliases (tsconfig.json)
|
||||
### 2. Data & Integrations
|
||||
|
||||
| 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` |
|
||||
- Consumes customer REST APIs, JSON payloads only.
|
||||
- Rendered data must stay consistent with API responses (no stale state leaking into the UI).
|
||||
|
||||
### Architecture
|
||||
### 3. Performance
|
||||
|
||||
```
|
||||
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
|
||||
```
|
||||
- Must sustain **100 RPS**.
|
||||
|
||||
**State management**: No NgRx/Akita — pure RxJS with BehaviorSubjects exposed as Observables from services.
|
||||
### 4. Availability & Fault Tolerance
|
||||
|
||||
**Real-time**: `@microsoft/signalr` for WebSocket connections (tracker hub URL set per environment).
|
||||
- VMs hosting the component must be geographically distributed.
|
||||
- 24/7/365 availability; recovery time ≤ 6 hours after infra is restored.
|
||||
|
||||
**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`.
|
||||
### 5. Security
|
||||
|
||||
**i18n**: `@ngx-translate` with `messageformat` compiler. Translation JSON files in `src/assets/i18n/`. Supports 9 languages.
|
||||
- Component must be isolated — no attack surface exposed to other components of the host site.
|
||||
|
||||
**UI**: PrimeNG 10 + custom `toolkit/` components.
|
||||
### 6. SEO & Accessibility
|
||||
|
||||
### Environment Config
|
||||
- SEO optimization required.
|
||||
- Render microdata: **JSON-LD** and **OpenGraph**.
|
||||
- Web analytics integrations: **Yandex.Metrica, CTM, Variocube, Key-Astrom (Dynatrace)**.
|
||||
|
||||
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)
|
||||
### 7. Cross-Platform
|
||||
|
||||
## React Rewrite Requirements
|
||||
- Embeddable in multiple channel apps (Web, PWA).
|
||||
- Fully responsive ("fluid") layout across all screen sizes.
|
||||
|
||||
The new component must be a **ModernJS SSR** remote micro-frontend with:
|
||||
### 8. Logging & Monitoring
|
||||
|
||||
### 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()`
|
||||
- Frontend log collection in a customer-specified format, shipped to the customer's log aggregation system.
|
||||
- System event monitoring with export to a metrics aggregator.
|
||||
|
||||
### 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
|
||||
### 9. Module Structure
|
||||
|
||||
### 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
|
||||
- Must conform to the customer's standard remote frontend module structure for uniform deployment.
|
||||
|
||||
### 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
|
||||
### 10. Design
|
||||
|
||||
## Markdown Style
|
||||
- Implement against customer-provided mockups using the customer's design system.
|
||||
- Must embed other customer remote components when available.
|
||||
|
||||
Do not wrap or break lines in markdown files. Write each paragraph or list item as a single long line.
|
||||
## Commit Rules
|
||||
|
||||
## Release & Changelog
|
||||
|
||||
This project uses [Keep a Changelog](https://keepachangelog.com/) and [Semantic Versioning](https://semver.org/). 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.
|
||||
- Never add `Co-Authored-By` lines to commit messages.
|
||||
- Commit messages in English, concise, focused on "why" not "what".
|
||||
- Commit autonomously when changes are complete and stable — no need to ask for permission. Group related edits into logical commits. Still ask before pushing, force-pushing, or any destructive git operation.
|
||||
|
||||
Reference in New Issue
Block a user