Dashboard interativo
Resumo visual do dia com taxa de conclusão, streak ativo e hábitos pendentes em destaque.
Mobile App · React Native
AppRotina
Aplicativo mobile de rastreamento de hábitos desenvolvido em React Native
Construído para ajudar pessoas a manterem consistência em seus hábitos diários através de acompanhamento visual, streaks e estatísticas. Interface minimalista, persistência local e arquitetura escalável.
React Native
Expo
AsyncStorage
Context API
React Navigation
// Visual
Telas do app
Uma navegação minimalista, com hierarquia visual clara e foco no progresso do usuário.
// O projeto
Disciplina que cabe
no bolso.
O AppRotina nasceu da necessidade de criar um aplicativo simples e eficiente para ajudar pessoas a manterem consistência em seus hábitos diários através de acompanhamento visual, streaks e estatísticas.
A proposta é remover o atrito do "tracking diário": uma interface direta, que se acessa em segundos, com feedback visual claro a cada hábito concluído — transformando rotina em hábito e hábito em identidade.
"Pequenas ações repetidas todos os dias criam grandes mudanças. O AppRotina existe para tornar isso visível."
// Funcionalidades
Tudo o que ele faz
Pequenos detalhes que fazem o usuário voltar todos os dias.
Sistema de streaks
Cálculo automático de sequências consecutivas para gamificar a constância e manter o engajamento.
Histórico semanal
Visualização em calendário dos últimos dias para identificar padrões e momentos de queda.
Estatísticas de 30 dias
Métricas de evolução com gráficos limpos: taxa média, recordes pessoais e melhor dia da semana.
Tema claro / escuro
Alternância suave entre temas, com paleta calibrada para uso confortável em qualquer hora do dia.
Persistência local
Dados armazenados via AsyncStorage — funciona 100% offline, com sincronização imediata na UI.
Busca e filtros
Localização rápida de hábitos por nome, categoria ou status — útil quando a lista cresce.
Personalização
Cada hábito recebe seu ícone e sua cor — identidade visual única para reconhecimento imediato.
// Tech Stack
Tecnologias utilizadas
Stack moderna, performática e com excelente DX.
React Native
Framework principal para construção da UI mobile.
Expo
Build e deploy rápido, OTA updates e APIs nativas integradas.
AsyncStorage
Persistência local de hábitos, configurações e histórico.
Context API
Estado global compartilhado sem dependências externas pesadas.
React Navigation
Navegação stack + bottom tabs com animações nativas suaves.
Expo Vector Icons
Biblioteca completa de ícones para personalização dos hábitos.
// Estudo de caso
Desafios técnicos
As decisões mais relevantes durante o desenvolvimento — e como foram resolvidas.
Gerenciamento de estado global
Os hábitos precisam estar disponíveis em diversas telas (dashboard, detalhe, estatísticas). Optei pela Context API com reducers próprios — sem trazer Redux para um app deste porte. Resultou em código previsível, menos boilerplate e excelente performance.
Persistência de dados
AsyncStorage como camada de persistência, com uma service layer isolada que abstrai leitura e escrita. Toda mudança de estado dispara um side effect de salvamento, garantindo que os dados sobrevivam a fechamentos do app.
Cálculo de streaks
Determinar streaks ativos exige comparar datas considerando timezone, "dias quebrados" e registros parciais. Construí uma função pura e testável que recebe o histórico e devolve streak atual, maior streak e data da última quebra.
Sincronização das estatísticas
Toda interação no dashboard precisa refletir nas estatísticas em tempo real. Memoizei os cálculos pesados com useMemo e isolei seletores no contexto, evitando re-renders desnecessários em cards que não dependem do dado alterado.
Animações no dashboard
Microinterações ao marcar um hábito (pulse, check, fade no streak) usando a API de Animated nativa. O foco foi manter as animações em native driver sempre que possível, garantindo 60fps mesmo em aparelhos modestos.
Organização escalável de pastas
Estrutura por features (habits, stats, settings), com components, hooks, services e contexts isolados. Permite adicionar novos módulos sem tocar no que já existe — pensado para crescer.
// Evolução
O que eu aprendi
Cada projeto deixa marcas. Aqui ficam as mais importantes deste.
Arquitetura
React Native na prática
Entender quando usar componentes nativos, navegação fluida e como pensar em telas, não em rotas.
Componentização
Componentes reutilizáveis
Construir blocos pequenos, com responsabilidade única, que se compõem em telas inteiras com pouco código.
UX Mobile
Design para o polegar
Hierarquia visual, espaçamentos generosos e interações pensadas para uso com uma única mão.
Estado
Estado global limpo
Context API + reducers como alternativa elegante e leve ao Redux para projetos de pequeno e médio porte.
Persistência
Camada de dados isolada
Separar a lógica de armazenamento da UI deixou o código testável e fácil de migrar para outro storage.
Projeto
Estrutura escalável
Pensar em pastas por feature desde o dia um economiza horas de refactor lá na frente.
// Próximo passo
Gostou do projeto?
O AppRotina é parte de uma jornada construindo produtos reais. Veja o código ou conheça outros projetos do portfólio.