jumpin-frontend

A Docker-based Angular 21 frontend, served by Nginx in production.

Prerequisites

• Docker with Compose v2.10+
• npm registry credentials for the Bbc private registry in ~/.npmrc

Quick Start

bin/dev build
bin/dev up

To stop:

bin/dev down

Development

bin/dev Commands

Examples

# Run tests
bin/dev test

# Production build
bin/dev ng build --configuration=production

# Generate a component
bin/dev ng generate component features/my-feature/my-component --standalone --style=scss

# Install a new dependency
bin/dev npm install some-package

# View logs
bin/dev logs -f

Git Hooks

The project includes a pre-commit hook that runs ng lint and prettier --check inside the container before each commit. To activate:

git config core.hooksPath .githooks

API Client (@tooling/jumpin)

The @tooling/jumpin package is generated by the backend CI pipeline from the OpenAPI spec. It is published with dist-tags based on the backend branch:

To install or update:

# Install latest production client
bin/dev npm install @tooling/jumpin@latest

# Install staging client
bin/dev npm install @tooling/jumpin@staging

# Install from a specific feature branch
bin/dev npm install @tooling/jumpin@my-feature-branch

Project Architecture

A plain Angular CLI project (no Nx, no monorepo libraries). Everything lives under src/app/:

src/app/
├── core/
│   ├── config/        # app.config.ts, APP_CONFIG token, runtime /config.json loader
│   ├── guards/        # authGuard, guestGuard, adminGuard
│   ├── store/         # AuthStore, UiStore (NgRx Signal Stores)
│   └── util/          # core helpers
├── shared/
│   ├── components/    # bbc-call-state, bbc-delete-confirm-dialog, bbc-editor, bbc-emoji,
│   │                  # bbc-emoji-picker-dialog, bbc-header, bbc-navigation, bbc-noise-overlay,
│   │                  # bbc-status-indicator, icons/
│   └── util/          # error, logger.service, meta, with-call-state
├── layout/
│   ├── main-layout/   # Wraps dashboard, program, info, map, activities
│   ├── splash-layout/ # Wraps welcome + landing (fullscreen)
│   └── admin-layout/  # Wraps admin pages
└── features/
    ├── welcome/
    ├── landing/
    ├── dashboard/
    ├── program/       # incl. program-header (feature-scoped)
    ├── info/
    ├── map/
    ├── activities/
    └── admin/
        ├── events/
        ├── info-pages/
        └── locations/

Path alias

A single TypeScript alias is defined in tsconfig.json: @/* → src/app/*. Use it in imports:

import { AuthStore } from '@/core/store/auth.store';
import { HeaderComponent } from '@/shared/components/header/header.component';

Conventions

• Components are standalone (no NgModules).
• Component selector prefix: bbc- (kebab-case) — enforced by eslint.config.js.
• Directive selector prefix: bbc (camelCase).
• Interfaces start with I (e.g. INavigationItem, IAuthState).
• Explicit type annotations on members, parameters, and return types.

See docs/shared-components.md for the shared-component catalog and the component generator command.

Environment Variables

The app loads its configuration at runtime from /config.json. In development, this file is served from public/config.json with local defaults. In production, it is generated at container startup from environment variables (see .docker/docker-entrypoint.sh).

Development (defaults in public/config.json)

Production / Staging (set as container environment variables)

Production

Production deployment is handled by GitLab CI/CD. Pushing to staging deploys to the test server, pushing to production deploys to the production server.

CI/CD Variables

See .gitlab-ci.yml for pipeline configuration. Required variables: