/IP-address-tracker

This is a solution to the IP address tracker challenge on Frontend Mentor with Angular 15

Primary LanguageTypeScript

IP address tracker solution 📌

Essa é uma solução parao desafio IP address tracker do Frontend Mentor.

Warning

Ainda está em desenvolvimento!

Um pouco sobre o desafio

Tela de pesquisa de endereço de acordo com o IP informado

Seu desafio é construir este aplicativo Rastreador de Endereço IP e deixá-lo o mais próximo possível do design. Para obter as localizações de endereço IP, você usará a API de Geolocalização de IP do IPify. Para gerar o mapa, recomendamos usar o LeafletJS.

Você pode usar qualquer ferramenta que desejar para ajudá-lo a concluir o desafio. Então, se você tem algo que gostaria de praticar, sinta-se à vontade para tentar.

Seus usuários devem ser capazes de:

  • Visualizar o layout ideal para cada página, dependendo do tamanho da tela de seus dispositivos
  • Ver estados de foco para todos os elementos interativos na página
  • Ver seu próprio endereço IP no mapa no carregamento inicial da página
  • Pesquisar por qualquer endereço IP ou domínio e ver as informações chave e a localização

Tecnologias que vou utilizar e o que pretendo implementar

  • Angular v.15
  • SCSS
  • Testes unitários com Karma e Jamine
  • Layout Responsivo
  • Acessibilidade

O que estou fazendo agora? 💻✨

  • Estruturando as telas (layout, organização de pastas e componentes, estilos globais) [10/04/2023]
  • Renderização do mapa na tela [10/04/2023]
  • Chamada de serviço para pegar as informações do IP [11/04/2023]
  • Modal de loading entre a chamada do serviço e resposta obtida [18/04/2023]
  • Atualização do card de informações com as informações do IP fornecido [18/04/2023]
  • Validação e mensagem de erro no input [18/04/2023]
  • Busca de coordenadas para serem setadas no mapa de acordo com o endereço do IP fornecido
  • Ajustes na responsividade

Como rodar o projeto?

REQUISITOS:

# após baixar o projeto
$ npm i
$ ng serve
# acesse a porta http://localhost:4200/