Skip to content
All projects
Education & apps · 2024

International learning app with dark mode and multiple languages

A progressive web app for an international audience, with dark mode, multilingual content, offline access and smartphone installation — no app store needed.

quranlearn.app
Screenshot of quranlearn.app
Project type
Progressive web app
Year
2024
Industry
Education & apps
Role
Frontend · PWA setup · i18n strategy · UX
Challenge

The challenge.

The challenge was to build a learning app for an international audience without the app store approval process, fees and weeks of delay for each update.

Solution

What we built.

A progressive web app that loads quickly, works offline after the first visit and can be installed on any smartphone. Multiple languages, dark mode for evening use and a fully responsive layout are built in.

Project mockup

See the system in action.

A visual excerpt from the project, not just a description. See the interface, structure and impact behind the case study.

PWA Dark mode i18n Offline-first
quranlearn.app
Mockup screenshot of quranlearn.app
Results

What changed in measurable terms.

Multiple

Multiple languages from one codebase, enabling international launches without rebuilding the app.

Offline

After the first load, the app can work without an internet connection.

0 €

No app store fees, and updates can ship in minutes rather than weeks.

Platform overview

More than a website: the platform behind it.

README.md quranlearn.app
Progressive web app

## Overview

An international learning platform built as a progressive web app: mobile-friendly, installable, available offline and multilingual. The web app approach makes it possible to publish content and updates quickly.

## Core modules

  • Learning interface with responsive navigation and a clear content structure.
  • Installable PWA for smartphones and desktop devices.
  • Dark mode for comfortable use in the evening and during focused study.
  • Multilingual support for international audiences and future expansion.

## Architecture

  • React/Vite frontend with a service worker and Workbox strategy.
  • IndexedDB and browser storage enable offline use after the first load.
  • i18next and CSS variables keep language, theme and interface layers separately maintainable.

## Tech stack

React + Vite PWA service worker IndexedDB i18next Dark mode (CSS variables) Workbox

## Operations & extensibility

  • Updates can be deployed like a website, without app store approval.
  • An offline-first structure reduces reliance on a stable internet connection.
  • A single codebase for multiple languages and devices keeps maintenance and development efficient.

Facing a similar challenge? Let’s talk.

Start a conversation
← Previous project
yutustaff.at
Staffing
Next project
seras.at
Electrical engineering