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

• Verificar se é possível pôr o formatador de data no arquivo i18n/i18next.ts
• Minimizar o dropdown ao clicar fora
• Testar a função em react_utils para detectar cliques fora do componente

Este app é um cliente da plataforma Unsplash, oferecendo aos usuários uma coleção de fotografias de alta qualidade obtidas através da API da Unsplash. A Unsplash é uma plataforma conhecida por compartilhar fotografia proprietária. Desde 2021, pertence à Getty Images e possui uma ampla comunidade de aproximadamente 322.256 fotógrafos contribuintes. A plataforma já gerou mais de 941 bilhões de impressões de fotos por mês, com uma biblioteca diversificada contendo mais de 4,7 milhões de imagens^[1].

O objetivo principal deste repositório de código foi aprimorar um app existente adicionando suporte aos idiomas inglês, espanhol, francês e italiano. Ele foi desenvolvido anteriormente como atividade da unidade curricular Construção de Páginas Web III e está disponível no repositório de código mdccg/fotorama. Observação: "i15d" significa "internacionalized" e foi uma brincadeira minha. Vale destacar que o app não traduz o campo description, o qual vem da API. Esta implementação conta apenas com a tradução estática das grafias disponíveis no código-fonte.

Este foi o segundo 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 Linguagem de Programação IV.

As seguintes tecnologias foram utilizadas para desenvolver este app:

Os créditos pelas mídias utilizadas estão disponíveis aqui.

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

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.

[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.