TaskFlow

Plataforma SaaS de gerenciamento de tarefas com board Kanban, construída com Next.js, TypeScript, Prisma e Neon PostgreSQL.

Sobre o projeto

O TaskFlow é uma aplicação de gerenciamento de tarefas inspirada em ferramentas como Linear e Jira. Permite criar, editar, remover e organizar tarefas em um board Kanban com drag and drop, além de oferecer um dashboard com métricas e gráficos.

Funcionalidades

• Autenticação com JWT (registro, login e logout)
• Dashboard com métricas, gráfico de status e tarefas urgentes
• Board Kanban com drag and drop entre colunas
• Lista de tarefas com filtros por status
• Criar, editar e remover tarefas
• Página de detalhe da tarefa
• Feedback visual com toasts
• Layout responsivo para mobile
• Proteção de rotas via middleware

Tecnologias

Frontend

• Next.js 15 — framework React com App Router
• TypeScript — tipagem estática
• Tailwind CSS 4 — estilização
• Zustand — estado global
• TanStack Query — cache e sincronização de dados
• Axios — cliente HTTP
• React Hook Form + Zod — formulários e validação
• @dnd-kit — drag and drop
• Recharts — gráficos
• Sonner — toasts
• React Icons — ícones

Backend

• Next.js API Routes — endpoints REST
• Prisma 7 — ORM
• Neon — PostgreSQL serverless
• bcrypt — hash de senhas
• jsonwebtoken — autenticação JWT

Arquitetura

src/
├── app/
│   ├── (auth)/         # Páginas públicas (login, register)
│   ├── (private)/      # Páginas protegidas (dashboard, board, tasks)
│   └── api/            # API Routes (auth, tasks)
├── components/         # Componentes reutilizáveis
├── features/           # Módulos por funcionalidade
├── hooks/              # Custom hooks
├── services/           # Chamadas HTTP com Axios
├── stores/             # Estado global com Zustand
├── schemas/            # Schemas de validação com Zod
├── types/              # Interfaces e tipos TypeScript
├── constants/          # Valores fixos da aplicação
├── data/               # Dados mockados
└── utils/              # Funções utilitárias

Como rodar localmente

Pré-requisitos

• Node.js 20+
• Conta no Neon para o banco de dados

Instalação

# Clone o repositório
git clone https://github.com/seu-usuario/taskflow-interface.git

# Acesse a pasta
cd taskflow-interface

# Instale as dependências
npm install

Variáveis de ambiente

Crie um arquivo .env na raiz do projeto:

DATABASE_URL="sua-connection-string-do-neon"
JWT_SECRET="sua-chave-secreta"

Banco de dados

# Gere o Prisma Client
npx prisma generate

# Rode as migrations
npx prisma migrate dev

Desenvolvimento

npm run dev

Acesse http://localhost:3000.

Testes

O projeto possui testes unitários cobrindo a lógica principal da aplicação.

Tecnologias

• Jest — test runner
• ts-jest — suporte a TypeScript
• Testing Library — testes de hooks React

Cobertura

Arquivo	O que testa
useTaskStore	Todas as actions da store (add, remove, update, updateStatus)
useTaskFilter	Lógica de filtro por status
useTaskMetrics	Cálculo de métricas e tarefas urgentes
authSchema	Validações de login e registro
taskSchema	Validações do formulário de tarefas
taskService	Chamadas HTTP (fetchTasks, createTask, updateTask, deleteTask)

Rodar os testes

# Rodar todos os testes
npm test

# Rodar em modo watch
npm run test:watch

Deploy

O projeto está configurado para deploy na Vercel com banco de dados no Neon.

Adicione as variáveis de ambiente DATABASE_URL e JWT_SECRET nas configurações do projeto na Vercel.