fotorama

Sumário

• fotorama
  • Sumário
  • Motivação
  • Pilha de tecnologia
  • Galeria
  • Como rodar
    • Pré-requisitos
    • Passo a passo
  • Referências bibliográficas

Motivação

Este app consiste em uma galeria de fotos utilizando a API do site Unsplash. O Unplash, por sua vez, consiste em um site dedicado à fotografia proprietária. Desde 2021, é propriedade da Getty Images. O site reivindica cerca de 322.256 fotógrafos contribuintes e já gerou mais de 941 bilhões de impressões de fotos por mês em sua crescente biblioteca de mais de 4,7 milhões de fotos.^[1]

Vale destacar que parte do app foi desenvolvida pelo professor e a atividade consistiu em finalizá-lo, adicionando a página de detalhes de uma foto, um filtro de pesquisa e o contexto de usuário.

Este foi o terceiro repositório de código apresentado no Curso Superior de TSI do IFMS como requisito para obtenção da nota parcial das atividades da unidade curricular Construção de Páginas Web III.

Pilha de tecnologia

As seguintes tecnologias foram utilizadas para desenvolver este app:

Galeria

Como rodar

Pré-requisitos

• Node;
• Yarn (opcional);
• Conta de desenvolvedor no site Unsplash.

Passo a passo

1. Clone o repositório de código em sua máquina;

2. Abra um shell de comando de sua preferência (prompt de comando, PowerShell, terminal etc.);

3. Instale as dependências do projeto através do seguinte comando:

$ npm install

Caso esteja utilizando o gerenciador de pacotes Yarn, execute o seguinte comando como alternativa:

$ yarn

4. Com as dependências instaladas, crie um arquivo intitulado .env na raiz do projeto e adicione o seguinte conteúdo nele:

VITE_UNSPLASH_ACCESS_KEY=

Tal arquivo deve conter a chave de acesso de um app registrado pelo site Unsplash. Então, caso ainda não tenha uma conta de desenvolvedor, registre-se.

5. Crie um app no site Unsplash. É digno de nota que apps recém-criados estarão em modo de demonstração e terão uma taxa limitada de cinquenta requisições por hora;

6. Copie e cole a chave de acesso¹ do app criado no valor da variável de ambiente VITE_UNSPLASH_ACCESS_KEY;

7. Finalmente, execute o seguinte comando para iniciar o app:

Para npm:

$ npm run dev

Para Yarn:

$ yarn dev

¹ Cuidado para não confundir a chave de acesso com a chave secreta.

Referências bibliográficas

[1] UNSPLASH Stats: See how the Unsplash community has grown over time. [S. l.]: Unsplash, 7 jan. 2023. Disponível em: https://unsplash.com/stats. Acesso em: 7 jan. 2023.