Plataforma completa para organização de tarefas, acompanhamento de projetos e gestão de equipes
TaskFlow é um sistema de gerenciamento de projetos estilo Kanban, desenvolvido com foco em produtividade empresarial e experiência do usuário. Oferece uma interface moderna, intuitiva e totalmente responsiva para organizar tarefas e acompanhar o progresso de projetos.
- 🎨 Design Corporativo - Interface profissional e minimalista
- 🌓 Dark Mode - Tema escuro/claro com persistência
- 🎯 Sistema de Prioridades - 4 níveis com indicadores visuais
- 📅 Datas de Vencimento - Controle de prazos com alertas
- 🔄 Drag & Drop - Reorganize tarefas facilmente
- 💾 Persistência Local - Dados salvos no navegador
- 📱 Totalmente Responsivo - Funciona em todos os dispositivos
- ⚡ Alta Performance - Otimizado com React 19
- Visão geral de todos os projetos
- Estatísticas em tempo real (quadros, tarefas, conclusões)
- Busca rápida de projetos
- Cards informativos com métricas
- Criação ilimitada de quadros
- Listas customizáveis (To Do, Doing, Done, etc)
- Arrastar e soltar tarefas entre listas
- Edição inline de títulos
- Título e descrição detalhada
- Prioridades visuais:
- 🔴 Alta (vermelho)
- 🟡 Média (amarelo)
- 🟢 Baixa (verde)
- ⚪ Nenhuma (cinza)
- Datas de vencimento com status:
- 🔴 Atrasada
- 🟡 Vence hoje/amanhã
- 🟢 No prazo
- Edição completa via modal
- Timestamps de criação/atualização
- Design corporativo e profissional
- Animações suaves com Framer Motion
- Ícones Lucide React
- Modo escuro com transições elegantes
- Feedback visual em todas as ações
- React 19 - Biblioteca UI
- TypeScript - Tipagem estática
- Vite - Build tool ultrarrápido
- Zustand - Gerenciamento de estado
- React Router DOM - Navegação SPA
- Tailwind CSS v4 - Framework CSS utility-first
- Framer Motion - Animações
- @dnd-kit - Sistema moderno de drag and drop
- Lucide React - Ícones modernos
- Node.js 18+
- npm ou yarn
- Clone o repositório
git clone https://github.com/JezzXL/taskflow.git
cd taskflow- Instale as dependências
npm install- Inicie o servidor de desenvolvimento
npm run dev- Acesse no navegador
http://localhost:5173
npm run dev # Inicia servidor de desenvolvimento
npm run build # Build para produção
npm run preview # Preview da build de produção
npm run lint # Executa lintertaskflow/
├── src/
│ ├── assets/ # Imagens e recursos estáticos
│ ├── components/ # Componentes reutilizáveis
│ │ ├── Button.tsx
│ │ ├── Card.tsx
│ │ ├── Modal.tsx
│ │ └── ThemeProvider.tsx
│ ├── features/ # Features por domínio
│ │ ├── boards/
│ │ │ └── BoardList.tsx
│ │ └── tasks/
│ │ └── TaskCard.tsx
│ ├── pages/ # Páginas da aplicação
│ │ ├── Login.tsx
│ │ ├── Dashboard.tsx
│ │ └── Board.tsx
│ ├── store/ # Zustand store
│ │ └── useStore.ts
│ ├── types/ # TypeScript types
│ │ └── index.ts
│ ├── utils/ # Funções auxiliares
│ │ ├── helpers.ts
│ │ └── dateHelpers.ts
│ ├── App.tsx
│ ├── main.tsx
│ └── index.css
├── public/
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md
/* Light Mode */
Background: #F8FAFC
Cards: #FFFFFF
Text: #1F2937
Accent: #334155
/* Dark Mode */
Background: #0F172A
Cards: #1E293B
Text: #F8FAFC
Accent: #64748B
/* Prioridades */
Alta: #DC2626 (Red)
Média: #EAB308 (Yellow)
Baixa: #16A34A (Green)- Font Family: Inter
- Weights: 300, 400, 500, 600, 700, 800, 900
Os dados são salvos automaticamente no localStorage do navegador:
// Chaves utilizadas
'taskflow-data' // Boards, listas e tarefas
'taskflow-user' // Dados do usuário
'taskflow-theme' // Preferência de temaO sistema possui migração automática que:
- Adiciona campos novos em tarefas antigas
- Converte datas para objetos Date
- Define valores padrão para prioridade
Para ambiente de produção, recomenda-se implementar:
- JWT Tokens
- Backend com API REST
- Hash de senhas (bcrypt)
- Refresh tokens
- OAuth 2.0 (Google, GitHub, etc)
npm install -g vercel
vercelnpm run build
# Faça upload da pasta dist/- GitHub Pages
- Railway
- Render
- AWS S3 + CloudFront
Contribuições são bem-vindas! Siga os passos:
- Fork o projeto
- Crie uma branch para sua feature (
git checkout -b feature/MinhaFeature) - Commit suas mudanças (
git commit -m 'feat: adiciona MinhaFeature') - Push para a branch (
git push origin feature/MinhaFeature) - Abra um Pull Request
Seguimos Conventional Commits:
feat: nova funcionalidade
fix: correção de bug
docs: documentação
style: formatação
refactor: refatoração
test: testes
chore: manutenção
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Desenvolvido com 💜 por Davyd Willian
- GitHub: @JezzXL
- LinkedIn: Davyd Willian
- Email: davydsantos.gt@gmail.com
- React Team - Pela incrível biblioteca
- Tailwind Labs - Pelo framework CSS
- Lucide - Pelos ícones lindos
- dnd-kit - Pelo sistema de drag and drop
- Sistema de comentários nas tarefas
- Tags/labels personalizadas
- Busca global avançada
- Gráficos e métricas de produtividade
- Notificações de tarefas
- Sistema de anexos
- Modo colaborativo multi-usuário
- API Backend
- Aplicativo mobile
- Integrações (Slack, Discord, etc)
⭐ Se este projeto foi útil, considere dar uma estrela!
Feito com ❤️ e ☕