Para entregar o seu projeto você deverá criar um Pull Request neste repositório.

Lembre-se que você pode consultar nosso conteúdo sobre Git & GitHub e nosso Blog - Git & GitHub sempre que precisar!

Neste projeto você irá criar o TrybeTunes, uma aplicação capaz de reproduzir músicas das mais variadas bandas e artistas, criar uma lista de músicas favoritas e editar o perfil da pessoa usuária logada. Essa aplicação será capaz de:

• Fazer login;
• Pesquisar por uma banda ou artista;
• Listar os álbuns disponíveis dessa banda ou artista;
• Visualizar as músicas de um álbum selecionado;
• Reproduzir uma prévia das músicas deste álbum;
• Favoritar e desfavoritar músicas;
• Ver a lista de músicas favoritas;
• Ver o perfil da pessoa logada;
• Editar o perfil da pessoa logada;

Você pode acessar um protótipo no link abaixo:

https://www.figma.com/file/BDQgAJvOe4KNUjmrYh5t68/TrybeTunes-Figma

Neste projeto, verificamos se você é capaz de:

• Fazer requisições e consumir dados vindos de uma API;

• Utilizar os ciclos de vida de um componente React;

• Utilizar a função setState de forma a garantir que um determinado código só é executado após o estado ser atualizado

• Utilizar o componente BrowserRouter corretamente;

• Criar rotas, mapeando o caminho da URL com o componente correspondente, via Route;

• Utilizar o Switch do React Router

• Criar links de navegação na aplicação com o componente Link;

• Este projeto é individual;
• São 3 dias de projeto;
• Data para entrega final do projeto: 10/08/2022 14:00.

1. Clone o repositório

• Use o comando: git clone [email protected]:tryber/sd-023-b-project-trybetunes.git.
• Entre na pasta do repositório que você acabou de clonar:
  • cd sd-023-b-project-trybetunes

2. Instale as dependências

• npm install.

3. Crie uma branch a partir da branch master

• Verifique que você está na branch master
  • Exemplo: git branch
• Se não estiver, mude para a branch master
  • Exemplo: git checkout master
• Agora crie uma branch à qual você vai submeter os commits do seu projeto
  • Você deve criar uma branch no seguinte formato: nome-de-usuario-nome-do-projeto
  • Exemplo: git checkout -b joaozinho-sd-023-b-project-trybetunes

4. Adicione as mudanças ao stage do Git e faça um commit

• Verifique que as mudanças ainda não estão no stage
  • Exemplo: git status (deve aparecer listada a pasta joaozinho em vermelho)
• Adicione o novo arquivo ao stage do Git
  • Exemplo:
    • git add . (adicionando todas as mudanças - que estavam em vermelho - ao stage do Git)
    • git status (deve aparecer listado o arquivo joaozinho/README.md em verde)
• Faça o commit inicial
  • Exemplo:
    • git commit -m 'iniciando o projeto x' (fazendo o primeiro commit)
    • git status (deve aparecer uma mensagem tipo nothing to commit )

5. Adicione a sua branch com o novo commit ao repositório remoto

• Usando o exemplo anterior: git push -u origin joaozinho-sd-023-b-project-trybetunes

6. Crie um novo Pull Request (PR)

• Vá até a página de Pull Requests do repositório no GitHub
• Clique no botão verde "New pull request"
• Clique na caixa de seleção "Compare" e escolha a sua branch com atenção
• Coloque um título para a sua Pull Request
  • Exemplo: "Cria tela de busca"
• Clique no botão verde "Create pull request"
• Adicione uma descrição para o Pull Request e clique no botão verde "Create pull request"
• Não se preocupe em preencher mais nada por enquanto!
• Volte até a página de Pull Requests do repositório e confira que o seu Pull Request está criado

• Faça commits das alterações que você fizer no código regularmente

• Lembre-se de sempre após um (ou alguns) commits atualizar o repositório remoto

• Os comandos que você utilizará com mais frequência são:

  1. git status (para verificar o que está em vermelho - fora do stage - e o que está em verde - no stage)
  2. git add (para adicionar arquivos ao stage do Git)
  3. git commit (para criar um commit com os arquivos que estão no stage do Git)
  4. git push -u origin nome-da-branch (para enviar o commit para o repositório remoto na primeira vez que fizer o push de uma nova branch)
  5. git push (para enviar o commit para o repositório remoto após o passo anterior)

Para sinalizar que o seu projeto está pronto para o "Code Review", faça o seguinte:

• Vá até a página DO SEU Pull Request, adicione a label de "code-review" e marque seus colegas:

  • No menu à direita, clique no link "Labels" e escolha a label code-review;

  • No menu à direita, clique no link "Assignees" e escolha o seu usuário;

  • No menu à direita, clique no link "Reviewers" e digite students, selecione o time tryber/students-sd-023-b.

Caso tenha alguma dúvida, aqui tem um video explicativo.

Use o conteúdo sobre Code Review para te ajudar a revisar os Pull Requests.

Para garantir a qualidade do código, vamos utilizar neste projeto os linters ESLint e StyleLint. Assim o código estará alinhado com as boas práticas de desenvolvimento, sendo mais legível e de fácil manutenção! Para rodá-los localmente no projeto, execute os comandos abaixo:

  npm run lint
  npm run lint:styles

⚠️ PULL REQUESTS COM ERROS DE LINTER NÃO SERÃO AVALIADAS. ATENTE-SE PARA RESOLVÊ-LAS ANTES DE FINALIZAR O DESENVOLVIMENTO! ⚠️

Em caso de dúvidas, confira o material do course sobre ESLint e Stylelint.

Neste projeto utilizamos a React Testing Library (RTL) para execução dos testes.

Na descrição dos requisitos (logo abaixo) será pedido que seja feita a adição de atributos data-testid nos elementos HTML. Vamos a um exemplo para deixar evidente essa configuração: se o requisito pedir "crie um botão e adicione o id de teste (ou data-testid) com o valor my-action, você pode escrever:

<button data-testid="my-action"></button>

ou

<a data-testid="my-action"></a>

Ou seja, o atributo data-testid="my-action" servirá para o React Testing Library (RTL) identificar o elemento e, dessa forma, conseguiremos realizar testes focados no comportamento da aplicação.

ATENÇÃO! Muito cuidado com os nomes especificados nos requisitos! O conteúdo deve ser exatamente igual ao texto descrito no requisito.

Para verificar a solução proposta, você pode executar todos os testes localmente, basta executar:

npm test

Especialmente no início, quando a maioria dos testes está falhando, a saída após executar os testes é extensa. Você pode desabilitar temporariamente um teste utilizando a função skip junto à função it. Como o nome indica, esta função "pula" um teste:

it.skip('Será validado se existe uma página para rotas não mapeadas', () => {
  renderPath('/not-found');

  expect(screen.getByText('Página não encontrada')).toBeInTheDocument();
});

Uma estratégia é pular todos os testes no início e ir implementando um teste de cada vez, removendo dele a função skip.

Você também pode rodar apenas um arquivo de teste, por exemplo:

npm test 01.LoginPage.test.js

ou

npm test 01.LoginPage

Uma outra forma para driblar esse problema é a utilização da função .only após o it. Com isso, será possível que apenas um requisito rode localmente e seja avaliado.

it.only('Será validado se existe uma página para rotas não mapeadas', () => {
  renderPath('/not-found');

  expect(screen.getByText('Página não encontrada')).toBeInTheDocument();
});

⚠️ O avaliador automático não necessariamente avalia seu projeto na ordem em que os requisitos aparecem no readme. Isso acontece para deixar o processo de avaliação mais rápido. Então, não se assuste se isso acontecer, ok?

Nos últimos projetos, por mais que o app tenha sido desenvolvido utilizando múltiplos componentes, o que é uma boa prática, todas as funcionalidades eram acessadas ao mesmo tempo, no mesmo lugar, utilizando apenas uma URL (localhost:3000, normalmente). A medida que seus apps se tornarem maiores e mais complexos, isso se tornará inviável. Desta vez, as funcionalidades do app serão agrupadas e organizadas em rotas.

Uma rota define o que deve ser renderizado na página ao abrí-la. Cada rota está associada a um caminho. O caminho é a parte da URL após o domínio (nome do site, de forma simplificada). Por exemplo, em www.site.com/projetos/meu-jogo, o caminho é /projetos/meu-jogo. Até agora, todos os apps React que você desenvolveu possuíam somente uma rota, a raíz (/).

Outra diferença importante neste projeto em relação aos anteriores é que você irá consumir e enviar dados para APIs para pesquisar a banda ou artista, recuperar as músicas de cada álbum e salvar as músicas favoritas, além de editar as informações da pessoa logada. Dessa forma, você terá que lidar com requisições assíncronas e promises. Também deverá fazer uso dos métodos de ciclo de vida (lifecycle methods) e de estados para controlar o que é renderizado por seus componentes dependendo do momento em que as requisições se encontram.

Este repositório já contém um template com um App React criado. Após clonar o projeto e instalar as dependências, você deverá completar este template implementando os requisitos listados na seção Requisitos.

Também já existe no projeto um diretório src/services que contém os arquivos favoriteSongsAPI.js, searchAlbumsAPI.js, userAPI.js e musicsAPI.js. Esses arquivos serão responsáveis por lidar com as requisições simuladas que serão usadas durante o desenvolvimento. Entenda mais sobre eles abaixo:

{
  name: '',
  email: '',
  image: '',
  description: '',
}

Ao finalizar e submeter o projeto, não se esqueça de avaliar sua experiência preenchendo o formulário. Leva menos de 3 minutos!

FORMULÁRIO DE AVALIAÇÃO DE PROJETO

Você sabia que o LinkedIn é a principal rede social profissional e compartilhar o seu aprendizado lá é muito importante para quem deseja construir uma carreira de sucesso? Compartilhe esse projeto no seu LinkedIn, marque o perfil da Trybe (@trybe) e mostre para a sua rede toda a sua evolução.

• A rota / deve renderizar um componente chamado Login. Este componente deve ter uma div com o atributo data-testid="page-login" que envolva todo seu conteúdo;

• A rota /search deve renderizar um componente chamado Search. Este componente deve ter uma div que envolva todo seu conteúdo e ter o atributo data-testid="page-search";

• A rota /album/:id deve renderizar um componente chamado Album. Este componente deve ter uma div que envolva todo seu conteúdo e ter o atributo data-testid="page-album";

• A rota /favorites deve renderizar um componente chamado Favorites. Este componente deve ter uma div que envolva todo seu conteúdo e ter o atributo data-testid="page-favorites";

• A rota /profile deve renderizar um componente chamado Profile. Este componente deve ter uma div que envolva todo seu conteúdo e ter o atributo data-testid="page-profile";

• A rota /profile/edit deve renderizar um componente chamado ProfileEdit. Este componente deve ter uma div que envolva todo seu conteúdo e ter o atributo data-testid="page-profile-edit";

Para qualquer outra rota não mapeada, deve ser renderizado um componente chamado NotFound. Este componente deve ter uma div que envolva todo seu conteúdo e ter o atributo data-testid="page-not-found";

• A rota / é uma rota existente e que renderiza um componente com o data-testid com valor page-login;

• A rota /search é uma rota existente e que renderiza um componente com o data-testid com valor page-search;

• A rota /album/:id é uma rota existente e que renderiza um componente com o data-testid com valor page-album;

• A rota /favorites é uma rota existente e que renderiza um componente com o data-testid com valor page-favorites;

• A rota /profile é uma rota existente e que renderiza um componente com o data-testid com valor page-profile;

• A rota /profile/edit é uma rota existente e que renderiza um componente com o data-testid com valor page-profile-edit;

• Existe uma página para rotas não mapeadas e que renderiza um componente com o data-testid com valor page-not-found;

• Você deve criar um campo para que a pessoa usuária insira seu nome. Este campo deverá ter o atributo data-testid="login-name-input".

• Crie um botão com o texto Entrar. Este botão deverá ter o atributo data-testid="login-submit-button".

• O botão para entrar só deve estar habilitado caso o nome digitado tenha 3 ou mais caracteres.

• Ao clicar no botão Entrar, utilize a função createUser da userAPI para salvar o nome digitado. A função createUser espera receber como argumento um objeto com as informações da pessoa:

createUser({ name: "Nome digitado" });

💡 Obs: Você verá nos requisitos mais a frente que você poderá passar outras informações para a createUser, mas não se preocupe com isso agora. Por enquanto você pode passar somente um objeto com a propriedade name.

• Enquanto a informação da pessoa usuária é salva, uma mensagem com o texto Carregando... deve aparecer na tela. 💡 Dica: Você precisará dessa mensagem várias vezes no futuro, então é uma boa ideia criar um componente para ela 😉

• Após a informação ter sido salva, faça um redirect para a rota /search.

• Ao navegar para a rota /, o input e o botão especificados estão presentes;

• O botão só é habilitado se o input de nome tiver 3 ou mais caracteres;

• Ao clicar no botão habilitado, a função createUser da userAPI é chamada;

• Ao clicar no botão, a mensagem Carregando... é exibida e após a resposta da API acontece o redirecionamento para a rota /search.

• Crie esse componente com a tag header envolvendo todo seu conteúdo e com o atributo data-testid="header-component";

• Renderize o componente de cabeçalho nas páginas das rotas /search, /album/:id, /favorites, /profile e /profile/edit;

• Utilize a função getUser da userAPI para recuperar o nome da pessoa logada e exiba essa informação na tela. Você pode usar qualquer tag HTML que faça sentido, desde que ela tenha o atributo data-testid="header-user-name".

• Enquanto estiver aguardando a resposta da getUser, exiba apenas a mensagem de Carregando....

• O componente Header é renderizado na página /search;

• O componente Header é renderizado na página /album/:id;

• O componente Header é renderizado na página /favorites;

• O componente Header é renderizado na página /profile;

• O componente Header é renderizado na página /profile/edit;

• A função getUser é chamada ao renderizar o componente;

• A mensagem de Carregando... é exibida ao renderizar o componente e é removida após o retorno da API;

• O nome da pessoa usuária está presente na tela após o retorno da API.

• O link que redireciona para a página de pesquisa deve estar dentro do componente Header e precisa possuir o atributo data-testid="link-to-search".

• O link que redireciona para a página de músicas favoritas deve estar dentro do componente Header e possuir o atributo data-testid="link-to-favorites".

• O link que redireciona para a página de exibição de perfil deve estar dentro do componente Header e precisa possuir o atributo data-testid="link-to-profile".

• Os links de navegação são exibidos na página de pesquisa;

• A navegação entre a página de pesquisa e a página de músicas favoritas ocorre corretamente;

• A navegação entre a página de pesquisa e a página de exibição do perfil ocorre corretamente;

• Os links de navegação são exibidos na página do álbum;

• A navegação entre a página do álbum e a página de pesquisa ocorre corretamente;

• A navegação entre a página do álbum e a página de músicas favoritas ocorre corretamente;

• A navegação entre a página do álbum e a página de exibição do perfil ocorre corretamente;

• Os links de navegação são exibidos na página de músicas favoritas;

• A navegação entre a página de músicas favoritas e a página de pesquisa ocorre corretamente;

• A navegação entre a página de músicas favoritas e a página de exibição perfil ocorre corretamente;

• Os links de navegação são exibidos na página de exibição do perfil;

• A navegação entre a página de exibição do perfil e a página de pesquisa ocorre corretamente;

• A navegação entre a página de exibição do perfil e a página de músicas favoritas ocorre corretamente;

• Os links de navegação são exibidos na página de edição do perfil;

• A navegação entre a página de edição do perfil e a página de pesquisa ocorre corretamente;

• A navegação entre a página de edição do perfil e a página de músicas favoritas ocorre corretamente;

• A navegação entre a página de edição do perfil e a página de exibição do perfil ocorre corretamente.

• Crie um campo para pessoa digitar o nome da banda ou artista a ser pesquisada. Esse campo deve ter o atributo data-testid="search-artist-input".

• Crie um botão com o texto Pesquisar. Esse botão deve ter o atributo data-testid="search-artist-button".

• O botão só deve estar habilitado caso o nome do artista tenha 2 ou mais caracteres.

• Ao navegar para a rota /search, o input e o botão estão presentes na tela;

• O botão está habilitado somente se o input de nome tiver 2 ou mais caracteres.

• Ao clicar em pesquisar, a requisição é feita usando a searchAlbumsAPI;

• Ao clicar no botão, o texto Resultado de álbuns de: <artista> aparece na tela;

• Ao receber o retorno da API, os álbuns são listados na tela;

• Caso a API não retorne nenhum álbum, a mensagem Nenhum álbum foi encontrado é exibida;

• Existe um link para cada álbum listado que redirecione para a rota /album/:id.

• Ao entrar na página, faça uma requisição utilizando a função getMusics do arquivo musicsAPI.js. Lembre-se que essa função espera receber uma string com o id do álbum.

• Exiba o nome da banda ou artista na tela. Você pode usar qualquer tag HTML que faça sentido, desde que ela tenha o atributo data-testid="artist-name".

• Exiba o nome do álbum e nome da banda ou artista na tela. Você pode usar qualquer tag HTML que faça sentido, desde que ela tenha o atributo data-testid="album-name".

• Liste todas as músicas do álbum na tela. Para isso, crie um componente chamado MusicCard que deverá exibir o nome da música (propriedade trackName no objeto recebido pela API) e um player para tocar o preview da música (propriedade previewUrl no objeto recebido pela API).

💡 Dica: Lembre-se que o retorno da função getMusics, quando encontra as informações, é um array onde o primeiro elemento é um objeto com informações do álbum e o restante dos elementos são as músicas do álbum.

Para tocar o preview, você deve usar a tag audio do próprio HTML. Sua implementação é assim:

<audio data-testid="audio-component" src="{previewUrl}" controls>
  <track kind="captions" />
  O seu navegador não suporta o elemento{" "} <code>audio</code>.
</audio>

Importante: lembre-se de colocar o atributo data-testid="audio-component" na tag audio de cada música listada.

• Se o serviço de musicsAPI está sendo chamado;

• Se o nome da banda ou artista e o nome do álbum são exibidos;

• Se todas músicas retornadas pela API são listadas.

• Existe um checkbox para cada música da lista;

• A função addSong é chamada quando algum checkbox é clicado;

• A mensagem Carregando... é exibida após clicar no checkbox e removida depois do retorno da API.

• Ao entrar na página, utilize a função getFavoriteSongs da favoriteSongsAPI para recuperar a lista de músicas favoritas.

• Enquanto aguarda a resposta da API, exiba a mensagem Carregando....

• A lista recebida pela função getFavoriteSongs deve ser salva no estado da sua aplicação.

• Após receber o retorno da função getFavoriteSongs, as músicas que já foram favoritadas devem estar com o checkbox marcado como checked.

  

• A requisição para getFavoriteSongs é feita para recuperar as músicas favoritas;

• Ao entrar na página, o número de checkboxes marcados como checked é correspondente ao número de músicas que já foram favoritadas;

• Ao favoritar uma música, aguarde o retorno da função addSong (que já foi implementada no requisito 8) e utilize a função getFavoriteSongs da favoriteSongsAPI para recuperar a lista de músicas favoritas.

• Enquanto aguarda a resposta da API, exiba a mensagem Carregando....

• Atualize o estado da aplicação com o valor recebido pelo retorno da função getFavoriteSongs.

• Após receber o retorno da função getFavoriteSongs, as músicas que já foram favoritadas devem estar com o checkbox marcado como checked.

• A requisição para getFavoriteSongs é feita após favoritar uma música;

• O número de checkboxes marcados como checked aumenta quando um checkbox é clicado.

• Enquanto aguarda o retorno da função removeSong, renderize a mensagem de Carregando....
  

• A função removeSong é chamada quando algum checkbox que já esteja marcado é clicado;

• A mensagem Carregando... é exibida após clicar no checkbox e removida depois do retorno da API;

• O número de checkboxes marcados como checked diminui quando um checkbox marcado é clicado;

• Ao entrar na página, utilize a função getFavoriteSongs da favoriteSongsAPI para recuperar a lista de músicas favoritas.

• Enquanto aguarda a resposta da API, exiba a mensagem Carregando....

• Após receber o retorno da função getFavoriteSongs, utilize o componente MusicCard para renderizar a lista de músicas favoritas.

• Nesta página deve ser possível desfavoritar as músicas. Para isso utilize a função removeSong da favoriteSongsAPI.

• Enquanto aguarda a resposta da API, exiba a mensagem Carregando....

• Após remover a música, atualize a lista usando a função getFavoriteSongs. Lembre-se de exibir a mensagem Carregando... enquanto aguarda o retorno da API.

  

• A requisição para getFavoriteSongs é feita para recuperar as músicas favoritas;

• É exibida a lista de músicas favoritas;

• A lista de músicas favoritas é atualizada ao remover uma música da lista.

• Utilize a função getUser da userAPI para recuperar as informações da pessoa logada.

• Enquanto aguarda a resposta da API, exiba a mensagem Carregando....

• Após receber o retorno da getUser, exiba o nome, o email, a descrição e a imagem da pessoa logada.

• Para exibir a imagem, use a tag HTML img com o atributo data-testid="profile-image";

• Crie um link que redirecione para a página de edição de perfil (rota /profile/edit). Este link deve ter o texto Editar perfil.

  

• A API getUser é usada para recuperar as informações da pessoa logada;

• As informações da pessoa logada são exibidas na tela;

• Foi criado um link para a rota de edição de perfil com o texto Editar perfil;

• Ao clicar no link Editar perfil, a navegação acontece corretamente.

• É feita a requisição para getUser para recuperar as informações da pessoa logada;

• O formulário é renderizado já preenchido com as informações da pessoa logada;

• É possível alterar os valores dos campos;

• O botão salvar é habilitado somente se todos os campos estiverem válidos;

• As informações são enviadas usando a API updateUser;

• Após salvar as informações a pessoa é redirecionada para a página de exibição de perfil.