Hookline - API Client Completo

Hookline é um cliente HTTP completo e moderno, similar ao Postman e Insomnia, mas com funcionalidades avançadas e interface intuitiva. Desenvolvido com React, TypeScript e armazenamento local.

🚀 Funcionalidades Implementadas

1. Gerenciamento de Requests HTTP

• ✅ Suporte completo a métodos HTTP: GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS
• ✅ Headers personalizados com habilitação/desabilitação individual
• ✅ Parâmetros de query com habilitação/desabilitação
• ✅ Múltiplos tipos de body:
  • JSON
  • Form Data
  • x-www-form-urlencoded
  • Raw
• ✅ Autenticação completa:
  • Basic Auth
  • Bearer Token
  • API Key (Header ou Query)
  • OAuth 2.0
• ✅ Scripts pré e pós-request (JavaScript)
• ✅ Histórico de execuções com re-execução
• ✅ Duplicação de requests
• ✅ Edição em tempo real com auto-save

2. Coleções e Organização

• ✅ Criação de coleções e subcoleções
• ✅ Organização hierárquica de requests
• ✅ Busca de requests e coleções
• ✅ Visualização em árvore expansível
• ✅ Exportar/Importar coleções em JSON
• ✅ Gerenciamento de requests não organizados

3. Variáveis e Ambientes

• ✅ Variáveis globais
• ✅ Variáveis de ambiente
• ✅ Variáveis de coleção
• ✅ Substituição automática de variáveis no formato {{variable}}
• ✅ Múltiplos ambientes com ativação/desativação
• ✅ Gerenciamento visual de variáveis

4. Visualização de Respostas

• ✅ Visualização formatada de respostas
• ✅ Syntax highlighting para JSON e XML
• ✅ Suporte a múltiplos formatos: JSON, Text, XML, HTML
• ✅ Visualização de headers de resposta
• ✅ Informações de status, tempo e tamanho
• ✅ Cópia e download de respostas
• ✅ Badges coloridos por status HTTP

5. Histórico e Re-execução

• ✅ Histórico completo de todas as execuções
• ✅ Filtro por request específico
• ✅ Re-execução de requests do histórico
• ✅ Informações detalhadas de cada execução
• ✅ Limpeza de histórico

6. Configurações do Usuário

• ✅ Tema claro/escuro/sistema
• ✅ Configuração de timeout de requests
• ✅ Configuração de retries automáticos
• ✅ Configuração de proxy (com autenticação)
• ✅ Opção de seguir redirects
• ✅ Validação de SSL configurável

7. Persistência de Dados

• ✅ Armazenamento local com IndexedDB
• ✅ Persistência automática de todas as alterações
• ✅ Exportação completa de dados
• ✅ Importação de dados (merge)
• ✅ Backup e restauração

🛠️ Tecnologias Utilizadas

• Frontend: React 18 + TypeScript
• Build Tool: Vite
• UI Components: shadcn/ui + Radix UI
• Styling: Tailwind CSS
• State Management: Zustand
• Storage: IndexedDB (nativo do navegador)
• HTTP Client: Fetch API nativo
• Icons: Lucide React
• Date Formatting: date-fns
• Notifications: Sonner

📦 Instalação

# Clone o repositório
git clone <seu-repositorio>

# Instale as dependências
npm install

# Inicie o servidor de desenvolvimento
npm run dev

# Build para produção
npm run build

🎯 Como Usar

Criar um Request

1. Clique no botão "+" na sidebar para criar um novo request
2. Preencha o nome, método HTTP e URL
3. Configure headers, body, params e autenticação nas abas
4. Clique em "Send" para executar

Criar uma Coleção

1. Clique no ícone de pasta na sidebar
2. Dê um nome à coleção
3. Arraste requests para dentro da coleção (ou adicione manualmente)

Configurar Variáveis

1. Clique no botão "Environment" no header
2. Crie ou selecione um ambiente
3. Adicione variáveis com chave e valor
4. Use {{variableName}} nos requests para substituição automática

Scripts Pré/Pós-request

1. Vá para a aba "Scripts" no editor de request
2. Habilite e escreva código JavaScript
3. Use o contexto disponível:
   • request: Objeto do request
   • environment: Ambiente ativo
   • variables: Objeto com todas as variáveis

Exportar/Importar

1. Clique em "Export/Import" no header
2. Para exportar: Clique em "Export All Data" e baixe o JSON
3. Para importar: Cole o JSON ou selecione um arquivo

📁 Estrutura do Projeto

src/
├── components/          # Componentes React
│   ├── RequestEditor.tsx      # Editor completo de requests
│   ├── RequestSidebar.tsx     # Sidebar com coleções e requests
│   ├── ResponseViewer.tsx     # Visualizador de respostas
│   ├── SettingsDialog.tsx     # Configurações do usuário
│   ├── EnvironmentManager.tsx  # Gerenciador de ambientes
│   ├── HistoryViewer.tsx      # Visualizador de histórico
│   ├── ExportImportDialog.tsx # Exportar/Importar dados
│   └── ui/                    # Componentes UI (shadcn)
├── lib/                # Utilitários e lógica
│   ├── storage.ts            # Sistema de persistência IndexedDB
│   ├── variableResolver.ts   # Resolução de variáveis
│   └── requestExecutor.ts    # Executor de requests HTTP
├── store/              # Gerenciamento de estado
│   └── useAppStore.ts        # Store Zustand global
├── types/              # Definições TypeScript
│   └── index.ts              # Tipos principais
└── pages/              # Páginas
    └── Index.tsx             # Página principal

🔧 Configurações Avançadas

Variáveis de Ambiente

As variáveis são resolvidas na seguinte ordem de precedência:

1. Variáveis de coleção
2. Variáveis de ambiente ativo
3. Variáveis globais

Autenticação OAuth 2.0

O OAuth 2.0 suporta os seguintes grant types:

• Client Credentials
• Authorization Code
• Password

Scripts

Os scripts pré e pós-request têm acesso a:

• request: Objeto completo do request (pode ser modificado)
• environment: Ambiente ativo
• variables: Objeto com todas as variáveis disponíveis
• response: (apenas pós-request) Objeto da resposta

🚀 Deploy

O projeto pode ser deployado em qualquer plataforma que suporte aplicações React estáticas:

• Vercel: Conecte o repositório e faça deploy automático
• Netlify: Arraste a pasta dist após npm run build
• GitHub Pages: Configure o workflow de deploy
• Qualquer servidor estático: Sirva a pasta dist

📝 Notas Importantes

• Todos os dados são armazenados localmente no navegador (IndexedDB)
• Não há backend necessário - tudo roda no cliente
• Os dados não são sincronizados entre dispositivos (por enquanto)
• Para produção, considere adicionar autenticação e sincronização em nuvem

🎨 Personalização

O tema pode ser personalizado editando:

• src/index.css: Variáveis CSS para cores
• tailwind.config.ts: Configuração do Tailwind

📄 Licença

Este projeto é open source e está disponível sob a licença MIT.

🤝 Contribuindo

Contribuições são bem-vindas! Sinta-se à vontade para abrir issues ou pull requests.

---

Desenvolvido por Bruno Nascimento