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. Para isso, disponibilizamos este protótipo do Figma para lhe ajudar!
- 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;
- Front - Aula 3.1 - Rotas no React
- Front - Aula 3.1 - Rotas no React - Outlet
- Front - Aula 3.2 - useEffect
- Front - Aula 3.3 - Clone Twitter
- Abrir o PR para esse projeto
- Criar seu cronograma de planejamento, use como base a seção 2 e 3 de Frontend
- Você deve utilizar o BrowserRouter pra criar as rotas da sua aplicação e cada rota deverá renderizar um componente específico.
- Você pode mudar o nome dos componentes se desejar, este é apenas um exemplo.
- A rota / irá renderizar a página de Login.
- A rota /search irá renderizar a página de Search.
- A rota /album/:id irá renderizar a página de Album.
- A rota /favorites irá renderizar a página de Favorites (bônus).
- A rota /profile irá renderizar a página de Profile (bônus).
- A rota /profile/edit irá renderizar a página de ProfileEdit (bônus).
- Qualquer outra rota irá renderizar a página de NotFound.
-
1. Crie um formulário para identificação
-
2. Crie o formulário para pesquisar artistas
-
3. Crie a lista de músicas do álbum selecionado
-
4. Crie um componente de cabeçalho
-
5. Crie o mecanismo para adicionar músicas na lista de músicas favoritas
-
6. Faça a requisição para adicionar e remover as músicas favoritas ao clicar no checkbox
-
7. Faça a requisição para recuperar as músicas favoritas
-
8. Crie a lista de músicas favoritas
-
9. Crie a exibição de perfil
-
10. Crie o formulário de edição de perfil
O projeto possui 5 requisitos obrigatórios, para ser aprovado dentro do prazo regular vai ser necessário fazer no mínimo 4 dos 5 requisitos obrigatórios.
- Dúvidas comuns - Se outras pessoas tiveram, é possível que você também tenha!
- Ao rodar o
npm install,npm run dev,npm test, ter certeza que entrou na pasta correta do projeto; - Colocar a
keysempre que estiver renderizando uma lista de elementos HTML no React;
- Ao rodar o
Ao final desse projeto, você vai ter uma aplicação muito estruturada usando boas práticas de desenvolvimento e que pode (e deve) ser compartilhado com muito orgulho no seu Linkedin. Portanto, vamos com tudo para esse projeto!