Kontext
Sérein ist eine Konzept-Mobile-App, entwickelt, um eine andere Kompetenz als meine Web-Projekte zu zeigen: native plattformübergreifende Entwicklung. Das Ziel — eine Wellness-App, ruhig und minimal, zu der man jeden Tag gern zurückkehrt.
Die Demo öffnet sich im Browser, dargestellt in einem Telefon-Rahmen: Es ist wirklich eine Mobile-App, keine Website.
Ziele
- Die Beherrschung von React Native / Expo, dem führenden Mobile-Stack, unter Beweis stellen.
- Eine auf jeder Plattform native Erfahrung liefern, keinen kleinsten gemeinsamen Nenner.
- Über das Mockup hinausgehen: eine wirklich nutzbare App, mit persistentem Zustand und vollständigem Ablauf.
Lösung
Vier Screens, gedacht als tägliches Ritual:
- Heute — die Gewohnheiten des Tages, ein Fortschrittsring, laufende Serien (Streaks) und ein Floating-Button zum Erstellen einer Gewohnheit.
- Gewohnheit erstellen — ein modales Sheet mit Icon-Auswahl (geordnetes Raster), Farbauswahl und Live-Vorschau: nichts Generisches.
- Atmen — eine animierte Herzkohärenz-Übung (5 s / 5 s), begleitet von einem leichten haptischen Feedback.
- Fortschritt & Profil — Raster der letzten 7 Tage, beste Serie und ein anpassbares Profil (Vorname, Avatar), das bereits beim Onboarding angelegt wird.
Eine native Erfahrung, pro Plattform
- iOS — SF Symbols-Icons, Liquid Glass-Tab-Leiste, Taptic Engine.
- Android — Material-Icons, native Vibrationen.
- Überall — sorgfältige Typografie, Mikroanimationen (Reanimated) und ein komplett offline funktionierender Betrieb: Die Daten bleiben auf dem Gerät, kein Server.
Stack
React Native + Expo (expo-router), Reanimated-Animationen, lokaler AsyncStorage-Speicher, statischer Web-Export auf Vercel deployt. Eine Codebasis, drei Ziele.