🎨 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://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 (Vitest + jsdom, no browser needed)
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
npm run assets:check	Verifies every asset path referenced in src/ exists (also runs in npm run lint)

---

⚙️ 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):

1. Lint & type check — npm run lint (includes npm run assets:check)
2. i18n key sync — npm run i18n:check
3. Unit tests — npm test
4. Production build — npx ng build --configuration production
5. 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://andreas-dahm.eu

---

🪄 Maintainer

Andreas Dahm 📧 info@andreas-dahm.eu 🌐 https://andreas-dahm.eu