Projekt Morsen

Projekt Morsen ist eine Vue 3 + TypeScript + Vite Single-Page-Anwendung zum Ueben des Morsealphabets. Die App kombiniert einen interaktiven Trainer mit einem Keyer, speichert Fortschritte lokal und unterstuetzt Deutsch sowie Englisch.

Hinweis: Dieses Projekt wurde zu 90% von Opencode mit dem Modell GPT 5.2-codex erstellt.

Ziele und Funktionen

• Morse-Training mit Lektionen, Fortschritt und Genauigkeit
• Lernfortschritt lokal speichern und wiederherstellen
• Import/Export des Trainingsstands als JSON
• Anpassbare Einstellungen (Eingabemodus, Tempo, Lektionstumfang, Inhalte)
• I18n fuer DE/EN

Eine Demo findet sich unter https://morsen.nerdtech.info.

Voraussetzungen

• Node.js (empfohlen: aktuelle LTS)
• npm

Installation

cd morse-webapp
npm install

Entwicklung

cd morse-webapp
npm run dev

Build

cd morse-webapp
npm run build

Preview

cd morse-webapp
npm run preview

Docker Deployment

Das Projekt kann mit Docker und Docker Compose deployed werden:

# Image bauen und Container starten
docker-compose up -d

# Logs anzeigen
docker-compose logs -f

# Container stoppen
docker-compose down

Traefik-Konfiguration:

• Passe in docker-compose.yml die Domain morse.example.com an deine Domain an
• Die App verwendet automatisch HTTPS mit Let's Encrypt (via Traefik)
• Stelle sicher, dass ein externes Traefik-Netzwerk existiert: docker network create traefik
• Die App ist über Port 80 im Container erreichbar

Anpassungen:

• Domain: Ersetze morse.example.com in allen Host() Rules
• Netzwerk: Wenn dein Traefik-Netzwerk anders heißt, passe networks an
• Cert Resolver: Wenn dein Let's Encrypt Resolver anders heißt, passe tls.certresolver an

Projektstruktur

• morse-webapp/src/main.ts und morse-webapp/src/App.vue: Einstieg
• morse-webapp/src/components/*.vue: UI-Komponenten
• morse-webapp/src/composables/*.ts: wiederverwendbare Logik
• morse-webapp/src/state/progress.ts: Trainingszustand, Schema, Persistenz
• morse-webapp/src/data/morse.ts: Morsealphabet
• morse-webapp/src/i18n/strings.ts: Texte und Uebersetzungen
• morse-webapp/src/style.css: globale Styles und Tokens

Bedienung und Daten

• Der Trainingsstand wird in localStorage gespeichert.
• Export erzeugt eine JSON-Datei, Import validiert und migriert Daten.
• Bei Schemaaenderungen wird die Version in morse-webapp/src/state/progress.ts hochgezaehlt.

i18n

• Alle sichtbaren Texte kommen aus morse-webapp/src/i18n/strings.ts.
• Neue Keys muessen in DE und EN gepflegt werden.

Entwicklungskonventionen (Kurzfassung)

• Vue 3 Composition API mit <script setup lang="ts">
• TypeScript strict, keine ungenutzten Imports
• Komponente klein halten, Logik in Composables auslagern
• Props/Emits typisiert, v-model ueber update:*
• CSS Variablen und color-mix() verwenden, wo etabliert

Mitwirken

• Kleine, klare Aenderungen bevorzugen
• UI-Text in DE/EN konsistent halten
• Vor einem Release npm run build ausfuehren

Lizenz

Dieses Projekt ist unter der MIT-Lizenz lizenziert – siehe LICENSE Datei für Details.

Das Projekt steht zur freien Nutzung, Veränderung und Weitergabe zur Verfügung.