🧭 Hábitos Diários

Um app Angular para cadastrar, acompanhar e visualizar hábitos diários com uma experiência limpa, leve e visualmente agradável.

---

✨ Sobre o projeto

O Hábitos Diários é uma aplicação Angular 21 focada em rotina e consistência.
Ela permite criar hábitos, marcar o que foi feito no dia, editar informações e acompanhar um resumo visual do progresso.

O projeto usa uma arquitetura simples e direta, com:

• 📦 signals para estado reativo
• 🧩 componentes standalone
• 📝 formulários reativos
• 💾 persistência local no navegador
• 🎨 interface construída com Tailwind CSS

---

🚀 Funcionalidades

• 📝 Criar novos hábitos com nome e descrição opcional
• ✏️ Editar hábitos existentes
• 🗑️ Excluir hábitos com confirmação
• ✅ Marcar hábitos como concluídos no dia
• 📊 Visualizar um gráfico/resumo da rotina
• 🧭 Passar por um onboarding inicial antes de entrar no app
• 💾 Salvar os dados no navegador com localStorage

---

🖼️ Rotas principais

• "/onboarding" - tela de introdução da aplicação
• "/habitos" - lista principal de hábitos
• "/habitos/novo" - formulário de criação
• "/habitos/grafico" - resumo visual e estatísticas
• "/habitos/:id/editar" - edição de um hábito existente

---

🧱 Stack

• ⚡ Angular 21
• 🎯 TypeScript
• 🎨 Tailwind CSS 4
• 🧠 Angular Signals
• 🧾 Reactive Forms
• 🧪 testes unitários com Vitest

---

📁 Estrutura do projeto

.
├── public/                    # Arquivos estáticos copiados para o build
└── src/
    ├── app/
    │   ├── core/              # Infraestrutura compartilhada
    │   ├── layout/            # Shell e navegação principal
    │   └── features/habits/   # Domínio de hábitos
    │       ├── data/          # Repositório de persistência
    │       ├── models/        # Modelos de dados
    │       ├── pages/         # Telas da funcionalidade
    │       ├── services/      # Regras de negócio
    │       └── habits.routes.ts
    ├── index.html
    └── main.ts                # Bootstrap da aplicação

---

▶️ Como executar

1. Instalar as dependências

npm install

2. Iniciar o servidor de desenvolvimento

npm start

Depois disso, abra:

http://localhost:4200/

---

🛠️ Scripts disponíveis

Comando	Descrição
npm start	Inicia a aplicação em modo desenvolvimento
npm run build	Gera a versão de produção em dist/
npm run watch	Recompila automaticamente durante mudanças
npm test	Executa os testes unitários
npx tsc -p tsconfig.app.json --noEmit	Valida a árvore TypeScript da aplicação

---

💾 Persistência dos dados

• Os hábitos são armazenados no navegador via localStorage
• A chave usada é habitos_diarios_v1
• O carregamento é defensivo para evitar quebra com dados inválidos
• A lógica de persistência fica centralizada no serviço/repositório da feature

---

🎯 Fluxo da aplicação

• Você entra pelo onboarding na primeira execução
• Depois segue para a lista de hábitos
• Cria hábitos novos quando quiser começar uma rotina
• Marca a execução diária com um toque
• Abre o gráfico para ver o panorama do dia

---

🎨 Direção visual

• Layout claro, com cartões e cantos arredondados
• Navegação simples e objetiva
• Componentes com destaque visual para ações principais
• Textos e rotas em português
• Visual pensado para ficar bem apresentado no GitHub e dentro do app

---

📌 Observações

• O projeto mantém a estrutura de feature-first já existente
• A navegação principal segue os segmentos de rota em português
• A persistência fica isolada da interface
• O app foi pensado para ser fácil de evoluir sem complicar a base

---

🤝 Contribuição

Se você for continuar este projeto, siga estes cuidados:

• mantenha as mudanças pequenas e focadas
• preserve a estrutura de src/app/features/habits/
• evite acoplar componentes diretamente ao localStorage
• prefira state derivado com computed quando fizer sentido

---

📄 Licença

Projeto pessoal/estudo. Ajuste esta seção conforme a licença que você quiser publicar no repositório.