✅ Advanced To-Do Pro

Aplicação de gerenciamento de tarefas avançada com integração da Técnica Pomodoro

📋 Visão Geral

Advanced To-Do Pro é uma aplicação web profissional para gerenciamento de tarefas que combina a gestão clássica de to-dos com a poderosa Técnica Pomodoro para aumentar produtividade e foco. Ideal para profissionais, estudantes e qualquer um que deseje otimizar seu tempo.

Perfect para:

• 📝 Organizar tarefas diárias
• ⏱️ Usar Pomodoro para melhor foco
• 🎯 Rastrear produtividade
• 📊 Analisar padrões de trabalho

✨ Funcionalidades Principais

• ✅ CRUD Completo - Criar, ler, atualizar e deletar tarefas
• ✅ Técnica Pomodoro - Sessões de 25 min focus + 5 min break
• ✅ Categorização - Organize tarefas por categorias
• ✅ Prioridades - Alta, Média, Baixa
• ✅ Marcar como Favorito - Tarefas importantes em destaque
• ✅ Filtros Avançados - Por status, prioridade, categoria
• ✅ Histórico de Buscas - Revise pesquisas anteriores
• ✅ Persistência de Dados - localStorage para dados locais
• ✅ Tema Escuro/Claro - Toggle automático
• ✅ Notificações - Alertas de sessão Pomodoro
• ✅ Responsivo - Desktop, tablet e mobile
• ✅ Estatísticas - Tarefas concluídas, tempo produtivo

🛠️ Tecnologias Utilizadas

Frontend

• React 18 - UI Library
• React Hooks - useState, useEffect, useContext, useReducer
• CSS3 - Estilização moderna com flexbox/grid
• localStorage API - Persistência de dados
• Web Audio API - Sons de notificação

Gerenciamento

• Context API - State management
• Custom Hooks - Lógica reutilizável
• Reducer Pattern - Lógica complexa de estado

📁 Estrutura do Projeto

advanced-todo-pro/
├── src/
│   ├── components/
│   │   ├── Header.jsx
│   │   ├── TaskForm.jsx
│   │   ├── TaskList.jsx
│   │   ├── TaskItem.jsx
│   │   ├── PomodoroTimer.jsx
│   │   ├── FilterBar.jsx
│   │   ├── Statistics.jsx
│   │   └── ThemeToggle.jsx
│   ├── context/
│   │   ├── TaskContext.jsx
│   │   └── ThemeContext.jsx
│   ├── hooks/
│   │   ├── useLocalStorage.js
│   │   ├── usePomodoroTimer.js
│   │   └── useTaskFilters.js
│   ├── utils/
│   │   ├── storage.js
│   │   ├── pomodoro.js
│   │   └── notifications.js
│   ├── styles/
│   │   ├── App.css
│   │   ├── components.css
│   │   ├── pomodoro.css
│   │   └── responsive.css
│   ├── App.jsx
│   └── main.jsx
├── package.json
└── README.md

🚀 Como Usar

Pré-requisitos

• Node.js v16+
• npm ou yarn

Instalação

1. Clone o repositório

git clone https://github.com/ParreirasJuniorWeb/PROJETO_DO_TO_LIST_AdvancedToDoPro.git
cd advanced-todo-pro

2. Instale dependências

npm install

3. Inicie a aplicação

npm run dev

Acesse em: http://localhost:5173

💻 Scripts

npm run dev      # Desenvolvimento com hot reload
npm run build    # Build para produção
npm run preview  # Visualiza build
npm run lint     # Verifica código

📚 Guia de Uso

Criar Tarefa

1. Digite a tarefa no campo de entrada
2. Selecione categoria e prioridade
3. Clique em "Adicionar Tarefa"

Usar Pomodoro

1. Selecione uma tarefa
2. Clique em "Iniciar Pomodoro"
3. Trabalhe focado por 25 minutos
4. Tire 5 minutos de descanso
5. Repita até 4 ciclos (então 15 min de break)

Filtrar Tarefas

• 📌 Favoritos - Veja apenas favoritadas
• ✅ Concluídas - Mostre/esconda tarefas feitas
• ⚡ Por Prioridade - Alta, Média, Baixa
• 📂 Por Categoria - Trabalho, Pessoal, Estudos, etc
• 🔍 Buscar - Encontre tarefas rapidamente

Gerenciar Tarefas

• ✔️ Marque como concluída
• ⭐ Favoritize importantes
• ✏️ Edite descrição
• 🗑️ Delete permanentemente

🍅 Sobre a Técnica Pomodoro

A Técnica Pomodoro é um método de gerenciamento de tempo que:

1. Foco Intenso - 25 minutos de trabalho ininterrupto
2. Descanso Breve - 5 minutos para descansar
3. Repetição - Repita o ciclo 4 vezes
4. Descanso Longo - 15-30 minutos após 4 ciclos

Benefícios

• 🎯 Melhora foco e concentração
• ⏰ Melhor gerenciamento de tempo
• 😴 Reduz fadiga mental
• 📈 Aumenta produtividade
• 🏃 Evita procrastinação

🎓 Conceitos Aprendidos

• ✅ State Management - Context API + useReducer
• ✅ Hooks Customizados - Criação de hooks reutilizáveis
• ✅ localStorage - Persistência de dados no navegador
• ✅ Web Audio API - Sons de notificação
• ✅ Timer - setInterval e Cleanup
• ✅ Filtros e Buscas - Lógica de filtragem complexa
• ✅ Responsividade - Mobile-first design
• ✅ Acessibilidade - ARIA labels e keyboard navigation

📊 Estrutura de Dados

Tarefa

{
  id: "unique-id",
  title: "Estudar React",
  description: "Aprender Context API",
  category: "Estudos",
  priority: "high",  // high, medium, low
  completed: false,
  favorite: true,
  createdAt: "2024-01-15T10:30:00Z",
  dueDate: "2024-01-20",
  pomodoroCount: 3
}

Sessão Pomodoro

{
  taskId: "unique-id",
  duration: 25,        // minutos
  breakDuration: 5,
  sessionsCompleted: 2,
  totalFocusTime: 50   // minutos
}

🎨 Temas

Modo Claro

• Fundo branco
• Texto escuro
• Destaque em azul

Modo Escuro

• Fundo escuro
• Texto claro
• Destaque em ciano

Alterna automaticamente conforme preferência do sistema

📈 Estatísticas

Visualizar seus padrões de produtividade:

• 📊 Total de tarefas criadas
• ✅ Tarefas concluídas
• ⏱️ Tempo total de Pomodoro
• 🔥 Dias consecutivos ativos
• 📅 Taxa de conclusão
• ⭐ Tarefas favoritas

🔧 Troubleshooting

Problema: "Dados não persistem"

Solução: Limpe o localStorage:

localStorage.clear();

Problema: "Som de notificação não funciona"

Solução: Verifique volume do navegador e permissões de áudio

Problema: "Timer para na aba inativa"

Solução: Use o modo 'Notificação' para alertas quando troca de abas

🤝 Contribuições

Sugestões e contribuições são bem-vindas!

1. Faça fork
2. Crie uma branch (git checkout -b feature/melhoria)
3. Commit (git commit -m 'Adicionar melhoria')
4. Push (git push origin feature/melhoria)
5. Abra um Pull Request

🚀 Deploy

Vercel

npm install -g vercel
vercel

Netlify

npm run build
# Arraste pasta 'dist' no Netlify

📝 Licença

MIT License - veja LICENSE

👨‍💻 Autor

João Victor (Parreira Junior)

• GitHub: @ParreirasJuniorWeb

🎯 Roadmap

• Sincronização com Firebase
• Aplicativo mobile (React Native)
• Integração com Google Calendar
• Análises avançadas com gráficos
• Compartilhamento de tarefas
• Colaboração em tempo real
• Importar/Exportar em CSV/JSON

💡 Dicas de Uso

1. Comece simples - Adicione poucas tarefas primeiro
2. Use categorias - Organize sua vida profissional e pessoal
3. Priorize - Foque nas tarefas mais importantes
4. Sessões Pomodoro - Use para tarefas que exigem foco
5. Revise estatísticas - Acompanhe seu progresso
6. Pause, não delete - Mantenha histórico de tarefas concluídas

---

⭐ Aumente sua produtividade com Advanced To-Do Pro! ⭐