Earth Ocean Learning (EOL)

Eine interaktive Lern-App für Kinder (7-9 Jahre) zum Entdecken der Weltmeere.
Dokumentation (Handbuch) »

Live Demo · Bug melden · Feature anfragen

Inhaltsverzeichnis

1. Über das Projekt
   • Technologie Stack
   • Projektstruktur
2. Getting Started
   • Voraussetzungen
   • Installation
   • Backend (Optional)
3. Nutzung
4. Entwicklung & Commands
5. Lizenz
6. Kontakt

ℹ️ Über das Projekt

Earth Ocean Learning ist eine interaktive Single Page Application (SPA), die Grundschulkindern die fünf Weltmeere spielerisch näherbringt.

Das Projekt wurde als simulierte Abschlussarbeit für die IHK Fachinformatiker für Anwendungsentwicklung Zertifizierung entwickelt. Es bietet eine kindgerechte Benutzeroberfläche (inkl. Lade-Animationen), Gamification-Elemente und legt großen Wert auf Datenschutz (lokale Speicherung).

👉 Detaillierte Dokumentation: Siehe Boyke-Tobias-Angular-EOL-App-20251209.pdf.

📋 Projektmanagement: Hier geht's zum Kanban Board (Agile Planung via GitHub Projects).

(zurück nach oben)

🛠 Technologie Stack

Dieses Projekt basiert auf folgenden Technologien:

• Angular 21
• Tailwind CSS 4
• Node.js
• Vitest
• Playwright
• Angular Signals (State Management)
• TypeScript

(zurück nach oben)

📂 Projektstruktur

Das Projekt folgt einer modularen Architektur mit Standalone Components:

• src/app/core/: Singleton Services & Base Classes (z.B. API Services)
• src/app/features/: Feature-Komponenten (Ozean-Auswahl, Quiz, etc.) - Single Class per File
• src/app/shared/: Wiederverwendbare UI-Komponenten (Cards, Spinner, etc.)
• src/app/models/: TypeScript Interfaces und Typen
• src/app/store/: State Management mit Angular Signals (SignalStore)
• tests/: E2E Tests (Playwright)

(zurück nach oben)

🚀 Getting Started

Folge diesen Schritten, um eine lokale Kopie des Projekts zum Laufen zu bringen.

Voraussetzungen

• Node.js: (Empfohlen: Aktuelle LTS Version - v22+)
• npm: Wird normalerweise mit Node.js installiert.

Installation

1. Repo klonen

   git clone https://github.com/T-Boyke/EhlenAngularProjekt3.git

2. NPM Pakete installieren

   npm install
   # oder für sauberen Install:
   npm ci

(zurück nach oben)

💻 Nutzung

Starte den Entwicklungsserver:

npm start
# oder
ng serve

Navigiere zu http://localhost:4200/. Die Anwendung lädt automatisch neu, wenn Quellcode-Dateien geändert werden.

(zurück nach oben)

👨‍💻 Entwicklung & Commands

Build für Produktion:

npm run build

Die Artefakte werden im dist/ Verzeichnis gespeichert.

Unit Tests (Vitest):

npm test

Code Coverage:

npm run test:coverage

E2E Tests (Playwright):

npm run test:e2e

(zurück nach oben)

🔌 Backend (Optional)

Das Projekt ist für die Anbindung an ein Grav CMS Backend (EOL Manager) vorbereitet, um Inhalte dynamisch zu verwalten.

• Standardmäßig nutzt die App die lokale assets/data/ocean-data.json (Fallback-Strategie).
• Ist das Backend unter http://127.0.0.1:8000 erreichbar, werden die Daten live von der API geladen.
• Backend-Repository: [Link zum eol-manager Repo]

(zurück nach oben)

📝 Lizenz

Verteilt unter der MIT Lizenz. Siehe LICENSE für weitere Informationen.

(zurück nach oben)

👤 Kontakt & Support

T-Boyke - Developer

Projektlink: github

(zurück nach oben)