TaskForge

Gerenciador de tarefas estilo Kanban — full stack, com autenticação, banco de dados real, drag & drop e dark mode.

Funcionalidades

• Contas de usuário — cadastro e login com e-mail/senha, ou com GitHub/Google (OAuth)
• Segurança de conta — senha com hash (bcrypt), bloqueio após tentativas de login incorretas, redefinição de senha por e-mail
• Projetos/boards — criar (a partir de um template ou do zero), editar, excluir
• Templates de projeto — galeria com preview visual (Scrum, Kanban de Bugs, Pentest, Preparação para Certificação, e modelos exclusivos Pro)
• Cor e repositório do GitHub por projeto — vincule um ou mais repositórios (múltiplos no plano Pro) com selo de linguagem, estrelas e status do último CI/CD
• Colunas personalizáveis — criar, renomear direto no cabeçalho, excluir, reordenar por drag & drop
• Kanban com drag & drop — mover tarefas entre colunas e reordenar dentro delas
• Tarefas completas — título, descrição, prioridade, prazo e etiquetas coloridas
• Checklist/subtarefas com indicador de progresso
• Painel lateral para visualizar e editar uma tarefa, com autosave por campo
• Busca e filtros — por título, prioridade e etiquetas
• Duas visualizações — Kanban e Lista
• Dashboard com resumo das tarefas (concluídas, atrasadas, próximos prazos, distribuição por prioridade)
• Plano Free/Pro — assinatura simulada (fins de demonstração) com página de comparação de planos
• Dark mode / Light mode
• Totalmente responsivo — desktop e celular
• Estados de loading, erro e vazio em todas as telas principais

Capturas de tela

Painel de tarefa	Dashboard

Stack

• Next.js (App Router, Server Actions) + TypeScript
• Tailwind CSS v4
• PostgreSQL (Neon em produção) + Prisma (com driver adapter @prisma/adapter-pg)
• Auth.js / NextAuth v5 — Credentials Provider (JWT) + OAuth (GitHub e Google)
• dnd-kit — drag & drop de tarefas e colunas
• next-themes — dark mode
• Zod — validação de formulários e Server Actions
• Resend — e-mail transacional (redefinição de senha)
• API REST do GitHub — metadados de repositório e status de CI/CD (GitHub Actions)
• Sentry — monitoramento de erros (navegador e servidor)
• Upstash Redis — rate limiting de /api/register, login e redefinição de senha
• Vercel — deploy e CI/CD do próprio projeto

Algumas decisões técnicas

• A coluna é o status da tarefa. Em vez de um campo status separado (que poderia ficar dessincronizado da coluna), a posição da tarefa no Kanban é a única fonte da verdade. O mesmo critério é reaproveitado no dashboard: uma tarefa conta como concluída quando está na última coluna do projeto.
• Server Actions em vez de uma API REST separada. Todas as mutações (criar projeto, mover tarefa, etc.) são Server Actions do Next.js — menos código de "cola" do que manter rotas de API à parte, com verificação de propriedade (ownership) em cada uma delas.
• Atualização otimista onde importa. Mover uma tarefa no Kanban e marcar um item do checklist respondem instantaneamente na tela (via useOptimistic), sem esperar a confirmação do servidor — mas o cálculo da posição real da tarefa sempre usa a lista completa (não filtrada), então buscar/filtrar nunca corrompe a ordenação por trás.
• Autenticação sem tabelas extras. A sessão usa a estratégia JWT do NextAuth (em vez do adapter de banco), tanto para login por e-mail/senha quanto para OAuth — dispensa as tabelas Account/Session/VerificationToken.
• Rate limiting é best-effort, não uma trava de banco. checkRateLimit roda antes das operações custosas (bcrypt, escrita no banco, envio de e-mail) mas não é atômico com elas — sob concorrência real, é aceitável passar 1-2 requisições a mais do limite configurado. Sem o Upstash configurado, os limiters ficam null e a checagem sempre libera, então o app funciona igual sem a variável de ambiente.

Arquitetura

flowchart TB
    Browser["Navegador — Kanban, Dashboard, Templates"]

    subgraph Vercel["Vercel"]
        direction TB
        subgraph Next["Next.js App Router"]
            direction LR
            SC["Server Components"]
            SA["Server Actions<br/>(projetos, colunas, tarefas...)"]
            RH["Route Handlers<br/>(/api/register, /api/auth)"]
        end
        AuthJS["Auth.js<br/>Credentials (JWT) + OAuth"]
    end

    Prisma["Prisma ORM"]
    DB[("Neon PostgreSQL")]
    Resend["Resend<br/>(e-mail transacional)"]
    GitHubAPI["API REST do GitHub<br/>(metadados de repo + status de CI)"]

    Browser -->|RSC / streaming| SC
    Browser -->|mutações| SA
    Browser -->|cadastro / callback OAuth| RH

    RH --> AuthJS
    SA --> AuthJS
    AuthJS --> Prisma
    SC --> Prisma
    SA --> Prisma
    Prisma --> DB

    RH -->|redefinição de senha| Resend
    SC -->|selo de linguagem / CI do repo vinculado| GitHubAPI

Fluxo de deploy próprio do projeto (não confundir com a integração acima, que é a feature de mostrar o status de CI de um repositório vinculado a um projeto): cada push na branch principal roda lint, typecheck e testes (Vitest + Playwright) via GitHub Actions, e a Vercel faz o build e o deploy automaticamente quando o CI passa.

Rodando localmente

1. Suba o banco de dados com Docker:

   docker compose up -d
   

2. Copie o arquivo de variáveis de ambiente:

   cp .env.example .env
   

   Gere um valor para AUTH_SECRET e substitua no .env:

   openssl rand -base64 32
   

3. Instale as dependências:

   npm install
   

4. Gere o Prisma Client e aplique as migrations no banco:

   npx prisma generate
   npx prisma migrate deploy
   

5. Rode o servidor de desenvolvimento:

   npm run dev
   

6. Abra http://localhost:3000.

Estrutura do projeto

src/
├─ app/
│  ├─ (app)/              # área autenticada (dashboard, projetos, board)
│  ├─ login/ register/    # autenticação
│  └─ api/                # rotas do NextAuth e de registro
├─ lib/
│  ├─ actions/             # Server Actions (projetos, colunas, tarefas, subtarefas, etiquetas)
│  └─ validations/         # schemas Zod
├─ components/             # componentes de UI compartilhados
├─ auth.ts / auth.config.ts # configuração do NextAuth
└─ generated/prisma/        # Prisma Client gerado (não versionado)
prisma/
├─ schema.prisma
└─ migrations/

Roadmap

Ideias que ficaram de fora do escopo atual (projeto de portfólio, sem usuários reais no momento):

• Sugestões de código via IA — usar a API da Claude (Anthropic) para analisar uma tarefa vinculada a um repositório e sugerir uma abordagem ou trecho de código, exibido como comentário na tarefa (sem escrita automática no repositório).
• Integração mais profunda com GitHub — um GitHub App com permissão de escrita permitiria ir além da sugestão: abrir uma branch e um Pull Request automaticamente a partir de uma tarefa.
• Gateway de pagamento real (Stripe) — o plano Pro hoje é simulado; uma versão futura poderia processar assinaturas de verdade em modo sandbox.
• Rate limiting e Content-Security-Policy completa — ver SECURITY.md para detalhes do que já foi corrigido e do que ficou documentado como próximo passo.

Segurança

Este projeto passou por um diagnóstico de segurança (auditoria de código + testes dinâmicos contra a aplicação rodando). Achados, correções aplicadas e o que ficou documentado como risco aceito estão em SECURITY.md.

Sobre este projeto

O TaskForge foi construído puramente com IA — do primeiro commit ao deploy, nenhuma linha de código foi escrita manualmente. O objetivo não é "ter ajuda de IA pra programar", e sim demonstrar domínio de verdade sobre como conduzir ferramentas de IA num fluxo de desenvolvimento completo: arquitetura, decisões técnicas, revisão de segurança, testes automatizados e deploy — tudo via prompt, não via teclado.

Ferramentas usadas e o papel de cada uma:

• Claude Code — execução (implementação do código, testes, migrations, deploy e toda a iteração do projeto)
• ChatGPT — melhoria de prompts e correções
• Gemini — melhoria de prompts e correções