# Gemini CLI Context for playground-frontend ## Project Overview This is the frontend of the Playground project, built with Angular 21 and Angular Material. It includes features like a light/dark theme toggle and multi-language support via ngx-translate. The application is a static Single Page Application (SPA) served by NGINX. **Key Technologies:** * **Frontend Framework:** Angular 21 * **UI Components & Theming:** Angular Material * **Internationalization:** ngx-translate * **Server:** NGINX (for serving the SPA) * **Containerization:** Docker * **CI/CD:** GitHub Actions ## Building and Running ### Local Development 1. **Install dependencies:** ```bash npm install ``` 2. **Start development server:** ```bash ng serve --open ``` The app will run at `http://localhost:4200`. ### Building for Production To build the project for production, which creates the optimized static files: ```bash ng build ``` ### Running Tests To run the unit tests: ```bash ng test ``` ### Linting To lint the codebase: ```bash ng lint ``` ### Docker To build and run the application using Docker locally: 1. **Build Docker image:** ```bash docker build -t playground-frontend:local . ``` 2. **Run Docker container:** ```bash docker run -p 8080:80 playground-frontend:local ``` Then open `http://localhost:8080` in your browser. ## Development Conventions * **Language:** TypeScript * **Framework:** Angular * **Styling:** SCSS (based on `styles.scss` and component-specific `.scss` files). * **Linting:** ESLint is configured (see `eslint.config.js` and `package.json` scripts). * **Internationalization:** Uses `ngx-translate` with `en.json` and `de.json` asset files. ## Project Structure (Key Areas) * `src/app/`: Contains the main application logic, components, services, and routing. * `src/app/pages/`: Specific pages of the application (e.g., about, algorithms, imprint, projects). * `src/assets/`: Static assets including images, internationalization files (`i18n`), and logos. * `Dockerfile`: Defines the Docker image for the application. * `nginx.conf`: NGINX configuration for serving the SPA. * `.gitea/workflows/`: Contains CI/CD workflows (e.g., `build-Frontend-a.yml`).