Destino Dev

Cursos

Gerenciador de Tarefas com React + TypeScript + Drag and Drop

Código do curso: github.com/johnpires/gerenciador-tarefas-react-ts-dnd

Construa um gerenciador de tarefas profissional com React, TypeScript e Drag and Drop. Aprenda a criar interfaces interativas com kanban board, arrastar e soltar tarefas, persistência de dados e TypeScript tipagem avançada.

Conteúdo do curso

Módulo 1: Módulo 1 — Introdução e Setup

Visão geral do projeto, configuração do ambiente de desenvolvimento e estrutura inicial do Gerenciador de Tarefas.

  1. 1.1 O que vamos construir (2 min)
  2. 1.2 Configurando o ambiente de desenvolvimento (2 min)
  3. 1.3 Estrutura do projeto e primeiros arquivos (3 min)

Módulo 2: Módulo 2 — TypeScript e Modelagem de Dados

Defina tipos, interfaces e modele os dados do seu gerenciador com TypeScript de forma robusta.

  1. 2.1 Tipos e interfaces avançadas no TypeScript (3 min)
  2. 2.2 Gerenciamento de estado com useReducer (3 min)
  3. 2.3 Context API com TypeScript (2 min)
  4. 2.4 Custom hooks tipados e reutilizáveis (3 min)

Módulo 3: Módulo 3 — Interface Kanban com React

Construa os componentes visuais do board kanban: colunas, cards de tarefas e modais de edição.

  1. 3.1 Componente Board e estrutura de colunas (2 min)
  2. 3.2 Componente TaskCard (2 min)
  3. 3.3 Formulário para adicionar e editar tarefas (2 min)
  4. 3.4 Modal de detalhes e edição completa da tarefa (2 min)

Módulo 4: Módulo 4 — Drag and Drop com @hello-pangea/dnd

Implemente arrastar e soltar tarefas entre colunas e reordenação dentro da mesma coluna.

  1. 4.1 Instalando e configurando @hello-pangea/dnd (2 min)
  2. 4.2 Draggable e Droppable: integrando ao Board (2 min)
  3. 4.3 Reordenação e múltiplos Droppables (2 min)
  4. 4.4 Animações, feedback visual e polimento (8 min)

Módulo 5: Módulo 5 — Filtros, Labels e Prioridades

Adicione labels coloridas, prioridades, filtros e busca em tempo real ao gerenciador.

  1. 5.1 Sistema de labels e tags coloridas (2 min)
  2. 5.2 Filtros por prioridade e label (8 min)
  3. 5.3 Busca em tempo real com debounce (2 min)
  4. 5.4 Ordenação por prioridade e data (2 min)

Módulo 6: Módulo 6 — Persistência e Deploy

Persista dados no localStorage, exporte/importe JSON e faça deploy no Vercel/Netlify.

  1. 6.1 Persistência com localStorage (2 min)
  2. 6.2 Exportar e importar dados JSON (2 min)
  3. 6.3 Build otimizado com Vite (8 min)
  4. 6.4 Deploy no Vercel e Netlify (2 min)