Este documento representa o backlog de engenharia para o desenvolvimento do MVP da Plataforma Inovacode. Ele é projetado para ser importado diretamente para uma ferramenta de gerenciamento de projetos (Jira, Linear, Asana). Cada tarefa é atômica, com requisitos claros, uma descrição técnica prescritiva e critérios de aceitação (Definition of Done) para garantir a qualidade.
Objetivo: Estabelecer a base do monorepo, configurar as ferramentas de desenvolvimento, e provisionar a infraestrutura básica.
Status: ✅ CONCLUÍDO - Todas as tarefas T-101, T-102 e T-103 foram implementadas com sucesso.
| ID | Título | História de Usuário Relacionada | Requisitos Associados | Descrição Técnica Detalhada | Critérios de Aceitação (DoD) | Esforço |
|---|---|---|---|---|---|---|
| T-101 | [CORE] Inicializar monorepo com Turborepo e pnpm | Como Desenvolvedor, eu quero um monorepo configurado para gerenciar o frontend e backend de forma coesa. | N/A | Crie a estrutura de pastas (apps/web, apps/api, packages/tsconfig, packages/eslint-config). Configure pnpm-workspace.yaml e turbo.json. Adicione as configurações base de TypeScript e ESLint nos pacotes compartilhados. |
- [x] Comando pnpm install executa com sucesso.- [x] Comando pnpm dev está configurado para iniciar ambos os apps.- [x] Configurações de ESLint e TSConfig são herdadas corretamente por web e api. |
3 |
| T-102 | [INFRA] Provisionar banco de dados PostgreSQL no Supabase | Como Desenvolvedor, eu quero uma instância de banco de dados pronta para conectar a API. | REQ-NF-017 | Crie um novo projeto no Supabase. Obtenha a URL de conexão do banco de dados (connection string). Armazene essa URL de forma segura como um segredo para uso futuro na API. | - [x] Projeto Supabase está criado.- [x] A URL de conexão está documentada no .env.example e adicionada a um gerenciador de segredos. |
2 |
| T-103 | [DEVOPS] Configurar pipeline de CI com GitHub Actions | Como Desenvolvedor, eu quero que cada PR seja automaticamente verificado para garantir a qualidade do código. | N/A | Crie o arquivo .github/workflows/ci.yml. O workflow deve ser disparado em pull_request para a branch main. Deve instalar dependências com pnpm, e executar os comandos turbo lint, turbo test, e turbo build. |
- [x] O workflow é disparado corretamente em novas PRs.- [x] O pipeline falha se o linting, testes ou build falharem.- [x] O cache do Turborepo é utilizado para acelerar os builds. |
3 |
Objetivo: Construir a interface visualmente fiel ao design, responsiva e com as animações e interações básicas.
Status: ✅ CONCLUÍDO - Todas as tarefas T-201, T-202, T-203 e T-204 foram implementadas com sucesso.
| ID | Título | História de Usuário Relacionada | Requisitos Associados | Descrição Técnica Detalhada | Critérios de Aceitação (DoD) | Esforço |
|---|---|---|---|---|---|---|
| T-201 | [FE] Configurar projeto Vite com React, TS e Tailwind CSS | Como Desenvolvedor, eu quero um ambiente frontend moderno e eficiente para construir a UI. | N/A | Dentro de apps/web, configure o Vite. Instale e configure o Tailwind CSS, incluindo a definição das cores, fontes e sistema de espaçamento do blueprint.md no arquivo tailwind.config.js. |
- [x] O servidor de desenvolvimento (vite) inicia com sucesso.- [x] Classes do Tailwind (ex: bg-[#1E1E1E]) são aplicadas corretamente.- [x] A fonte "Inter" é carregada e aplicada globalmente. |
2 |
| T-202 | [FE] Criar componentes de UI base (Button, Card) | Como Usuário, eu quero ver botões e cards consistentes em todo o site. | REQ-F-005, REQ-F-006 | Crie os arquivos Button.tsx e Card.tsx em src/components. Implemente os estilos base, de hover e de foco conforme o blueprint.md. Os componentes devem aceitar children e outras props relevantes. |
- [x] Componentes renderizam corretamente com base nas props.- [x] Efeitos de hover e transições funcionam conforme o design.- [x] Código adere às regras de linting.- [x] Testes de Storybook ou unitários básicos são criados. |
3 |
| T-203 | [FE] Implementar layout e seções estáticas da Landing Page | Como Usuário, eu quero ver o conteúdo principal da landing page para entender o que a Inovacode faz. | REQ-F-001, REQ-F-002, REQ-F-003 | Utilizando os componentes de UI, construa a estrutura HTML semântica e estilize todas as seções estáticas da landing page. Implemente o layout responsivo (mobile-first) usando as classes do Tailwind. | - [x] A página é visualmente idêntica ao design Figma (Desktop e Mobile).- [x] O layout não quebra em larguras de tela de 320px a 1920px.- [x] HTML é semântico (uso de <header>, <main>, <section>, etc). |
5 |
| T-204 | [FE] Implementar animações de scroll com Framer Motion | Como Usuário, eu quero uma experiência de navegação fluida e moderna. | REQ-F-004 | Instale o framer-motion. Crie um componente wrapper ou um hook customizado (useScrollAnimation) que aplica os efeitos de Fade-in + Slide-in-up a elementos quando eles entram no viewport. |
- [x] As animações são disparadas quando as seções se tornam visíveis.- [x] As animações não causam queda perceptível de performance (jank).- [x] A implementação segue as boas práticas do Framer Motion. |
3 |
Objetivo: Implementar o fluxo completo de submissão do formulário, desde a UI até a persistência no banco e notificação por email.
Status: ✅ CONCLUÍDO - Todas as tarefas T-301, T-302, T-303, T-304 e T-305 foram implementadas com sucesso.
| ID | Título | História de Usuário Relacionada | Requisitos Associados | Descrição Técnica Detalhada | Critérios de Aceitação (DoD) | Esforço |
|---|---|---|---|---|---|---|
| T-301 | [BE] Criar schema do banco com Drizzle ORM | Como Desenvolvedor, eu quero uma definição de tabela type-safe para armazenar os contatos. | design.md, Seção 3.3 |
No pacote packages/db, crie o arquivo schema.ts. Defina a tabela contacts e o enum contactStatusEnum exatamente como especificado no DDT. Configure o drizzle.config.ts para conectar ao DB. |
- [ ] O schema está definido em packages/db.- [ ] O comando pnpm --filter db generate gera um arquivo de migração SQL sem erros.- [ ] O comando pnpm --filter db migrate aplica a migração ao banco de dados local. |
2 |
| T-302 | [BE] Configurar servidor Fastify com logging e validação | Como Desenvolvedor, eu quero um servidor backend pronto para receber rotas. | REQ-NF-013, REQ-NF-014 | Em apps/api, configure a instância principal do Fastify. Adicione o logger Pino. Integre o fastify-type-provider-zod para habilitar a validação de schemas. Crie um health check em /healthz. |
- [ ] O servidor inicia sem erros.- [ ] Logs JSON estruturados são impressos no console a cada requisição.- [ ] O endpoint /healthz retorna 200 OK. |
2 |
| T-303 | [BE] Implementar endpoint POST /api/v1/contact |
Como Usuário, eu quero que minha mensagem seja recebida e armazenada de forma segura. | REQ-F-010, REQ-NF-006 | Crie a rota POST /contact. Use Zod para definir o schema do corpo da requisição. Na lógica do handler, valide os dados, insira-os no banco de dados usando o Drizzle, e envie a notificação por email via Resend. Retorne 201 Created em caso de sucesso. |
- [ ] Endpoint está coberto por testes de integração (caminho feliz e erro 400).- [ ] Dados são persistidos corretamente no banco.- [ ] Um email de notificação é disparado.- [ ] Erros de banco ou de email são tratados e retornam um status 500. |
5 |
| T-304 | [FE] Implementar componente do Formulário de Contato | Como Usuário, eu quero um formulário claro e funcional para enviar minha mensagem. | REQ-F-007, REQ-F-008, REQ-F-009 | Em apps/web/src/features/ContactForm, crie o componente React para o formulário. Use a biblioteca react-hook-form com o resolver Zod para validação do lado do cliente. |
- [ ] A UI do formulário corresponde ao design.- [ ] Validação de email (formato e obrigatoriedade) funciona em tempo real.- [ ] Mensagens de erro são exibidas de forma acessível.- [ ] O botão de envio fica desabilitado enquanto o formulário é inválido. |
3 |
| T-305 | [FE] Integrar formulário com a API usando Tanstack Query | Como Usuário, eu quero feedback imediato após enviar o formulário. | REQ-F-011 | Crie o hook useSubmitContact (conforme design.md) usando useMutation do Tanstack Query. Conecte este hook ao evento onSubmit do formulário. Trate os estados isLoading, isSuccess, e isError na UI. |
- [ ] Ao submeter, um estado de loading é exibido no botão.- [ ] Em caso de sucesso, uma mensagem de sucesso é exibida.- [ ] Em caso de erro da API, uma mensagem de erro genérica é mostrada. |
2 |
- [✅] Épico 1: Setup e Infraestrutura (Completo)
- [✅] Épico 2: Desenvolvimento do Frontend (Completo)
- [✅] Épico 3: Desenvolvimento do Backend (Completo)
- [✅] Épico 4: Finalização e Deploy em Produção (Completo)
| ID | Título | História de Usuário Relacionada | Requisitos Associados | Descrição Técnica Detalhada | Critérios de Aceitação (DoD) | Esforço |
|---|---|---|---|---|---|---|
| T-401 | [FE] Otimização de Imagens e Ativos | Como Usuário, eu quero que o site carregue rapidamente, especialmente no celular. | REQ-NF-001, REQ-NF-003 | Verifique todas as imagens do site. Comprima-as usando ferramentas como Squoosh e sirva-as em formatos modernos (ex: WebP). Configure o build do Vite para minificar JS e CSS. | - [✅] Imagens têm menos de 100KB sempre que possível.- [✅] O Lighthouse reporta uma pontuação de Performance > 90.- [✅] O tamanho total da página está dentro do limite definido no RNF. |
2 |
| T-402 | [QA] Implementar SEO On-Page básico | Como Dono do Negócio, eu quero que meu site seja encontrável nos mecanismos de busca. | N/A | Use react-helmet ou similar para definir meta title, meta description e meta keywords únicos para cada página. Garanta que todas as imagens tenham alt tags descritivas. Gere um sitemap.xml. |
- [✅] Cada página tem um título único e descritivo.- [✅] A meta description da home page está preenchida.- [✅] Todas as <img> tags possuem alt preenchido. |
2 |
| T-403 | [QA] Testes Cross-Browser e em Múltiplos Dispositivos | Como Usuário, eu quero uma experiência consistente independente do meu navegador ou dispositivo. | REQ-F-003 | Teste manualmente a aplicação nos últimos 2 releases do Chrome, Firefox, e Safari (desktop e mobile). Verifique layout, funcionalidade e animações. | - [ ] Nenhuma quebra de layout é observada nos navegadores alvo.- [ ] A funcionalidade do formulário é consistente em todos os navegadores. |
3 |
| T-404 | [DEVOPS] Configurar e realizar o Deploy de Produção | Como Dono do Negócio, eu quero que meu site esteja online e acessível ao público. | REQ-NF-016 | Configure os projetos na Vercel (apps/web) e Fly.io (apps/api). Adicione todas as variáveis de ambiente de produção (segredos do DB, API keys). Configure o DNS para apontar para os serviços. Crie um workflow de CD para deploy automático na main. |
- [ ] O frontend está acessível no domínio de produção.- [ ] A API está acessível no subdomínio de produção.- [ ] Merges na branch main disparam o deploy para produção automaticamente. |
5 |