Ir para o conteúdo principal

Sérein — App móvel de bem-estar

App móvel de bem-estar

Um aplicativo móvel de acompanhamento de hábitos e respiração guiada. Uma única base de código React Native para iOS, Android e web — com uma experiência caprichada, nativa em cada plataforma.

2026-07
  • Desenvolvimento móvel
  • Design de aplicativo
  • Direção de arte
React NativeExpoTypeScriptReanimated
Prévia de Sérein — App móvel de bem-estar
  1. 01

    Uma única base de código → iOS, Android e web (demo)

  2. 02

    Onboarding, perfil local e criação de hábito personalizado (ícone + cor)

  3. 03

    UI nativa por plataforma: SF Symbols no iOS, retorno háptico, offline

Contexto

Sérein é um aplicativo móvel conceito, construído para demonstrar uma competência diferente dos meus projetos web: o desenvolvimento multiplataforma nativo. O objetivo — um app de bem-estar, calmo e minimalista, que dá vontade de voltar todos os dias.

A demo abre em um navegador, apresentada dentro da moldura de um telefone: é realmente um app móvel, não um site.

Objetivos

  • Provar o domínio de React Native / Expo, a stack móvel de referência.
  • Entregar uma experiência nativa em cada plataforma, não um menor denominador comum.
  • Ir além do mockup: um app realmente utilizável, com estado persistente e percurso completo.

Solução

Quatro telas pensadas como um ritual diário:

  • Hoje — os hábitos do dia, um anel de progresso, as sequências em curso (streaks) e um botão flutuante para criar um hábito.
  • Criar um hábito — uma folha modal com escolha de ícone (grade organizada), escolha de cor e pré-visualização ao vivo: nada genérico.
  • Respirar — um exercício de coerência cardíaca animado (5 s / 5 s), ritmado por um leve retorno háptico.
  • Progresso e Perfil — grade dos últimos 7 dias, melhor sequência e um perfil personalizável (nome, avatar) criado logo no onboarding.

Uma experiência nativa, por plataforma

  • iOS — ícones SF Symbols, barra de abas Liquid Glass, Taptic Engine.
  • Android — ícones Material, vibrações nativas.
  • Em todo lugar — tipografia caprichada, micro-animações (Reanimated) e um funcionamento 100% offline: os dados permanecem no aparelho, sem servidor.

Stack

React Native + Expo (expo-router), animações Reanimated, armazenamento local AsyncStorage, exportação web estática publicada na Vercel. Uma única base de código, três destinos.

TalkDoc