Lobo
450ab0b837
Refactor sorting to produce and consume SortSnapshot sequences for visualization. SortingService now creates immutable snapshots and implements bubble, quick and heap sorts (with helper methods) instead of performing UI delays; a swap/heapify/partition flow records state changes. SortingComponent was updated to animate snapshots (with start/stop timeout handling), added array size input and controls, stores an unsorted copy for resets, and uses ChangeDetectorRef for updates. Minor UI tweaks: faster bar transitions, info color, updated default array size and animation speed, and added i18n keys for ARRAY_SIZE (en/de).
📗 playground-frontend/README.md
🎨 Playground Frontend
This is the frontend of the Playground project.
Built with Angular 21 and Angular Material, including a simple light/dark theme toggle and multi-language support 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 21 | Frontend framework |
| Angular Material | UI components & theming |
| ngx-translate | i18n / instant translation |
| NGINX | Serves the compiled SPA |
| Docker + GitHub Actions | Automated build & image publishing |
📁 Project Structure
playground-frontend/ ├─ src/ │ ├─ app/ │ │ ├─ app.component.ts │ │ ├─ theme.service.ts │ │ └─ ... │ ├─ assets/i18n/ │ │ ├─ en.json │ │ └─ de.json │ └─ index.html ├─ Dockerfile ├─ nginx.conf └─ .github/workflows/docker.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
⚙️ GitHub Actions (CI/CD)
On every push to main, GitHub Actions will:
Build the Angular project
- Create a Docker image
- Push it to Docker Hub (docker.io/andreasdahm/playground-frontend:main)
- Workflow file: .github/workflows/docker.yml
Required repository secrets:
Name Description DOCKERHUB_USERNAME Your Docker Hub username DOCKERHUB_TOKEN Personal access token for Docker Hub
🌐 Deployment
The built image is deployed via https://github.com/lobothedark/playground-deploy
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