lobo
775845b801
Move to Angular 22 and update all dependencies. TypeScript stays on 6.0 (7 is blocked by Angular 22). Drop the ip-address override, add fast-uri and basic-ftp overrides for audit fixes. Set ChangeDetectionStrategy.Eager on components, as the ng update migration does, and turn off the new OnPush lint rule. Add the To Be Played project to the projects page and the about page.
4.3 KiB
🎨 Playground Frontend
This is the frontend of the Playground project. Built with Angular 22 and Angular Material, including a light/dark theme toggle and multi-language support (EN/DE) via ngx-translate.
The app is built as a static Single Page Application (SPA) served by NGINX, deployed at: 👉 https://app.andreas-dahm.eu
🧩 Tech Stack
| Component | Purpose |
|---|---|
| Angular 22 | Frontend framework (standalone components, signals, zoneless change detection) |
| Angular Material 22 | UI components & theming |
| Tailwind CSS 4 | Utility-first styling (CSS-first config, no tailwind.config.js) |
| ngx-translate 18 | i18n / instant translation |
| Babylon.js 9 | WebGL/WebGPU rendering for the algorithm demos |
| Swiper 14 | Image carousels in the project dialogs |
| Angular Service Worker | PWA / offline caching |
| NGINX | Serves the compiled SPA |
| Docker + Gitea Actions | Automated build, test & image publishing |
Requires Node.js 22.
📁 Project Structure
playground-frontend/
├─ src/
│ ├─ app/
│ │ ├─ layout/ # app shell, topbar, dialogs
│ │ ├─ pages/ # about, projects, algorithms, imprint, stopwatch, not-found
│ │ ├─ service/ # theme, language, SEO, GPU capability
│ │ ├─ shared/ # reusable components & helpers
│ │ ├─ constants/
│ │ ├─ app.config.ts
│ │ └─ app.routes.ts
│ ├─ assets/
│ │ ├─ i18n/ # en.json / de.json (keys must stay in sync)
│ │ ├─ logos/, flags/, icons/
│ │ └─ projects/ # project screenshots
│ ├─ tailwind.css # Tailwind entry + @theme tokens
│ ├─ styles.scss # Material theme setup & component overrides
│ └─ index.html
├─ scripts/check-i18n.mjs # fails the build on i18n key drift
├─ Dockerfile
├─ nginx.conf
├─ ngsw-config.json # service worker caching rules
├─ lighthouserc.json
└─ .gitea/workflows/build-Frontend-a.yml
🚀 Local Development
1. Install dependencies
npm install
2. Start development server
ng serve --open
App runs at http://localhost:4200
3. Docker build (local)
docker build -t playground-frontend:local .
docker run -p 8080:80 playground-frontend:local
Then open http://localhost:8080
🧪 Scripts
| Command | Purpose |
|---|---|
npm start |
Dev server |
npm run build |
Production build |
npm run watch |
Rebuild on change (development configuration) |
npm test |
Unit tests (Karma + Jasmine, headless Chrome) |
npm run lint |
ESLint over src/**/*.ts and src/**/*.html |
npm run i18n:check |
Verifies en.json and de.json share the exact same keys |
⚙️ Gitea Actions (CI/CD)
CI/CD runs on a self-hosted Gitea instance at git.andreas-dahm.eu.
Workflow file: .gitea/workflows/build-Frontend-a.yml
Triggered on every push to main and on pull requests targeting main.
Job 1 — quality-check (runs on both pushes and PRs):
- Lint & type check —
npm run lint - i18n key sync —
npm run i18n:check - Unit tests —
npx ng test --watch=false - Production build —
npx ng build --configuration production - Lighthouse audit —
npx lhci autorun(performance & SEO)
Job 2 — docker (only on a push to main, and only if quality-check passed):
Builds the image and pushes it to the Gitea container registry at git.andreas-dahm.eu
with these tags:
git.andreas-dahm.eu/<owner>/playground:frontend-a-<branch>
git.andreas-dahm.eu/<owner>/playground:frontend-a-<branch>-<short-sha>
git.andreas-dahm.eu/<owner>/playground:frontend-a-main
Required repository secret:
| Name | Description |
|---|---|
TOKEN_GITEA |
Gitea access token used to authenticate against the container registry |
🌐 Deployment
The built image is deployed via the playground-deploy repository on the Hostinger KVM
server using Traefik:
docker compose pull
docker compose up -d
✅ Live site at https://app.andreas-dahm.eu
🪄 Maintainer
Andreas Dahm 📧 andreas.dahm@gmail.com 🌐 https://andreas-dahm.eu