Aller au contenu principal

Sérein — App mobile de bien-être

App mobile de bien-être

Une application mobile de suivi d'habitudes et de respiration guidée. Une seule base de code React Native pour iOS, Android et le web — avec une expérience soignée, native sur chaque plateforme.

2026-07
  • Développement mobile
  • Design d'application
  • Direction artistique
React NativeExpoTypeScriptReanimated
Aperçu de Sérein — App mobile de bien-être
  1. 01

    Une base de code unique → iOS, Android et web (démo)

  2. 02

    Onboarding, profil local et création d'habitude personnalisée (icône + couleur)

  3. 03

    UI native par plateforme : SF Symbols sur iOS, retour haptique, hors-ligne

Contexte

Sérein est une application mobile de concept, construite pour démontrer une compétence différente de mes projets web : le développement cross-platform natif. L'objectif — une app de bien-être, calme et minimale, qui donne envie de revenir chaque jour.

La démo s'ouvre dans un navigateur, présentée dans un cadre de téléphone : c'est bien une app mobile, pas un site.

Objectifs

  • Prouver la maîtrise de React Native / Expo, la stack mobile de référence.
  • Livrer une expérience native sur chaque plateforme, pas un plus petit dénominateur commun.
  • Aller au-delà de la maquette : une app réellement utilisable, avec état persistant et parcours complet.

Solution

Quatre écrans pensés comme un rituel quotidien :

  • Aujourd'hui — les habitudes du jour, un anneau de progression, les séries en cours (streaks), et un bouton flottant pour créer une habitude.
  • Créer une habitude — une feuille modale avec choix d'icône (grille organisée), choix de couleur et aperçu en direct : rien de générique.
  • Respirer — un exercice de cohérence cardiaque animé (5 s / 5 s), rythmé par un léger retour haptique.
  • Progrès & Profil — grille des 7 derniers jours, meilleure série, et un profil personnalisable (prénom, avatar) créé dès l'onboarding.

Une expérience native, par plateforme

  • iOS — icônes SF Symbols, barre d'onglets Liquid Glass, Taptic Engine.
  • Android — icônes Material, vibrations natives.
  • Partout — typographie soignée, micro-animations (Reanimated), et un fonctionnement 100 % hors-ligne : les données restent sur l'appareil, aucun serveur.

Stack

React Native + Expo (expo-router), animations Reanimated, stockage local AsyncStorage, export web statique déployé sur Vercel. Une seule base de code, trois cibles.

TalkDoc