Todo List - Projeto 07 do Curso da Boticário + Koru

Observações importantes

Este projeto segue um padrão de branches e commits para manter a organização e facilitar o trabalho em equipe.
Antes de contribuir, leia atentamente as instruções abaixo.

Sempre crie uma branch nova a partir da main.
O formato deve ser:

• Nova funcionalidade → feat/nome-da-funcionalidade
  Exemplo: feat/adicionar-tarefas

• Correção de bug → fix/nome-do-bug
  Exemplo: fix/contador-incorreto

• Refatoração (melhoria sem mudar regra de negócio) → refactor/nome-da-refatoracao
  Exemplo: refactor/estrutura-componentes

• Estilo/ajuste visual (CSS, Tailwind, layout) → style/nome-do-ajuste
  Exemplo: style/responsividade-lista

• Configuração (dependências, vite, eslint, etc.) → chore/nome-da-config
  Exemplo: chore/configurar-tailwind

• Documentação → docs/nome-do-doc
  Exemplo: docs/atualizar-readme

Os commits devem seguir o padrão:

• feat: → nova funcionalidade
  Ex: feat: adicionar input de nova tarefa

• fix: → correção de bug
  Ex: fix: corrigir erro ao remover tarefa

• refactor: → refatoração de código (sem mudar regra de negócio)
  Ex: refactor: melhorar performance da lista

• style: → mudanças visuais/estilo (não altera lógica)
  Ex: style: ajustar espaçamento no header

• chore: → alterações de configuração, build, dependências
  Ex: chore: instalar react-icons

• docs: → alterações na documentação
  Ex: docs: adicionar instruções de instalação no readme

• Nunca commitar diretamente na main.
• Use nomes de branch curtos, descritivos e em inglês.
• Faça commits pequenos e frequentes (não deixe tudo em um único commit).
• Ao abrir um Pull Request, escreva um título claro e uma descrição objetiva.

• Configuração do projeto com Vite

• Estruturação das pastas

• Instalação de dependências (React, TailwindCSS, etc.)

• Design no Figma

• Criar protótipo do layout (versão desktop e mobile)

• Definir cores, tipografia e espaçamentos seguindo boas práticas de UI/UX

• Design mobile-first

• Layout adaptativo

• Experiência consistente em todos dispositivos

• Input controlado para nova tarefa

• Botão ou Enter para submeter

• Validação: não permitir tarefas vazias

• Limpar input após adicionar

• Renderizar array de tarefas

• Indicar status (pendente/concluída)

• Lista vazia: mensagem amigável

• Implementar toggle (checkbox ou botão)

• Atualizar estado da tarefa

• Estilizar visualmente tarefa concluída

• Botão de delete para cada tarefa

• Confirmação antes de remover (opcional)

• Remover do estado/lista

🔧 Extra (pode ser colaborativo)

• Mostrar total de tarefas
• Mostrar quantas estão pendentes
• Mostrar quantas estão concluídas

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config([
 globalIgnores(['dist']),
 {
 files: ['**/*.{ts,tsx}'],
 extends: [
 // Other configs...
 // Remove tseslint.configs.recommended and replace with this
 ...tseslint.configs.recommendedTypeChecked,
 // Alternatively, use this for stricter rules
 ...tseslint.configs.strictTypeChecked,
 // Optionally, add this for stylistic rules
 ...tseslint.configs.stylisticTypeChecked,
 // Other configs...
 ],
 languageOptions: {
 parserOptions: {
 project: ['./tsconfig.node.json', './tsconfig.app.json'],
 tsconfigRootDir: import.meta.dirname,
 },
 // other options...
 },
 },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default tseslint.config([
 globalIgnores(['dist']),
 {
 files: ['**/*.{ts,tsx}'],
 extends: [
 // Other configs...
 // Enable lint rules for React
 reactX.configs['recommended-typescript'],
 // Enable lint rules for React DOM
 reactDom.configs.recommended,
 ],
 languageOptions: {
 parserOptions: {
 project: ['./tsconfig.node.json', './tsconfig.app.json'],
 tsconfigRootDir: import.meta.dirname,
 },
 // other options...
 },
 },
])