Design de um Dashboard de Webapp

**Título:**

Desenvolvimento de Aplicativo Web para Exibição de Informações de Entidades

**Descrição do Projeto:**

Estamos procurando um desenvolvedor freelancer para criar um aplicativo web de uma única página utilizando React, que irá exibir um conjunto abrangente de informações sobre diversas entidades relacionadas à nossa organização. O frontend deve ser visualmente atraente, fácil de usar, e organizado de forma que permita uma navegação fácil entre os diferentes tipos de dados. Além disso, o frontend precisará ser carregado a partir de uma API para obter os dados necessários dinamicamente.

**Contexto:**

**Requisitos do Frontend:**

1. **Layout Geral:**
  - O aplicativo deve ter um design limpo e responsivo utilizando o Bootstrap para um estilo consistente entre os componentes.
  - O layout deve incluir um contêiner principal que contenha diferentes seções representando várias categorias de dados.

2. **Categorias de Dados e Componentes:**

  **Informações de ASN:**
  - Criar um componente de tabela para exibir os detalhes do asn, incluindo número do asn, sub-rede, nome, descrição e país.
 
  **Locatário Azure:**
  - Desenvolver um componente de cartão para mostrar os detalhes do locatário Azure. Isso inclui nomes de locatários, uma lista de domínios e o ID do locatário.
 
  **Geolocalização:**
  - Implementar um componente de mapa utilizando React Leaflet para exibir os dados de geolocalização. Isso deve incluir latitude, longitude, nome da cidade, nome da região e nome do país, marcados em um mapa.
 
  **Repositório de Código:**
  - Usar um componente de cartão para exibir o URL do repositório de código.
 
  **Nome de DNS:**
  - Exibir o nome de DNS em um componente de cartão.
 
  **Endereço de E-mail:**
  - Exibir o endereço de e-mail em um componente de cartão.
 
  **Achado:**
  - Criar um componente de cartão para cada achado. Isso deve exibir o host, descrição e um link para o URL.
 
  **Porta TCP Aberta:**
  - Exibir a porta TCP aberta em um componente de cartão. Se houver várias portas, listá-las adequadamente.
 
  **Indicação de Organização:**
  - Exibir a indicação de organização em um componente de cartão.
 
  **Informações de Varredura:**
  - Exibir as informações de varredura em um componente de cartão.
 
  **Perfis Sociais:**
  - Usar um componente de tabela para listar perfis sociais, incluindo plataforma, URL e nome do perfil.
 
  **Cesta de Armazenamento:**
  - Criar um componente de cartão para exibir os detalhes da cesta de armazenamento, incluindo nome e URL.
 
  **Tecnologia:**
  - Desenvolver um componente de tabela para mostrar os detalhes da tecnologia, incluindo host, tecnologia utilizada e o URL.
 
  **Firewall de Aplicação Web (WAF):**
  - Usar um componente de acordeão para exibir os detalhes do waf, incluindo host, tipo de waf e url.
 
  **URL Geral:**
  - Exibir quaisquer URLs gerais em um componente de cartão.

3. **Organização dos Dados:**
  - Os dados de cada categoria são fornecidos em um formato json estruturado e devem ser carregados dinamicamente a partir de uma api.
  - Cada categoria pode ter várias entradas, possivelmente com carimbos de data/hora para exibição cronológica.
  - O aplicativo deve ser capaz de lidar e exibir várias entradas para cada categoria, mostrando a evolução dos dados ao longo do tempo.

4. **Interação do Usuário:**
  - Os usuários devem ser capazes de interagir com os componentes para obter mais detalhes, como expandir painéis de acordeão para detalhes do WAF ou clicar em marcadores de mapa para informações de geolocalização.
  - Os links devem ser clicáveis, redirecionando os usuários para os URLs apropriados.

5. **Funcionalidades Adicionais:**
  - Implementar um componente de linha do tempo para visualizar as mudanças nos dados ao longo do tempo.
  - Usar dicas de ferramentas para fornecer informações adicionais ao passar o mouse sobre elementos como descrições de WAF ou detalhes de tecnologia.
  - Garantir que o aplicativo seja otimizado para desempenho e acessível em vários dispositivos.

O objetivo é criar um aplicativo interativo e informativo de uma única página que exiba eficazmente as categorias de dados fornecidas de maneira fácil de usar. O freelancer será responsável por projetar os componentes frontend, integrá-los com a API para obtenção de dados, e garantir que o aplicativo como um todo seja responsivo e fácil de navegar.