fotorama
Sumário
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:
Papel | Tecnologia |
---|---|
Ambiente de execução | Node |
Linguagem de programação | TypeScript |
Ambiente de desenvolvimento | Vite |
Biblioteca de interface de usuário | React |
Base de dados | Unsplash |
Galeria
Como rodar
Pré-requisitos
Passo a passo
-
Clone o repositório de código em sua máquina;
-
Abra um shell de comando de sua preferência (prompt de comando, PowerShell, terminal etc.);
-
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
- 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.
-
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;
-
Copie e cole a chave de acesso1 do app criado no valor da variável de ambiente
VITE_UNSPLASH_ACCESS_KEY
; -
Finalmente, execute o seguinte comando para iniciar o app:
Para npm:
$ npm run dev
Para Yarn:
$ yarn dev
1 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.