DevQuestPROEstudos de Código
Voltar para o Catálogo de Projetos
IniciantefrontendEstimativa: ~6 horas de dedicação

Habit Tracker (Controle de Hábitos)

Aplicativo de acompanhamento de hábitos diários com streaks de consistência, progresso semanal e métricas visuais.

Stack:ReactTypeScriptTailwind CSSLocalStorage
Funcionalidades Requeridas

O que o seu projeto final precisa conter para ser considerado concluído:

  • Criação, edição e exclusão de hábitos
  • Marcação de dias concluídos na semana
  • Cálculo de streak contínua (dias seguidos)
  • Filtros por categoria (Saúde, Estudos, Trabalho)
Conhecimentos Pré-requisitos

Recomendamos dominar os seguintes tópicos antes de iniciar a codificação:

  • Componentes React
  • useState e useEffect
  • Renderização de listas
Documentação & Links de Apoio

Consulte materiais oficiais e tutoriais relacionados para acelerar o desenvolvimento do projeto:

Docs / MDN
React Docs: useState Reference

Documentação oficial de atualização de estados e listas no React 19.

Docs / MDN
MDN: Array.prototype.filter() & map()

Como filtrar e renderizar listas imutáveis em JavaScript.

DevQuest Labs
DevQuest Snippets: useLocalStorage Hook

Hook customizado pronto com sincronização automática entre abas.

W3Schools
W3Schools: React Forms & Input Handling

Como manipular formulários controlados de tarefas e hábitos.

Submeta o seu Repositório

Concluiu o projeto Habit Tracker (Controle de Hábitos)? Envie o link do GitHub para registrar no seu portfólio.

Roteiro de Implementação Passo a Passo

Siga as etapas recomendadas, abra as dicas práticas e marque conforme for progredindo.

Progresso do Projeto(0/3 etapas concluídas)
0%
Etapa 1

Modelagem do Hábito & Tipagem

Defina os types em TypeScript com ID, título, frequência, categoria e histórico de datas completadas.

Etapa 2

Matriz Semanal de Progresso

Construa o componente visual dos últimos 7 dias com check circular interativo para cada dia.

Etapa 3

Lógica de Sequência (Streak Counter)

Implemente a função pura que calcula dias seguidos ininterruptos de execução do hábito.

Estrutura de Pastas Recomendada

Uma organização limpa para o seu repositório de projeto:

src/
├── components/
│   ├── HabitCard.tsx         # Card individual com matriz de 7 dias
│   ├── HabitFormModal.tsx    # Modal de criação e edição com seletor de cores
│   ├── WeekCalendar.tsx      # Barra com os dias da semana atual
│   └── StreakBadge.tsx       # Badge animada de chamas (fogo) com a contagem
├── hooks/
│   └── useHabits.ts          # CRUD completo com sincronização em LocalStorage
└── types/
    └── habit.ts              # Definições estritas de TypeScript
Dicas de Ouro para o seu Portfólio

Como valorizar este projeto no seu GitHub e entrevistas técnicas:

  • •Explique na documentação do projeto o algoritmo de cálculo de streaks; é uma pergunta muito comum em entrevistas técnicas para juniors e plenos.
  • •Mostre persistência resiliente: crie um fallback para que o app nunca quebre mesmo se o LocalStorage estiver desabilitado no navegador.
  • •Adicione micro-interações táteis: use pequenos confetes ou animações GSAP quando o usuário atingir uma streak de 7 dias.