FastRead - Speed Reading Anwendung

Übersicht

FastRead ist eine moderne Web-Anwendung, die entwickelt wurde, um Benutzern beim Verbessern ihrer Lesegeschwindigkeit zu helfen. Die App zeigt Text Wort für Wort in einem benutzerdefinierten Tempo an und ermöglicht so ein effizienteres Lesen ohne Ablenkungen.

Inhaltsverzeichnis

• Funktionen
• Projektstruktur
• Installation
• Verwendung
• Komponenten-Dokumentation
• Barrierefreiheit
• Docker-Deployment
• Entwicklung

Funktionen

• Speed Reading: Anzeige von Text Wort für Wort in anpassbarer Geschwindigkeit
• Text-Import: Unterstützung für Texteingabe, TXT- und PDF-Dateien
• Anpassbare Einstellungen: Steuerung von Lesegeschwindigkeit, Schriftgröße und Position
• Responsive Design: Optimiert für Desktop und mobile Geräte
• Barrierefreiheit: WCAG 2.1 AA konforme Implementierung mit ARIA-Attributen

Projektstruktur

fastRead/
│
├── public/               # Statische Dateien
│   └── favicon_io/       # Favicon und Icons
│
├── src/                  # Quellcode
│   ├── components/       # Vue-Komponenten
│   ├── plugins/          # Plugin-Konfigurationen
│   ├── router/           # Vue Router Konfiguration
│   ├── utils/            # Hilfsfunktionen
│   ├── views/            # Seiten-Komponenten
│   ├── App.vue           # Hauptkomponente
│   ├── main.ts           # Einstiegspunkt
│   └── style.css         # Globale Styles
│
├── index.html            # HTML-Einstiegspunkt
├── package.json          # Projekt-Abhängigkeiten
├── tailwind.config.js    # Tailwind CSS Konfiguration
├── tsconfig.json         # TypeScript Konfiguration
├── vite.config.ts        # Vite Bundler Konfiguration
├── Dockerfile            # Docker-Build-Konfiguration
├── docker-compose.yml    # Docker-Compose-Setup
└── nginx.conf            # Nginx-Konfiguration für Docker

Installation

1. Repository klonen:

   git clone [repository-url]
   cd fastRead
   

2. Abhängigkeiten installieren:

   npm install
   

3. Entwicklungsserver starten:

   npm run dev
   

4. Im Browser öffnen:

   http://localhost:5173
   

Verwendung

Text eingeben oder importieren

1. Texteingabe: Klicke auf das Stift-Symbol und gib Text direkt in das Textfeld ein.
2. Datei hochladen: Klicke auf das Upload-Symbol und wähle eine TXT- oder PDF-Datei aus.

Leseeinstellungen anpassen

1. Geschwindigkeit: Verwende den Geschwindigkeits-Slider, um die Wörter pro Minute (WPM) einzustellen.
2. Schriftgröße: Passe die Größe des angezeigten Textes für bessere Lesbarkeit an.
3. Position: Springe zu einer bestimmten Position im Text.

Lesesteuerung

• Start/Pause: Starte oder pausiere das Speed Reading.
• Stop: Beende das Lesen und kehre zum Anfang zurück.
• Zurückspringen: Gehe 20 Wörter zurück im Text.

Komponenten-Dokumentation

Kern-Komponenten

HomeView.vue

Die Hauptansicht der Anwendung, die alle anderen Komponenten zusammenführt. Enthält die Logik für das Speed Reading.

TextOutput.vue

Zeigt das aktuell gelesene Wort an. Diese Komponente aktualisiert sich dynamisch während des Lesens.

// Verwendung:
<TextOutput :text="textOutput" :fontSize="fontSize" />

Controls.vue

Bietet Steuerelemente für das Speed Reading, einschließlich Start/Pause, Text-Eingabe und Einstellungsbereich.

// Verwendung:
<Controls 
  :speed="speed" 
  :fontSize="fontSize" 
  :position="position" 
  :isPaused="isPaused" 
  :text="textInput"
  @update:speed="updateSpeed" 
  @update:fontSize="updateFontSize" 
  @toggle-pause="togglePause" 
/>

FileUpload.vue

Ermöglicht das Hochladen von Text- und PDF-Dateien mit Drag-and-Drop-Unterstützung und Fortschrittsanzeige.

// Verwendung:
<FileUpload @file-loaded="handleFileLoaded" />

Hilfsfunktionen

pdfUtils.ts

Bietet Funktionen zum Extrahieren von Text aus PDF-Dateien mit Fortschrittsrückmeldung.

// Verwendung:
import { extractTextFromPDF } from '@/utils/pdfUtils';
const text = await extractTextFromPDF(file, progressCallback);

Barrierefreiheit

FastRead wurde mit einem starken Fokus auf Barrierefreiheit entwickelt und folgt den WCAG 2.1 AA-Richtlinien:

• Tastaturnavigation: Vollständig navigierbar ohne Maus
• Screenreader-Unterstützung: ARIA-Attribute für Komponenten und Live-Regionen
• Farbkontrast: Ausreichender Kontrast für Text und Bedienelemente
• Responsive Design: Zugänglich auf verschiedenen Geräten und Bildschirmgrößen

Die Anwendung verfügt über ein umfassendes Barrierefreiheits-Overlay, das über das Universalzugangs-Symbol in der Steuerleiste erreichbar ist. Dieses Overlay bietet detaillierte Informationen zur Barrierefreiheit und Hilfestellung zur Nutzung der Anwendung mit assistiven Technologien.

Docker-Deployment

FastRead kann einfach mit Docker bereitgestellt werden. Das Projekt enthält bereits alle notwendigen Konfigurationsdateien.

Voraussetzungen

• Docker und Docker Compose installiert
• Git (für das Klonen des Repositories)

Deployment-Schritte

1. Repository klonen:

   git clone [repository-url]
   cd fastRead
   

2. Docker-Container bauen und starten:

   docker-compose up -d
   

3. Die Anwendung ist nun unter folgender Adresse verfügbar:

   http://localhost:9090
   

Docker-Konfiguration

• Die Anwendung wird im fastread-app Container bereitgestellt.
• Watchtower ist konfiguriert, um automatische Updates zu ermöglichen.
• Der Container wird auf Port 9090 bereitgestellt.
• Die Nginx-Konfiguration sorgt für korrekte SPA-Routing-Funktionalität.

Container aktualisieren

Bei Änderungen am Code:

git pull
docker-compose build --no-cache app
docker-compose up -d

Das konfigurierte Watchtower wird automatisch neue Versionen erkennen und aktualisieren.

Entwicklung

Technologie-Stack

• Vue 3: Frontend-Framework mit Composition API
• TypeScript: Typsicherheit für robusteren Code
• Tailwind CSS: Utility-first CSS-Framework
• Vite: Build-Tool und Entwicklungsserver
• FontAwesome: Icon-Bibliothek

Neue Komponenten hinzufügen

1. Erstelle eine neue Vue-Komponente in src/components/
2. Importiere sie wo nötig
3. Folge dem bestehenden Muster für Props, Emits und Typdefinitionen

Codestandards

• TypeScript: Verwende Typdefinitionen für Props, Emits und Funktionen
• Komponenten: Verwende die Composition API mit <script setup>
• Barrierefreiheit: Implementiere ARIA-Attribute und teste mit Screenreadern
• Responsive Design: Optimiere für verschiedene Bildschirmgrößen

Build für Produktion

npm run build

Die kompilierten Dateien werden im dist/-Ordner erstellt und können auf einem Webserver bereitgestellt werden.

LIZENZ

MIT

---

Entwickelt mit ❤️ und Fokus auf Benutzerfreundlichkeit und Barrierefreiheit (unter zuhilfenahme von Claude 3.7)