Saltar al contenido principal

Sérein — App móvil de bienestar

App móvil de bienestar

Una aplicación móvil de seguimiento de hábitos y respiración guiada. Una sola base de código React Native para iOS, Android y la web — con una experiencia cuidada, nativa en cada plataforma.

2026-07
  • Desarrollo móvil
  • Diseño de aplicación
  • Dirección de arte
React NativeExpoTypeScriptReanimated
Vista previa de Sérein — App móvil de bienestar
  1. 01

    Una única base de código → iOS, Android y web (demo)

  2. 02

    Onboarding, perfil local y creación de hábitos personalizados (icono + color)

  3. 03

    UI nativa por plataforma: SF Symbols en iOS, respuesta háptica, sin conexión

Contexto

Sérein es una aplicación móvil de concepto, creada para demostrar una habilidad diferente de mis proyectos web: el desarrollo multiplataforma nativo. El objetivo — una app de bienestar, tranquila y minimalista, que invite a volver cada día.

La demo se abre en un navegador, presentada dentro del marco de un teléfono: es realmente una app móvil, no un sitio web.

Objetivos

  • Demostrar el dominio de React Native / Expo, el stack móvil de referencia.
  • Ofrecer una experiencia nativa en cada plataforma, no un mínimo común denominador.
  • Ir más allá de la maqueta: una app realmente utilizable, con estado persistente y un recorrido completo.

Solución

Cuatro pantallas pensadas como un ritual diario:

  • Hoy — los hábitos del día, un anillo de progreso, las rachas en curso (streaks) y un botón flotante para crear un hábito.
  • Crear un hábito — una hoja modal con selección de icono (cuadrícula organizada), selección de color y vista previa en directo: nada genérico.
  • Respirar — un ejercicio de coherencia cardíaca animado (5 s / 5 s), acompasado por una ligera respuesta háptica.
  • Progreso y Perfil — cuadrícula de los últimos 7 días, mejor racha y un perfil personalizable (nombre, avatar) creado desde el onboarding.

Una experiencia nativa, por plataforma

  • iOS — iconos SF Symbols, barra de pestañas Liquid Glass, Taptic Engine.
  • Android — iconos Material, vibraciones nativas.
  • En todas partes — tipografía cuidada, microanimaciones (Reanimated) y un funcionamiento 100 % sin conexión: los datos permanecen en el dispositivo, sin servidor.

Stack

React Native + Expo (expo-router), animaciones Reanimated, almacenamiento local AsyncStorage, exportación web estática desplegada en Vercel. Una sola base de código, tres destinos.

TalkDoc