Alle Projekte
Bildung & Apps · 2024

Internationale Lern-App mit Dark Mode & Multi-Language

Progressive Web App für ein internationales Publikum: Dark Mode, mehrsprachiger Inhalt, Offline-fähig und auf Smartphones installierbar – ohne App Store.

https://quranlearn.app
Screenshot von quranlearn.app
Projekt-Typ
Progressive Web App
Jahr
2024
Branche
Bildung & Apps
Rolle
Frontend · PWA-Setup · i18n-Strategie · UX
Challenge

Die Ausgangslage.

Eine Lern-App für ein internationales Publikum – ohne den Umweg über App Store / Play Store, der Reviews, Gebühren und mehrere Wochen Wartezeit pro Update bedeutet hätte.

Solution

Was wir gebaut haben.

Progressive Web App: lädt blitzschnell, funktioniert offline nach erstem Besuch, lässt sich auf jedem Smartphone als „echte App" installieren. Multi-Language von Anfang an, Dark Mode für Nachtnutzung, vollständig responsiv.

Projekt-Mockup

So sieht das System in der Praxis aus.

Ein konkreter visueller Ausschnitt aus dem Projekt — nicht nur Beschreibung. Dadurch sieht man sofort, welches Interface, welche Struktur und welche Wirkung hinter der Case Study steckt.

PWA Dark Mode i18n Offline-First
https://quranlearn.app
Mockup/Screenshot von quranlearn.app
Results

Was sich messbar verändert hat.

Multi

Sprachen aus einer Codebase – internationaler Roll-out ohne Re-Build.

Offline

App funktioniert nach erstem Laden ohne Internet-Verbindung.

0 €

App-Store-Gebühren – Update-Zyklus von Wochen auf Minuten reduziert.

Platform README

Mehr als eine Website: die Plattform dahinter.

README.md quranlearn.app
Progressive Web App

## Übersicht

Eine internationale Lernplattform als Progressive Web App: mobil nutzbar, installierbar, offline-fähig und mehrsprachig. Die Plattform wurde bewusst als Web-App gebaut, damit Inhalte und Updates schnell veröffentlicht werden können.

## Kernmodule

  • Lernoberfläche mit responsiver Navigation und klarer Content-Struktur.
  • PWA-Installation auf Smartphones und Desktop-Geräten.
  • Dark Mode für komfortable Nutzung am Abend oder in ruhigen Lernsituationen.
  • Mehrsprachigkeit als Grundlage für internationale Zielgruppen und spätere Erweiterungen.

## Architektur

  • React/Vite-Frontend mit Service Worker und Workbox-Strategie.
  • IndexedDB/Browser-Storage für Offline-Nutzung nach dem ersten Laden.
  • i18next und CSS-Variablen halten Sprache, Theme und UI-Schichten getrennt wartbar.

## Tech Stack

React + Vite PWA Service Worker IndexedDB i18next Dark Mode (CSS Vars) Workbox

## Betrieb & Erweiterbarkeit

  • Updates können wie Website-Deployments ausgeliefert werden – ohne App-Store-Freigabe.
  • Offline-first Struktur reduziert Abhängigkeit von stabiler Verbindung.
  • Eine Codebase für mehrere Sprachen und Geräte hält Betrieb und Weiterentwicklung schlank.

Ähnliche Herausforderung? Lass uns reden.

Erstgespräch starten
← Vorheriges Projekt
yutustaff.at
Personaldienstleistung
Nächstes Projekt →
seras.at
Elektrotechnik