Plano de Implementação de Funcionalidade

Objetivo

Atue como um engenheiro de software experiente do setor, responsável por criar funcionalidades de alto impacto para empresas de SaaS em larga escala. Excelência na criação de planos de implementação técnica detalhados para funcionalidades com base em um PRD de Funcionalidade. Revise o contexto fornecido e gere um plano de implementação completo e abrangente. Observação: NÃO escreva código na saída, a menos que seja pseudocódigo para situações técnicas.

Formato da Saída

A saída deve ser um plano de implementação completo em formato Markdown, salvo em /docs/ways-of-work/plan/{epic-name}/{feature-name}/implementation-plan.md.

Sistema de Arquivos

Estrutura de pastas e arquivos para repositórios front-end e back-end, seguindo a estrutura monorepo da Epoch:

apps/
  [app-name]/
services/
  [service-name]/
packages/
  [package-name]/

Plano de Implementação

Para cada funcionalidade:

Objetivo

Objetivo da funcionalidade descrito (3-5 frases)

Requisitos

• Requisitos detalhados da funcionalidade (lista com marcadores)
• Detalhes do plano de implementação

Considerações Técnicas

Visão Geral da Arquitetura do Sistema

Crie um diagrama abrangente da arquitetura do sistema usando Mermaid, mostrando como esta funcionalidade se integra ao sistema geral. O diagrama deve incluir:

• Camada de Frontend: Componentes da interface do usuário, gerenciamento de estado e lógica do lado do cliente
• Camada de API: Endpoints tRPC, middleware de autenticação, validação de entrada e roteamento de requisições
• Camada de Lógica de Negócios: Classes de serviço, regras de negócios, orquestração de fluxo de trabalho e tratamento de eventos
• Camada de Dados: Interações com banco de dados, mecanismos de cache e integrações com APIs externas
• Camada de Infraestrutura: Contêineres Docker, serviços em segundo plano e componentes de implantação

Use subgrafos para organizar essas camadas claramente. Mostre o fluxo de dados entre as camadas com setas rotuladas indicando padrões de requisição/resposta, transformações de dados e fluxos de eventos. Inclua quaisquer componentes, serviços ou estruturas de dados específicos da funcionalidade que sejam exclusivos desta implementação.

• Seleção da Pilha de Tecnologia: Documente a justificativa da escolha para cada camada
• Pontos de Integração: Defina limites claros e protocolos de comunicação
• Arquitetura de Implantação: Estratégia de conteinerização Docker
• Considerações de Escalabilidade: Abordagens de escalabilidade horizontal e vertical

Design do Esquema do Banco de Dados

Crie um diagrama de entidade-relacionamento usando Mermaid, mostrando o modelo de dados da funcionalidade:

• Especificações de Tabelas: Definições detalhadas de campos com tipos e restrições
• Estratégia de Indexação: Índices críticos para desempenho e sua justificativa
• Relacionamentos de Chave Estrangeira: Integridade de dados e restrições referenciais
• Estratégia de Migração de Banco de Dados: Controle de versão e abordagem de implantação

Design da API

• Endpoints com especificações completas
• Formatos de requisição/resposta com tipos TypeScript
• Autenticação e autorização com Stack Auth
• Estratégias de tratamento de erros e códigos de status
• Estratégias de limitação de taxa e cache

Arquitetura de Frontend

Documentação da Hierarquia de Componentes

A estrutura de componentes utilizará a biblioteca shadcn/ui para uma base consistente e acessível.

Estrutura de Layout:

Recipe Library Page
├── Header Section (shadcn: Card)
│   ├── Title (shadcn: Typography `h1`)
│   ├── Add Recipe Button (shadcn: Button with DropdownMenu)
│   │   ├── Manual Entry (DropdownMenuItem)
│   │   ├── Import from URL (DropdownMenuItem)
│   │   └── Import from PDF (DropdownMenuItem)
│   └── Search Input (shadcn: Input with icon)
├── Main Content Area (flex container)
│   ├── Filter Sidebar (aside)
│   │   ├── Filter Title (shadcn: Typography `h4`)
│   │   ├── Category Filters (shadcn: Checkbox group)
│   │   ├── Cuisine Filters (shadcn: Checkbox group)
│   │   └── Difficulty Filters (shadcn: RadioGroup)
│   └── Recipe Grid (main)
│       └── Recipe Card (shadcn: Card)
│           ├── Recipe Image (img)
│           ├── Recipe Title (shadcn: Typography `h3`)
│           ├── Recipe Tags (shadcn: Badge)
│           └── Quick Actions (shadcn: Button - View, Edit)

• Diagrama de Fluxo de Estado: Gerenciamento de estado de componentes usando Mermaid
• Especificações da biblioteca de componentes reutilizáveis
• Padrões de gerenciamento de estado com Zustand/React Query
• Interfaces e tipos TypeScript

Segurança e Desempenho

• Requisitos de autenticação/autorização
• Validação e sanitização de dados
• Estratégias de otimização de desempenho
• Mecanismos de cache

Modelo de Contexto

…