Skip to content

README.md

Latest commit

 

History

History
219 lines (175 loc) · 8.15 KB

README.md

File metadata and controls

219 lines (175 loc) · 8.15 KB

Frontend Varion

Este diretório contém o código-fonte do frontend da aplicação Varion, construído com Next.js 15, React 19 e TypeScript. Oferece uma interface de usuário moderna e responsiva para gerenciamento de projetos, consumindo a API REST do backend Varion.

🚀 Tecnologias Utilizadas

  • Next.js 15 (com App Router)
  • React 19 (com Server Components)
  • TypeScript 5 (tipagem forte)
  • Tailwind CSS 4 (estilização moderna)
  • React Icons (ícones consistentes)
  • ESLint + Prettier (qualidade de código)

📁 Estrutura de Diretórios

src/
├── app/              # App Router do Next.js (rotas baseadas em arquivos)
│   ├── globals.css   # Estilos globais e configuração do Tailwind
│   ├── layout.tsx    # Layout global da aplicação
│   ├── page.tsx      # Página inicial/dashboard
│   ├── projects/     # Páginas relacionadas a projetos
│   │   ├── layout.tsx    # Layout específico para projetos
│   │   ├── page.tsx      # Listagem de projetos
│   │   └── [id]/         # Rota dinâmica para projeto específico
│   │       └── page.tsx  # Detalhes do projeto
│   └── states/       # Gerenciamento de estados customizáveis
│       └── page.tsx
├── components/       # Componentes React reutilizáveis
│   ├── CommentBox.tsx        # Sistema de comentários
│   ├── GanttChart.tsx        # Visualização Gantt (planejado)
│   ├── MainContentWrapper.tsx # Container principal
│   ├── MenuContext.tsx       # Context do menu lateral
│   ├── ProjectForm.tsx       # Formulário de projetos (legado)
│   ├── ProjectFormModal.tsx  # Modal para criação/edição
│   ├── SideMenu.tsx         # Menu lateral de navegação
│   ├── StateManager.tsx     # Gerenciamento de estados
│   ├── StatusChart.tsx      # Gráficos de status
│   └── Timeline.tsx         # Timeline de atividades
├── hooks/            # Hooks React customizados
│   ├── useFetchData.ts      # Hook genérico para fetch
│   ├── useProjects.ts       # Gerenciamento de projetos
│   ├── useProjectStates.ts  # Estados de projetos
│   ├── useStates.ts         # Estados globais
│   └── useStatusConstants.ts # Constantes de status
├── utils/            # Funções utilitárias
│   └── helpers.ts           # Helpers diversos
└── @types/           # Definições de tipo customizadas (se necessário)

⚙️ Configuração e Execução

Pré-requisitos

  • Node.js ≥18
  • pnpm (gerenciador de pacotes)
  • Backend Varion rodando (porta 3001)

Variáveis de Ambiente

Configure as variáveis de ambiente copiando o arquivo de exemplo:

cp .env.example .env.local
# Edite .env.local com suas configurações

Variáveis obrigatórias:

  • NEXT_PUBLIC_API_URL - URL da API backend (ex: http://localhost:3001)

Variáveis opcionais:

  • ANALYZE - Habilita análise de bundle (true/false)

📖 Documentação completa: ../docs/ENVIRONMENT.md

Exemplo de .env.local:

NEXT_PUBLIC_API_URL=http://localhost:3001
ANALYZE=false

Instalação de Dependências

pnpm install

Executando em Desenvolvimento

pnpm run start:dev

O servidor de desenvolvimento será iniciado em http://localhost:3000.

Build para Produção

# Gerar build otimizada
pnpm run build

# Iniciar servidor de produção
pnpm run start

🛠️ Scripts Disponíveis

  • pnpm run start:dev — Inicia servidor de desenvolvimento com hot reload
  • pnpm run build — Gera build otimizada para produção (.next/)
  • pnpm run start — Inicia servidor Next.js em modo produção
  • pnpm run lint — Executa ESLint para análise estática do código
  • pnpm run type-check — Executa checagem de tipos TypeScript
  • pnpm run analyze — Análise de bundle com webpack-bundle-analyzer

✨ Funcionalidades Implementadas

📊 Gerenciamento de Projetos

  • ✅ Listagem de projetos com informações básicas na dashboard
  • ✅ Criação via modal responsivo diretamente da homepage
  • ✅ Visualização detalhada (/projects/[id]) com tarefas e comentários
  • ✅ Edição inline de projetos existentes
  • ✅ Sistema de códigos únicos para identificação

✅ Gerenciamento de Tarefas

  • ✅ Listagem integrada dentro da visualização de projetos
  • ✅ CRUD completo (criar, ler, atualizar, deletar)
  • ✅ Sistema de comentários para colaboração
  • ✅ Itens de to-do (checklist) para tarefas
  • ✅ Atualização de status com histórico

🎨 Gerenciamento de Estados

  • ✅ Página dedicada (/states) para configuração
  • ✅ Estados customizáveis com cores personalizadas
  • ✅ Aplicação dinâmica em projetos e tarefas
  • ✅ Ordem configurável para fluxos de trabalho

🎯 Interface e UX (v2.1.0)

  • ✅ Modal de criação para projetos
  • ✅ Design responsivo otimizado para mobile
  • ✅ Navegação simplificada (removidas rotas desnecessárias)
  • ✅ Feedback visual aprimorado com cores consistentes
  • ✅ LoadingButton com texto adaptativo

🔄 Funcionalidades Planejadas

  • 🔐 Autenticação (login/registro de usuários)
  • 🔒 Proteção de rotas baseada em permissões
  • 📈 Dashboard avançado com métricas e gráficos
  • 🔍 Busca e filtros avançados
  • 📱 PWA (Progressive Web App)
  • 🌙 Modo escuro configurável

🎨 Componentes Principais

Interface Base

  • SideMenu - Navegação lateral responsiva (simplificada v2.1.0)
  • MainContentWrapper - Container principal com layout flex
  • MenuContext - Gerenciamento de estado do menu

Formulários e Modais

  • ProjectForm - Formulário reutilizável para projetos (legado)
  • ProjectFormModal - Modal responsivo para criação/edição (v2.1.0)

Visualização de Dados

  • StatusChart - Gráficos de distribuição de status
  • Timeline - Cronologia de atividades (planejado)

Gerenciamento

  • StateManager - Interface para configurar estados
  • GanttChart - Visualização Gantt (em desenvolvimento)

🔧 Hooks Personalizados

Gerenciamento de Dados

  • useFetchData - Hook genérico para chamadas à API
  • useProjects - Gerenciamento completo de projetos
  • useProjectStates - Estados específicos de projetos
  • useStates - Gerenciamento global de estados
  • useStatusConstants - Constantes de status da aplicação

🚀 Considerações de Performance

Otimizações Implementadas

  • Server Components - Renderização no servidor onde apropriado
  • Client Components - Interatividade otimizada no cliente
  • Code Splitting - Carregamento sob demanda de componentes
  • Bundle Analysis - Monitoramento do tamanho dos bundles

Próximas Otimizações

  • 🖼️ Otimização de imagens com next/image
  • 💾 Cache de dados com SWR ou React Query
  • ⚡ Lazy loading de componentes pesados
  • 📊 Memoização de cálculos complexos

🧪 Qualidade de Código

Implementado

  • ✅ TypeScript para tipagem forte
  • ✅ ESLint com regras Next.js
  • ✅ Prettier para formatação consistente
  • ✅ Estrutura organizacional clara e escalável

Planejado

  • 🧪 Testes unitários com Jest/Testing Library
  • 🔍 Testes de integração com Playwright
  • 📸 Testes de snapshot para componentes
  • 📊 Coverage reports automáticos

🔄 Refatorações Recentes (Maio de 2025)

Atualizações de Tecnologia

  • Next.js 15 - Migração para versão mais recente
  • React 19 - Aproveitamento de novas funcionalidades
  • Tailwind CSS 4 - Novo sistema de design tokens

Melhorias na Arquitetura

  • Hooks customizados - Centralização da lógica de estado
  • Componentes modulares - Reutilização e manutenibilidade
  • Type safety - Tipagem completa da aplicação
  • Performance - Otimizações de renderização

Última atualização da documentação: 31 de maio de 2025

Interface moderna construída com Next.js 15 e React 19 ⚛️