macalsr/photo-album-api

Projeto Front-end - Consumindo uma API REST com Angular

Este projeto Front-end foi desenvolvido como parte de um teste prático, com o objetivo de consumir uma API REST e implementar algumas funcionalidades específicas. Foi desenvolvido utilizando as boas práticas do Angular, incluindo a utilização da biblioteca de componentes do Angular Material.

Teste

O teste consistia nos seguintes requisitos:

1. Criar uma tela de autenticação com Login, salvando as credenciais no localStorage.
2. Mostrar os álbuns da rota: https://jsonplaceholder.typicode.com/albums.
3. Mostrar 1 miniatura por álbum, que seria a primeira foto de dentro do álbum. Ao clicar no álbum, mostrar as 10 primeiras fotos de cada álbum, disponíveis em https://jsonplaceholder.typicode.com/photos.
4. Ao finalizar, publicar o código no GitHub pessoal e enviar o link.

Funcionalidades Implementadas

• Tela de autenticação com login, com as credenciais salvas no localStorage.
• Exibição dos álbuns obtidos da API https://jsonplaceholder.typicode.com/albums.
• Exibição de uma miniatura por álbum, usando a primeira foto de dentro do álbum.
• Ao clicar em um álbum, são mostradas as 10 primeiras fotos do álbum, obtidas da API https://jsonplaceholder.typicode.com/photos.

Credenciais de Acesso

Para acessar o projeto, utilize as seguintes credenciais:

• Login: admin@admin.com
• Senha: 123

Publicação do Código

O código foi publicado em um repositório pessoal no GitHub, disponível no seguinte link: https://github.com/macalsr/photo-album-api.

Instruções de Uso

1. Clone o repositório do projeto.
2. Instale as dependências utilizando o comando npm install.
3. Inicie o servidor de desenvolvimento com o comando ng serve.
4. Acesse a aplicação em seu navegador através do endereço http://localhost:4200.

Tecnologias Utilizadas

• Angular: Framework utilizado para o desenvolvimento do Front-end.
• Angular Material: Biblioteca de componentes utilizada para a interface do usuário.
• TypeScript: Linguagem de programação utilizada para o desenvolvimento do Angular.
• HTML e CSS: Utilizados para a estruturação e estilização da aplicação.

Considerações Finais

Este projeto foi desenvolvido de acordo com os requisitos fornecidos, seguindo as melhores práticas do Angular e utilizando as funcionalidades do Angular Material.