4 min leitura • Guide 763 of 877
Gestão de Projetos de Desenvolvimento Frontend
Desenvolvimento frontend envolve complexidade de UI, iteração rápida e colaboração próxima com design. GitScrum ajuda times a organizar trabalho de frontend e entregar experiências de usuário polidas.
Estrutura de Tarefas Frontend
Trabalho de Componente vs Feature
TIPOS DE TRABALHO FRONTEND:
┌─────────────────────────────────────────────────────────────┐
│ │
│ TRABALHO DE COMPONENTE: │
│ Construindo peças de UI reutilizáveis │
│ │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ UI-100: Criar Componente Button ││
│ │ ││
│ │ Variantes: ││
│ │ ☐ Primary, Secondary, Ghost ││
│ │ ☐ Tamanhos Small, Medium, Large ││
│ │ ☐ Estado loading ││
│ │ ☐ Estado disabled ││
│ │ ☐ Suporte a ícone (esquerda, direita) ││
│ │ ││
│ │ Requisitos: ││
│ │ ☐ Acessível (teclado, screen reader) ││
│ │ ☐ Storybook stories ││
│ │ ☐ Testes unitários ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ TRABALHO DE FEATURE: │
│ Implementando funcionalidade voltada ao usuário │
│ │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ FE-200: Página de Configurações de Perfil ││
│ │ ││
│ │ Usa componentes: ││
│ │ Button, Input, Avatar, Card ││
│ │ ││
│ │ Implementação: ││
│ │ ☐ Layout do formulário de perfil ││
│ │ ☐ Upload de avatar com preview ││
│ │ ☐ Validação de formulário ││
│ │ ☐ Integração com API ││
│ │ ☐ Estados de sucesso/erro ││
│ │ ☐ Layout responsivo ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ DEPENDÊNCIAS: │
│ Componentes devem ser construídos ANTES das features │
│ │
│ Sprint 1: UI-100 (Button), UI-101 (Input), UI-102 (Card) │
│ Sprint 2: FE-200 (Settings Page usando esses componentes)│
└─────────────────────────────────────────────────────────────┘
Integração com Design
HANDOFF DE DESIGN NAS TAREFAS:
┌─────────────────────────────────────────────────────────────┐
│ │
│ TAREFA COM SPECS DE DESIGN: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ FE-300: Header do Dashboard ││
│ │ ││
│ │ DESIGN: ││
│ │ Figma: [link para design] ││
│ │ Prototype: [link para protótipo interativo] ││
│ │ ││
│ │ BREAKPOINTS: ││
│ │ Desktop: 1200px+ (navegação completa) ││
│ │ Tablet: 768-1199px (nav colapsada) ││
│ │ Mobile: < 768px (menu hamburger) ││
│ │ ││
│ │ ESTADOS: ││
│ │ ☐ Default ││
│ │ ☐ Menu de usuário aberto ││
│ │ ☐ Busca expandida ││
│ │ ☐ Badge de notificação (tem notificações) ││
│ │ ☐ Scrolled (sticky com sombra) ││
│ │ ││
│ │ ANIMAÇÕES: ││
│ │ Menu abrir: 200ms ease-out ││
│ │ Busca expandir: 150ms ease-in-out ││
│ │ ││
│ │ ACESSIBILIDADE: ││
│ │ ☐ Link skip to main content ││
│ │ ☐ Navegação por teclado ││
│ │ ☐ ARIA landmarks ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ BOM HANDOFF INCLUI: │
│ ✅ Todos os estados visuais │
│ ✅ Comportamento responsivo │
│ ✅ Detalhes de interação │
│ ✅ Tokens de spacing e sizing │
│ ✅ Timing de animação │
│ ✅ Estados de erro │
│ ✅ Estados vazios │
│ ✅ Estados de loading │
└─────────────────────────────────────────────────────────────┘
Fatores de Estimativa
Complexidade Frontend
FATORES DE ESTIMATIVA FRONTEND:
┌─────────────────────────────────────────────────────────────┐
│ │
│ IMPLEMENTAÇÃO BASE: │
│ Layout e estrutura básica │
│ │
│ MULTIPLICADORES: │
│ ├── Responsivo (3 breakpoints): ×1.3 │
│ ├── Animações complexas: ×1.2 │
│ ├── Cross-browser testing: ×1.2 │
│ ├── Acessibilidade A11y: ×1.2 │
│ ├── Múltiplos estados: ×1.3 │
│ └── Integração com estado global: ×1.4 │
│ │
│ EXEMPLO: │
│ Feature: Dashboard Card com gráfico │
│ Base: 8 horas │
│ + Responsivo: 8 × 1.3 = 10.4 │
│ + Animações: 10.4 × 1.2 = 12.5 │
│ + A11y: 12.5 × 1.2 = 15 │
│ Estimativa final: 15 horas │
└─────────────────────────────────────────────────────────────┘