DESAFIO TEIA 2024

Pesquisador de Album de Fotos

Um aplicativo para exibit e buscar fotos.

🚧 trabalho em progresso 🚧.

Features

• Realize pesquisas de maneira fácil com a barra de pesquisa
• Ordene o resultado por título
• Clique e amplie a imagem escolhida
• Digite o nome do grupo que desejar, podendo inclusive filtrar incluindo multiplos grupos
• Navegue pelas imagens utilizando a paginação
• Compatibilidade maximizada em todos os dispositivos modernos
• Uso do pDefer - uma diretiva do PrimeNG usada para adiar o carregamento de conteúdo até que ele seja rolado para dentro da área visível da página (viewport). Isso pode ser útil para melhorar o desempenho de aplicações que têm grandes quantidades de dados para exibir, pois permite que o conteúdo seja carregado dinamicamente conforme necessário.
• Standalone component (Novo, Angular 17) - pode ajudar a otimizar o desempenho ao carregar os componentes apenas quando são necessários, reduzindo o tamanho inicial do pacote da aplicação.

LIVE DEMO

Dependências

Frontend

• Angular 17
• Primeng 17.12.0
• PrimeIcons
• Tailwindcss

Este projeto foi gerado com Angular CLI versão 16.0.0.

Instalando as dependências

Execute npm install

Servidor de desenvolvimento

Execute ng serve para um servidor de desenvolvimento. Navegue para http://localhost:4200. O aplicativo será recarregado automaticamente se você alterar algum dos arquivos de origem.

Codesandbox

https://codesandbox.io/p/devbox/elegant-voice-zq5wvl

Andaime de código

Execute ng generate component nome-do-componente para gerar um novo componente. Você também pode usar ng generate directiva|pipe|service|class|guard|interface|enum|module.

Construir

Execute ng build para construir o projeto. Os artefatos de construção serão armazenados no diretório dist/.

Executando testes unitários

Execute ng test para executar os testes de unidade via Karma.

Executando testes ponta a ponta

Execute ng e2e para executar os testes ponta a ponta através de uma plataforma de sua escolha. Para usar este comando, você precisa primeiro adicionar um pacote que implemente recursos de teste ponta a ponta.

Mais ajuda

Para obter mais ajuda sobre o Angular CLI, use ng help ou confira a página Visão geral do Angular CLI e referência de comandos.