TrybeTunes 🎧

📄 Sobre:

Projeto desenvolvido durante o módulo de front-end do curso de desenvolvimento web da Trybe.

Nesse projeto foi desenvolvida uma aplicação para ouvir músicas, o projeto conta com diversas rotas que levam o usuário a áreas distintas na aplicação.

Nessas áreas o usuário poderá:

• Realizar 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

Todos os dados utilizados das musicas foram obtidos através da API da Apple Music.

Desempenho

Aprovado com 100% de desempenho em todos os requisitos

Requisitos

Requisitos Obrigatórios:
1. Crie as rotas necessárias para a aplicação
2. Crie um formulário para identificação
3. Crie um componente de cabeçalho
4. Crie os links de navegação no cabeçalho
5. Crie o formulário para pesquisar artistas
6. Faça a requisição para pesquisar artistas
7. Crie a lista de músicas do álbum selecionado
8. Crie o mecanismo para adicionar músicas na lista de músicas favoritas
9. Faça a requisição para recuperar as músicas favoritas ao entrar na página do Álbum
10. Faça a requisição para recuperar as músicas favoritas e atualizar a lista após favoritar uma música
11. Crie o mecanismo para remover músicas na lista de músicas favoritas

Requisitos bônus:
12. Crie a lista de músicas favoritas
13. Crie a exibição de perfil
14. Crie o formulário de edição de perfil

Imagens do projeto

Tela de login:

Tela de busca:

Tela de albúms:

Tela de favoritos:

Tela de perfil:

👨‍💻 Clique aqui para acessar o projeto em seu navegador

⚙️ Execução

Faça o clone deste repositório com o seguinte comando:

    git clone [email protected]:joaoespacheco/Trybe-Project-14-trybetunes.git

Dentro da pasta raiz do projeto, instale as dependências com o seguinte comando:

    npm install

Inicie a aplicação com o comando abaixo:

    npm start

🤹🏽 Habilidades Desenvolvidas:

• Desenvolver uma aplicação react
• Utilizar cilos de vida de um componente
• Fazer requisições e consumir dados vindos de uma API
• Utilizar React Router
• Criar múltiplas páginas e rotas

🧰 Ferramentas:

• HTML
• CSS
  • SASS
• JavaScript
• React
  • React Router

📝 Desenvolvido por:

• João Emanuel Soares Pacheco