{"id":31693767,"url":"https://github.com/edlavio/task-manager","last_synced_at":"2026-04-11T19:06:00.709Z","repository":{"id":318643366,"uuid":"1072141215","full_name":"Edlavio/task-manager","owner":"Edlavio","description":"Um gerenciador de tarefas moderno construído com React, TypeScript e Vite, oferecendo visualizações em Kanban Board e Flow Chart para organização eficiente de projetos e tarefas.","archived":false,"fork":false,"pushed_at":"2025-10-08T10:35:45.000Z","size":76,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-08T12:24:20.863Z","etag":null,"topics":["dnd-kit","kaban","react","react-flow","react-router","tailwindcss","task-manager","typescript","vitejs","vitest"],"latest_commit_sha":null,"homepage":"https://task-manager-ed.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Edlavio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-08T10:11:33.000Z","updated_at":"2025-10-08T10:35:49.000Z","dependencies_parsed_at":"2025-10-08T12:24:23.467Z","dependency_job_id":"7fd20fda-0736-42fb-9e9e-a76d1cce7809","html_url":"https://github.com/Edlavio/task-manager","commit_stats":null,"previous_names":["edlavio/task-manager"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Edlavio/task-manager","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edlavio%2Ftask-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edlavio%2Ftask-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edlavio%2Ftask-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edlavio%2Ftask-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Edlavio","download_url":"https://codeload.github.com/Edlavio/task-manager/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edlavio%2Ftask-manager/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278972328,"owners_count":26078017,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dnd-kit","kaban","react","react-flow","react-router","tailwindcss","task-manager","typescript","vitejs","vitest"],"created_at":"2025-10-08T15:53:02.592Z","updated_at":"2025-10-08T15:53:08.886Z","avatar_url":"https://github.com/Edlavio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg width=\"1919\" height=\"882\" alt=\"image\" src=\"https://github.com/user-attachments/assets/36a6aaca-c6d9-4f89-a26a-26b096c3ca5c\" /\u003e\n\n# 📋 Task Manager\n\nUm gerenciador de tarefas moderno construído com React, TypeScript e Vite, oferecendo visualizações em Kanban Board e Flow Chart para organização eficiente de projetos e tarefas.\n\n## ✨ Funcionalidades\n\n- 🎯 **Kanban Board**: Interface drag-and-drop para gerenciamento visual de tarefas\n- 🔄 **Flow View**: Visualização de dependências entre tarefas em formato de fluxograma\n- 🌓 **Tema Dark/Light**: Alternância entre temas claro e escuro\n- 💾 **Persistência Local**: Dados salvos automaticamente no localStorage\n- 📱 **Responsivo**: Interface adaptável para desktop e mobile\n\n## 🚀 Como Executar o Projeto\n\n### Pré-requisitos\n\n- Node.js (versão 18 ou superior)\n- pnpm (recomendado) ou npm\n\n### Instalação e Execução\n\n1. **Clone o repositório:**\n```bash\ngit clone \u003curl-do-repositorio\u003e\ncd task-manager\n```\n\n2. **Instale as dependências:**\n```bash\npnpm install\n# ou\nnpm install\n```\n\n3. **Execute o projeto em modo de desenvolvimento:**\n```bash\npnpm dev\n# ou\nnpm run dev\n```\n\n4. **Acesse a aplicação:**\n   - Abra [http://localhost:5173](http://localhost:5173) no seu navegador\n\n### Scripts Disponíveis\n\n- `pnpm dev` - Executa o projeto em modo de desenvolvimento\n- `pnpm build` - Gera build de produção\n- `pnpm preview` - Visualiza o build de produção\n- `pnpm test` - Executa os testes\n- `pnpm test:ui` - Executa os testes com interface visual\n- `pnpm lint` - Executa o linter\n- `pnpm type-check` - Verifica tipos TypeScript\n\n## 🏗️ Arquitetura e Tecnologias\n\n### Stack Principal\n\n- **React 19** - Biblioteca para interfaces de usuário\n- **TypeScript** - Tipagem estática\n- **Vite** - Bundler e dev server\n- **Tailwind CSS** - Framework CSS utilitário\n- **Zustand** - Gerenciamento de estado global\n\n### Bibliotecas de UI e Funcionalidades\n\n- **@xyflow/react** - Renderização de fluxogramas interativos\n- **@dnd-kit** - Funcionalidade drag-and-drop\n- **@radix-ui** - Componentes acessíveis de baixo nível\n- **Lucide React** - Biblioteca de ícones\n- **React Router** - Roteamento\n\n### Testes e Qualidade\n\n- **Vitest** - Framework de testes\n- **Testing Library** - Utilitários para testes de componentes\n- **ESLint** - Linter para qualidade de código\n\n## 📁 Estrutura do Projeto\n\n```\nsrc/\n├── components/          # Componentes React\n│   ├── ui/             # Componentes de interface base\n│   ├── __tests__/      # Testes de componentes\n│   ├── flow-view.tsx   # Visualização em fluxograma\n│   ├── kaban-board.tsx # Board Kanban\n│   ├── kaban-card.tsx  # Card de tarefa\n│   ├── kaban-column.tsx # Coluna do Kanban\n│   ├── header.tsx      # Cabeçalho da aplicação\n│   ├── modal.tsx       # Modal responsivo\n│   └── theme-*.tsx     # Componentes de tema\n├── hooks/              # Custom hooks\n├── lib/                # Utilitários e helpers\n├── pages/              # Páginas da aplicação\n├── store/              # Gerenciamento de estado (Zustand)\n├── types.ts            # Definições de tipos TypeScript\n└── main.tsx           # Ponto de entrada da aplicação\n```\n\n## 🔧 Decisões Técnicas Importantes\n\n### 1. **Gerenciamento de Estado - Zustand**\n- **Por quê:** Alternativa mais leve ao Redux, com menos boilerplate\n- **Benefícios:** API simples, TypeScript nativo, persistência automática\n- **Implementação:** Store único para tarefas com persistência no localStorage\n\n### 2. **Estilização - Tailwind CSS**\n- **Por quê:** Produtividade e consistência no design\n- **Benefícios:** Classes utilitárias, purge automático, tema customizável\n- **Configuração:** Tema personalizado com variáveis CSS para dark/light mode\n\n### 3. **Drag and Drop - @dnd-kit**\n- **Por quê:** Melhor performance e acessibilidade comparado ao react-beautiful-dnd\n- **Benefícios:** Suporte a keyboard, touch devices, melhor TypeScript\n- **Uso:** Implementado no Kanban Board para reordenação de tarefas e colunas\n\n### 4. **Visualização de Fluxo - @xyflow/react**\n- **Por quê:** Biblioteca especializada em grafos e fluxogramas\n- **Benefícios:** Performance otimizada, customização avançada, interatividade\n- **Implementação:** Visualização de dependências entre tarefas\n\n### 5. **Componentes UI - Radix UI**\n- **Por quê:** Componentes acessíveis e sem estilo predefinido\n- **Benefícios:** WAI-ARIA compliant, composição flexível, TypeScript\n- **Uso:** Base para Modal, Dropdown, Dialog, etc.\n\n### 6. **Roteamento - React Router v7**\n- **Por quê:** Padrão da comunidade React\n- **Implementação:** Configuração simples com redirecionamentos\n\n### 7. **Testes - Vitest + Testing Library**\n- **Por quê:** Compatibilidade nativa com Vite, performance superior ao Jest\n- **Configuração:** \n  - Ambiente jsdom para testes de componentes\n  - Mocks para APIs do navegador (ResizeObserver, matchMedia)\n  - Setup global para Testing Library\n\n### 8. **TypeScript Strict Mode**\n- **Configuração:** Tipagem rigorosa para maior segurança\n- **Benefícios:** Detecção precoce de erros, melhor DX\n\n### 9. **Estrutura Responsiva**\n- **Estratégia:** Mobile-first com breakpoints Tailwind\n- **Implementação:** \n  - Modal/Drawer adaptativo baseado no tamanho da tela\n  - Layout flexível para diferentes dispositivos\n\n### 10. **Performance**\n- **React.memo:** Componentes otimizados para re-renderizações\n- **useMemo/useCallback:** Otimização de cálculos pesados\n\n## 🧪 Testes\n\nO projeto inclui testes unitários para componentes principais:\n\n```bash\n# Executar todos os testes\npnpm test\n\n# Executar testes com interface visual\npnpm test:ui\n\n# Executar testes em modo watch\npnpm test --watch\n```\n\n### Cobertura de Testes\n\n- ✅ Componentes de interface\n- ✅ Funcionalidades do Kanban Board\n- ✅ Renderização de páginas\n- ✅ Mocks para APIs do navegador\n\n## 🌐 Compatibilidade\n\n- **Navegadores:** Chrome 90+, Firefox 88+, Safari 14+, Edge 90+\n- **Dispositivos:** Desktop, Tablet, Mobile\n- **Resolução:** Responsivo a partir de 320px\n\n---\n\n**Desenvolvido com ❤️ usando React + TypeScript + Vite**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedlavio%2Ftask-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedlavio%2Ftask-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedlavio%2Ftask-manager/lists"}