Infelizmente a api no momento, não está mais disponibilizando nenhum dado para projetos pessoais, pretendo construir uma api para atender esse projeto
- Introdução
- Instruções para rodar localmente
- Detalhes da aplicação
- Tecnologias
- Testes
- Instruções para rodar os testes localmente
- APIs
- Deploy
Chameleon é uma aplicação que onde permite que a pessoa usuária obtenha informações sobre suas bandas favoritas, procurando promover a experiência de estar em um ambiente feito especialmente para a banda pesquisada. Também possui a funcionalidade de salvar bandas, tracks e albums em favoritos, sendo armazenados no local storage, tornando o acesso prático sem a necessidade de cadastro e login.
- clone o repositorio localmente
git clone git@github.com:Gonzagadavid/chameleon.git - entre na pasta clonada
cd chameleon - instale as dependencias
npm install - rode aplicação com o comando
npm start - aplicação será aberta em http://localhost:3000
A página inicial possui uma barra de busca, onde a pessoa usuária insere o nome da banda, cantor ou cantora que deseja obter informações. Quando possui favoritos, um seletor com os logos correspondentes será renderizado logo abaixo da barra de busca.
Caso a pessoa usuária digite o nome da banda incorretamente ou o nome de uma banda que não está no banco de dados uma mensagem será renderizada na tela.
A página details apresenta alguns detalhes iniciais da banda:
- Ano de formação;
- Estilo;
- Gênero musical;
- Pais;
- Quantidade de membros. Já oferecendo a opção de adicionar a banda em favoritos.
Essa página exibe a biografia da banda ou artista, podendo estar disponível em vários idiomas, para selecionar um dos idiomas um seletor é renderizado com as opções. Como imagem de fundo da biografia, fotos da banda são renderizadas dinamicamente em intervalos de 3 segundos.
Exibe os álbuns da banda ou artista ordenado pelo ano de lançamento, podendo ser filtrados pelo titulo, ao clicar em um dos álbuns, a pessoa usuária será redirecionada para a página de detalhes desse album.
Após a pessoa usuária escolher um album, será redirecionada para a página com detalhes desse album, contendo a historia do album, podendo estar disponível em vários idiomas, contendo um seletor para a escolha. Também é exibido as tracks desse album, podendo ser filtradas pelo nome, ao clicar em uma track, a pessoa usuária será redirecionada para a página dessa track.
Ao clicar em um track a pessoa usuária é redirecionada para uma página com a letra e o vídeo quando disponível, o vídeo por padrão acompanhara o scroll, porém a pessoa usuária tem a opção de deixá-lo na parte superior da página ou até mesmo fecha-lo através de butões na parte inferior do vídeo.
Exibe uma lista de todas as tracks que possuem vídeos, podendo ser filtradas, ao clicar em uma track, a pessoa usuária será direcionada para a página Track
Exibe as tracks e álbuns salvos em favoritos, sendo que ao ser clicado é redirecionado para a página album details ou a página track, podendo também ser filtrado a partir de seus títulos.
- React
- React Router
- Redux
- Redux Thunk
- React Select
- Testing Library
- MQ Polyfill
- UUID
- ESLint
Usando o biblioteca testing library, foi desenvolvido 100% de cobertura de testes unitários para a aplicação.
Para rodar os testes localmente basta usar o comando npm test e npm run coverage para a verificação da cobertura;
Depois de clonar o repositório e instalar as dependencias, basta rodar o comando npm test
Para o desenvolvimento desse aplicativo foi utilizado a combinação de duas excelentes APIs: The Audio DB e Lyrics OVH
Para o deploy da aplicação foi escolhido a Vercel, pois além de permitir o deploy gratuito de projetos pessoais, preserva o comportamento original da rotas dos projetos React usando React Router Dom.