feat: add Angular frontend skeleton

2026-04-29 12:17:07 +02:00
parent 35ae0278b7
commit 5f30029f4b
20 changed files with 818 additions and 3 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,2 @@
+/dist
+/node_modules
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -0,0 +1,65 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "azionelab": {
+      "projectType": "application",
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/azionelab",
+            "browser": "src/main.ts",
+            "index": "src/index.html",
+            "polyfills": ["zone.js"],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
+              "src/styles.css"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "azionelab:build:production"
+            },
+            "development": {
+              "buildTarget": "azionelab:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  }
+}
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "azionelab-frontend",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test"
+  },
+  "dependencies": {
+    "@angular/animations": "^19.2.0",
+    "@angular/cdk": "^19.2.0",
+    "@angular/common": "^19.2.0",
+    "@angular/compiler": "^19.2.0",
+    "@angular/core": "^19.2.0",
+    "@angular/forms": "^19.2.0",
+    "@angular/material": "^19.2.0",
+    "@angular/platform-browser": "^19.2.0",
+    "@angular/platform-browser-dynamic": "^19.2.0",
+    "@angular/router": "^19.2.0",
+    "rxjs": "^7.8.1",
+    "tslib": "^2.8.1",
+    "zone.js": "^0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.2.0",
+    "@angular/cli": "^19.2.0",
+    "@angular/compiler-cli": "^19.2.0",
+    "@types/node": "^22.10.2",
+    "typescript": "^5.7.2"
+  }
+}
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
@@ -0,0 +1 @@
+
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -0,0 +1,119 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [
+    RouterOutlet,
+    RouterLink,
+    RouterLinkActive,
+    MatToolbarModule,
+    MatButtonModule,
+    MatIconModule,
+  ],
+  template: `
+    <div class="app-shell">
+      <mat-toolbar class="app-toolbar">
+        <a class="brand" routerLink="/">
+          <span class="brand-mark">A</span>
+          <span class="brand-text">
+            <strong>AzioneLab</strong>
+            <small>Theatre and reservations</small>
+          </span>
+        </a>
+
+        <nav class="main-nav">
+          <a mat-button routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
+          <a mat-button routerLink="/shows" routerLinkActive="active">Shows</a>
+          <a mat-button routerLink="/check-in" routerLinkActive="active">Check-in</a>
+        </nav>
+      </mat-toolbar>
+
+      <main class="page-shell">
+        <router-outlet></router-outlet>
+      </main>
+    </div>
+  `,
+  styles: [`
+    .app-shell {
+      min-height: 100vh;
+    }
+
+    .app-toolbar {
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      display: flex;
+      justify-content: space-between;
+      gap: 16px;
+      min-height: 72px;
+      padding: 0 24px;
+      background: rgba(251, 247, 242, 0.88);
+      backdrop-filter: blur(18px);
+      border-bottom: 1px solid var(--azionelab-border);
+    }
+
+    .brand {
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .brand-mark {
+      display: inline-grid;
+      place-items: center;
+      width: 42px;
+      height: 42px;
+      border-radius: 10px;
+      background: linear-gradient(135deg, var(--azionelab-accent), #ca6d3b);
+      color: white;
+      font-weight: 700;
+    }
+
+    .brand-text {
+      display: flex;
+      flex-direction: column;
+      line-height: 1.1;
+    }
+
+    .brand-text small {
+      color: var(--azionelab-muted);
+      font-size: 0.74rem;
+    }
+
+    .main-nav {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex-wrap: wrap;
+    }
+
+    .main-nav .active {
+      background: rgba(159, 47, 40, 0.08);
+    }
+
+    .page-shell {
+      padding: 32px 20px 56px;
+    }
+
+    @media (max-width: 800px) {
+      .app-toolbar {
+        align-items: flex-start;
+        flex-direction: column;
+        padding: 16px 16px 14px;
+      }
+
+      .main-nav {
+        width: 100%;
+      }
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppComponent {}
--- a/frontend/src/app/app.routes.ts
+++ b/frontend/src/app/app.routes.ts
@@ -0,0 +1,16 @@
+import { Routes } from '@angular/router';
+
+import { BookingPlaceholderPageComponent } from './pages/booking-placeholder-page.component';
+import { CheckInPlaceholderPageComponent } from './pages/check-in-placeholder-page.component';
+import { HomePageComponent } from './pages/home-page.component';
+import { ShowDetailPlaceholderPageComponent } from './pages/show-detail-placeholder-page.component';
+import { ShowListPageComponent } from './pages/show-list-page.component';
+
+export const appRoutes: Routes = [
+  { path: '', component: HomePageComponent, title: 'AzioneLab' },
+  { path: 'shows', component: ShowListPageComponent, title: 'Shows | AzioneLab' },
+  { path: 'shows/:slug', component: ShowDetailPlaceholderPageComponent, title: 'Show detail | AzioneLab' },
+  { path: 'book/:performanceId', component: BookingPlaceholderPageComponent, title: 'Book | AzioneLab' },
+  { path: 'check-in', component: CheckInPlaceholderPageComponent, title: 'Check-in | AzioneLab' },
+  { path: '**', redirectTo: '' },
+];
--- a/frontend/src/app/environments/environment.ts
+++ b/frontend/src/app/environments/environment.ts
@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  apiBaseUrl: '/api',
+};
--- a/frontend/src/app/pages/booking-placeholder-page.component.ts
+++ b/frontend/src/app/pages/booking-placeholder-page.component.ts
@@ -0,0 +1,74 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatListModule } from '@angular/material/list';
+
+@Component({
+  standalone: true,
+  imports: [MatCardModule, MatDividerModule, MatListModule],
+  template: `
+    <section class="page">
+      <header class="page-header">
+        <p class="eyebrow">Booking</p>
+        <h1>Performance {{ performanceId }}</h1>
+        <p class="supporting">
+          This page will host the reservation form and confirmation states backed by the existing booking APIs.
+        </p>
+      </header>
+
+      <mat-card class="content-card">
+        <mat-card-title>Planned interactions</mat-card-title>
+        <mat-card-content>
+          <mat-list>
+            <mat-list-item>Load performance detail and availability</mat-list-item>
+            <mat-list-item>Submit pending reservation</mat-list-item>
+            <mat-list-item>Show email confirmation guidance</mat-list-item>
+          </mat-list>
+        </mat-card-content>
+      </mat-card>
+    </section>
+  `,
+  styles: [`
+    .page {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+
+    .page-header {
+      margin-bottom: 22px;
+    }
+
+    .eyebrow {
+      margin: 0 0 10px;
+      color: var(--azionelab-accent);
+      text-transform: uppercase;
+      font-size: 0.78rem;
+      font-weight: 700;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: clamp(2rem, 4vw, 3rem);
+    }
+
+    .supporting {
+      color: var(--azionelab-muted);
+      line-height: 1.6;
+      max-width: 50ch;
+    }
+
+    .content-card {
+      border-radius: 8px;
+      border: 1px solid var(--azionelab-border);
+      background: var(--azionelab-surface);
+      box-shadow: var(--azionelab-shadow);
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BookingPlaceholderPageComponent {
+  protected readonly performanceId = this.route.snapshot.paramMap.get('performanceId') ?? '0';
+
+  constructor(private readonly route: ActivatedRoute) {}
+}
--- a/frontend/src/app/pages/check-in-placeholder-page.component.ts
+++ b/frontend/src/app/pages/check-in-placeholder-page.component.ts
@@ -0,0 +1,72 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+@Component({
+  standalone: true,
+  imports: [MatCardModule, MatFormFieldModule, MatInputModule],
+  template: `
+    <section class="page">
+      <header class="page-header">
+        <p class="eyebrow">Staff check-in</p>
+        <h1>Mobile-friendly placeholder</h1>
+        <p class="supporting">
+          This route is ready for the authenticated token preview and check-in confirmation flow.
+        </p>
+      </header>
+
+      <mat-card class="content-card">
+        <mat-card-title>Future scan/lookup input</mat-card-title>
+        <mat-card-content>
+          <mat-form-field appearance="outline" class="full-width">
+            <mat-label>Opaque QR token</mat-label>
+            <input matInput placeholder="Paste or scan token" readonly>
+          </mat-form-field>
+        </mat-card-content>
+      </mat-card>
+    </section>
+  `,
+  styles: [`
+    .page {
+      max-width: 760px;
+      margin: 0 auto;
+    }
+
+    .page-header {
+      margin-bottom: 22px;
+    }
+
+    .eyebrow {
+      margin: 0 0 10px;
+      color: var(--azionelab-accent);
+      text-transform: uppercase;
+      font-size: 0.78rem;
+      font-weight: 700;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: clamp(2rem, 4vw, 3rem);
+    }
+
+    .supporting {
+      color: var(--azionelab-muted);
+      line-height: 1.6;
+      max-width: 50ch;
+    }
+
+    .content-card {
+      border-radius: 8px;
+      border: 1px solid var(--azionelab-border);
+      background: var(--azionelab-surface);
+      box-shadow: var(--azionelab-shadow);
+    }
+
+    .full-width {
+      width: 100%;
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CheckInPlaceholderPageComponent {}
--- a/frontend/src/app/pages/home-page.component.ts
+++ b/frontend/src/app/pages/home-page.component.ts
@@ -0,0 +1,113 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+
+import { API_BASE_URL } from '../services/api-config.token';
+
+@Component({
+  standalone: true,
+  imports: [RouterLink, MatButtonModule, MatCardModule],
+  template: `
+    <section class="hero">
+      <div class="hero-copy">
+        <p class="eyebrow">AzioneLab Theatre Company</p>
+        <h1>Public website and booking UI foundations.</h1>
+        <p class="supporting">
+          This Angular shell is wired for the existing Django APIs and ready for the next booking-focused iterations.
+        </p>
+        <div class="hero-actions">
+          <a mat-flat-button color="primary" routerLink="/shows">Browse shows</a>
+          <a mat-stroked-button routerLink="/check-in">Check-in area</a>
+        </div>
+      </div>
+
+      <div class="hero-panel">
+        <mat-card>
+          <mat-card-title>Frontend wiring</mat-card-title>
+          <mat-card-content>
+            <p><strong>API base URL</strong></p>
+            <code>{{ apiBaseUrl }}</code>
+            <p class="panel-note">Placeholders are in place for public content, booking, and staff check-in flows.</p>
+          </mat-card-content>
+        </mat-card>
+      </div>
+    </section>
+  `,
+  styles: [`
+    .hero {
+      display: grid;
+      grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
+      gap: 28px;
+      align-items: stretch;
+      max-width: 1180px;
+      margin: 0 auto;
+    }
+
+    .hero-copy {
+      padding: 36px 0;
+    }
+
+    .eyebrow {
+      margin: 0 0 12px;
+      color: var(--azionelab-accent);
+      text-transform: uppercase;
+      font-size: 0.78rem;
+      font-weight: 700;
+    }
+
+    h1 {
+      margin: 0;
+      max-width: 10ch;
+      font-size: clamp(2.5rem, 5vw, 4.75rem);
+      line-height: 0.95;
+    }
+
+    .supporting {
+      max-width: 52ch;
+      color: var(--azionelab-muted);
+      font-size: 1.08rem;
+      line-height: 1.65;
+      margin: 20px 0 0;
+    }
+
+    .hero-actions {
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+      margin-top: 28px;
+    }
+
+    .hero-panel mat-card {
+      height: 100%;
+      border-radius: 8px;
+      border: 1px solid var(--azionelab-border);
+      background: var(--azionelab-surface);
+      box-shadow: var(--azionelab-shadow);
+    }
+
+    code {
+      display: inline-block;
+      margin-top: 8px;
+      padding: 10px 12px;
+      border-radius: 8px;
+      background: rgba(30, 27, 24, 0.06);
+    }
+
+    .panel-note {
+      margin-top: 20px;
+      color: var(--azionelab-muted);
+      line-height: 1.5;
+    }
+
+    @media (max-width: 900px) {
+      .hero {
+        grid-template-columns: 1fr;
+      }
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HomePageComponent {
+  protected readonly apiBaseUrl = inject(API_BASE_URL);
+}
--- a/frontend/src/app/pages/show-detail-placeholder-page.component.ts
+++ b/frontend/src/app/pages/show-detail-placeholder-page.component.ts
@@ -0,0 +1,73 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { TitleCasePipe } from '@angular/common';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+
+@Component({
+  standalone: true,
+  imports: [TitleCasePipe, RouterLink, MatButtonModule, MatCardModule],
+  template: `
+    <section class="page">
+      <header class="page-header">
+        <p class="eyebrow">Show detail</p>
+        <h1>{{ slug | titlecase }}</h1>
+        <p class="supporting">
+          This placeholder will bind to the public show detail and performance endpoints.
+        </p>
+      </header>
+
+      <mat-card class="content-card">
+        <mat-card-title>Next UI step</mat-card-title>
+        <mat-card-content>
+          <p>Wire show copy, upcoming performances, and booking entry points from the backend contract.</p>
+        </mat-card-content>
+        <mat-card-actions>
+          <a mat-button routerLink="/book/10">Open booking placeholder</a>
+        </mat-card-actions>
+      </mat-card>
+    </section>
+  `,
+  styles: [`
+    .page {
+      max-width: 960px;
+      margin: 0 auto;
+    }
+
+    .page-header {
+      margin-bottom: 22px;
+    }
+
+    .eyebrow {
+      margin: 0 0 10px;
+      color: var(--azionelab-accent);
+      text-transform: uppercase;
+      font-size: 0.78rem;
+      font-weight: 700;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: clamp(2rem, 4vw, 3.2rem);
+    }
+
+    .supporting {
+      color: var(--azionelab-muted);
+      line-height: 1.6;
+      max-width: 52ch;
+    }
+
+    .content-card {
+      border-radius: 8px;
+      border: 1px solid var(--azionelab-border);
+      background: var(--azionelab-surface);
+      box-shadow: var(--azionelab-shadow);
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ShowDetailPlaceholderPageComponent {
+  protected readonly slug = this.route.snapshot.paramMap.get('slug') ?? 'show';
+
+  constructor(private readonly route: ActivatedRoute) {}
+}
--- a/frontend/src/app/pages/show-list-page.component.ts
+++ b/frontend/src/app/pages/show-list-page.component.ts
@@ -0,0 +1,125 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatChipsModule } from '@angular/material/chips';
+
+type DemoShow = {
+  slug: string;
+  title: string;
+  summary: string;
+  venue: string;
+  startsAt: string;
+};
+
+@Component({
+  standalone: true,
+  imports: [RouterLink, MatButtonModule, MatCardModule, MatChipsModule],
+  template: `
+    <section class="page">
+      <header class="page-header">
+        <div>
+          <p class="eyebrow">Public shows</p>
+          <h1>Show list placeholder</h1>
+        </div>
+        <p class="supporting">
+          This page is ready to bind to <code>GET /api/shows/</code> and <code>GET /api/performances/</code>.
+        </p>
+      </header>
+
+      <div class="show-grid">
+        @for (show of demoShows; track show.slug) {
+          <mat-card class="show-card">
+            <mat-card-title>{{ show.title }}</mat-card-title>
+            <mat-card-subtitle>{{ show.venue }}</mat-card-subtitle>
+            <mat-card-content>
+              <p>{{ show.summary }}</p>
+              <mat-chip-set>
+                <mat-chip>{{ show.startsAt }}</mat-chip>
+              </mat-chip-set>
+            </mat-card-content>
+            <mat-card-actions>
+              <a mat-button [routerLink]="['/shows', show.slug]">Open detail</a>
+            </mat-card-actions>
+          </mat-card>
+        }
+      </div>
+    </section>
+  `,
+  styles: [`
+    .page {
+      max-width: 1180px;
+      margin: 0 auto;
+    }
+
+    .page-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
+      gap: 24px;
+      align-items: end;
+      margin-bottom: 24px;
+    }
+
+    .eyebrow {
+      margin: 0 0 10px;
+      color: var(--azionelab-accent);
+      text-transform: uppercase;
+      font-size: 0.78rem;
+      font-weight: 700;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: clamp(2rem, 4vw, 3rem);
+    }
+
+    .supporting {
+      margin: 0;
+      color: var(--azionelab-muted);
+      line-height: 1.6;
+    }
+
+    .show-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+      gap: 20px;
+    }
+
+    .show-card {
+      border-radius: 8px;
+      border: 1px solid var(--azionelab-border);
+      background: var(--azionelab-surface);
+      box-shadow: var(--azionelab-shadow);
+    }
+
+    .show-card p {
+      color: var(--azionelab-muted);
+      line-height: 1.6;
+    }
+
+    @media (max-width: 860px) {
+      .page-header {
+        grid-template-columns: 1fr;
+      }
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ShowListPageComponent {
+  protected readonly demoShows: DemoShow[] = [
+    {
+      slug: 'open-stage',
+      title: 'Open Stage',
+      summary: 'Placeholder list item for the first published production.',
+      venue: 'AzioneLab Theatre',
+      startsAt: 'May 15, 20:30',
+    },
+    {
+      slug: 'city-echoes',
+      title: 'City Echoes',
+      summary: 'Second sample entry showing how cards will map to live API data.',
+      venue: 'Studio Nuovo',
+      startsAt: 'May 22, 18:00',
+    },
+  ];
+}
--- a/frontend/src/app/services/api-config.token.ts
+++ b/frontend/src/app/services/api-config.token.ts
@@ -0,0 +1,7 @@
+import { InjectionToken } from '@angular/core';
+
+import { environment } from '../environments/environment';
+
+export const API_BASE_URL = new InjectionToken<string>('API_BASE_URL', {
+  factory: () => environment.apiBaseUrl,
+});
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>AzioneLab</title>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -0,0 +1,15 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideHttpClient } from '@angular/common/http';
+import { provideRouter } from '@angular/router';
+
+import { AppComponent } from './app/app.component';
+import { appRoutes } from './app/app.routes';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideAnimations(),
+    provideHttpClient(),
+    provideRouter(appRoutes),
+  ],
+}).catch((err) => console.error(err));
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -0,0 +1,33 @@
+:root {
+  --azionelab-bg: #f3eee6;
+  --azionelab-surface: rgba(255, 255, 255, 0.78);
+  --azionelab-ink: #1e1b18;
+  --azionelab-muted: #645b53;
+  --azionelab-accent: #9f2f28;
+  --azionelab-accent-strong: #7f211c;
+  --azionelab-border: rgba(30, 27, 24, 0.12);
+  --azionelab-shadow: 0 18px 48px rgba(46, 28, 18, 0.12);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  min-height: 100%;
+  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
+  color: var(--azionelab-ink);
+  background:
+    radial-gradient(circle at top right, rgba(159, 47, 40, 0.12), transparent 28%),
+    radial-gradient(circle at left center, rgba(140, 116, 86, 0.14), transparent 35%),
+    linear-gradient(180deg, #fbf7f2 0%, var(--azionelab-bg) 100%);
+}
+
+body {
+  min-height: 100vh;
+}
+
+button, input, textarea {
+  font: inherit;
+}
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"]
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": ["ES2022", "dom"]
+  },
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
--- a/infra/docker/compose.yml
+++ b/infra/docker/compose.yml
@@ -28,7 +28,8 @@ services:

  frontend:
    build:
-      context: ./frontend
+      context: ../..
+      dockerfile: infra/docker/frontend/Dockerfile
    image: azionelab-frontend:local
    expose:
      - "${FRONTEND_PORT:-8080}"
--- a/infra/docker/frontend/Dockerfile
+++ b/infra/docker/frontend/Dockerfile
@@ -1,6 +1,18 @@
+FROM node:22.12.0-alpine AS build
+
+WORKDIR /app
+
+COPY frontend/package.json /app/package.json
+
+RUN npm install
+
+COPY frontend/ /app/
+
+RUN npm run build
+
 FROM nginx:1.27.0-alpine

-COPY nginx.conf /etc/nginx/conf.d/default.conf
-COPY html/ /usr/share/nginx/html/
+COPY infra/docker/frontend/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist/azionelab/browser/ /usr/share/nginx/html/

 EXPOSE 8080