Criar uma página HTML utilizando de ponto de partida esse repositório. Depois, utilizando Javascript pegar os dados do JSON da requisição (GET) - https://us-central1-squid-apis.cloudfunctions.net/test-front-basic. Liste o feed do Instagram da @squidapp. Utilizar de CSS para personalizar o layout como o da imagem do resultado abaixo, considerar o hover para todas as imagens (ver primeira imagem do resultado). Além do hover, cada imagem deve ter um click para o Link da imagem no instagram, abrindo em uma nova aba ao clicar. Responsividade e experiência de usuário (como loaders, tratamento de erros, animações, efeitos, etc) serão levados em consideração na avaliação. No final, subir o código em um repositório público no seu próprio GitHub e mandar o link para o avaliador.
Clique no botão abaixo para para visualizar o resultado do projeto no ar.
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js. Além disto é bom ter um editor para trabalhar com o código como VSCode
# Clone este repositório
$ git clone https://github.com/afpp3/front-basic.git
# Acesse a pasta do projeto no seu terminal/cmd
$ cd front-basic
# Instale as dependências
$ yarn or npm install
# Execute a aplicação em modo de desenvolvimento
$ yarn dev or npm run dev
# A aplicação será aberta na porta:3000
$ acesse a url http://localhost:3000 no seu navegador para visualizar o projeto localmente
As seguintes ferramentas foram usadas na construção do projeto:
HTML, CSS Javascript e o framework da Squid para construção do layout SQUID CSS
André Felippe