Vai al contenuto principale

Sérein — App mobile per il benessere

App mobile per il benessere

Un'app mobile per il monitoraggio delle abitudini e la respirazione guidata. Un'unica base di codice React Native per iOS, Android e web — con un'esperienza curata, nativa su ogni piattaforma.

2026-07
  • Sviluppo mobile
  • Design dell'app
  • Direzione artistica
React NativeExpoTypeScriptReanimated
Anteprima di Sérein — App mobile per il benessere
  1. 01

    Un'unica base di codice → iOS, Android e web (demo)

  2. 02

    Onboarding, profilo locale e creazione di abitudini personalizzate (icona + colore)

  3. 03

    UI nativa per piattaforma: SF Symbols su iOS, feedback aptico, offline

Contesto

Sérein è un'app mobile concept, realizzata per dimostrare una competenza diversa dai miei progetti web: lo sviluppo cross-platform nativo. L'obiettivo — un'app per il benessere, calma e minimale, che invogli a tornare ogni giorno.

La demo si apre in un browser, presentata all'interno della cornice di un telefono: è davvero un'app mobile, non un sito.

Obiettivi

  • Dimostrare la padronanza di React Native / Expo, lo stack mobile di riferimento.
  • Offrire un'esperienza nativa su ogni piattaforma, non un minimo comun denominatore.
  • Andare oltre il mockup: un'app realmente utilizzabile, con stato persistente e percorso completo.

Soluzione

Quattro schermate pensate come un rituale quotidiano:

  • Oggi — le abitudini del giorno, un anello di progresso, le serie in corso (streak) e un pulsante flottante per creare un'abitudine.
  • Crea un'abitudine — un foglio modale con scelta dell'icona (griglia organizzata), scelta del colore e anteprima in tempo reale: niente di generico.
  • Respira — un esercizio di coerenza cardiaca animato (5 s / 5 s), scandito da un leggero feedback aptico.
  • Progressi e Profilo — griglia degli ultimi 7 giorni, serie migliore e un profilo personalizzabile (nome, avatar) creato fin dall'onboarding.

Un'esperienza nativa, per piattaforma

  • iOS — icone SF Symbols, barra a schede Liquid Glass, Taptic Engine.
  • Android — icone Material, vibrazioni native.
  • Ovunque — tipografia curata, micro-animazioni (Reanimated) e un funzionamento 100% offline: i dati restano sul dispositivo, nessun server.

Stack

React Native + Expo (expo-router), animazioni Reanimated, archiviazione locale AsyncStorage, export web statico distribuito su Vercel. Un'unica base di codice, tre destinazioni.

TalkDoc