Galeria de Imagens

A aplicação utiliza a API do Unsplash, fazendo uma requisição customizada que retorna imagens conforme a busca selecionada. Clicando no card, o usuário é redirecionado a outra rota onde pode visualizar a imagem em resolução maior, podendo ainda clicar nela para abrir sua versão com resolução máxima, em outra aba. Layout feito com CSS Flexbox, responsivo e sem nenhum breakpoint.

Galeria de Imagens

descrição do projeto

Criado com: React, CSS Flexbox, API do Unsplash. A barra de busca tem como valor o estado 'query', que é atualizado através do atributo 'onChange' do input. No submit do formulário, essa query é aplicada ao endereço de requisição, retornando um conjunto de imagens correspondentes abaixo do formulário. Para abrir a imagem na visualização foram utilizadas duas Locations Props, uma com a imagem a ser exibida e outra com o array armazenado no estado 'images', para que ao voltar através do botão, o usuário possa ver a última busca que realizou: quando o App é montado, um hook de efeito verifica se há dados nas locations props, retornando a busca realizada, caso positivo, ou mantendo a página em branco, aguardando nova busca.

Visite a página do projeto

Bora lá!

Bora lá!

Voltar

Voltar