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
- 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 4.1 - Ciclo de Vida de Componentes e Rotas no React - Ciclo de Vida de Componentes
- Front - Aula 4.2 - Ciclo de Vida de Componentes e Rotas no React - Rotas
- Front - Aula 3.1 - Componentes, Estados e Formulários com React - Estado com React
- Front - Aula 3.2 - Componentes, Estados e Formulários com React - Forms com React
- Quer desenvolver mais a sua criatividade? Acesse aqui a recomendação que o Rodrigo Barcellos (tribo A) compartilhou com a turma sobre esse tema.
- Você inicia seu dia definindo prioridades e finaliza refletindo sobre aprendizados? Confira aqui um modelo de planejamento diário para você se inspirar e organizar seus dias de projeto.
- Que tal você começar a usar mais o LinkedIn e compartilhar suas conquistas na Trybe? Confira aqui as dicas da Forbes, divulgadas na última edição do Trybe News, de como fazer seus posts ganharem mais atenção nessa rede.
-
Academia de Front: Revisando React - @Danilo
-
Trabalhando com Map - @Saturnino
-
Trabalhando com Filter - @Danilo
-
Trabalhando com Reduce - @Willian
-
Trabalhando com Every e Some - @Saturnino
-
Trabalhando com Find - @Danilo
-
Trabalhando com Includes - @Moisés
-
Trabalhando com Bracket Notation - @Moisés
-
Trabalhando com BracketNotation e.dotNotation - @Ander
- Abrir o PR para esse projeto
- Criar seu cronograma de planejamento, use como base a seção 3 e 4 de Frontend
-
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
-
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
O projeto possui 11 requisitos obrigatórios, para ser aprovado dentro do prazo regular vai ser necessário fazer no mínimo 9 dos 11 requisitos obrigatórios.
- Dúvidas comuns - Se outras pessoas tiveram, é possível que você também tenha!
- Ao rodar o
npm install
,npm start
,npm test
, ter certeza que entrou na pasta correta do projeto; - Lembrar de definir os
propTypes
em cada componente que estiver recebendoprops
; - Colocar a
key
sempre que estiver renderizando uma lista de elementos HTML no React;
- Ao rodar o
import PropTypes from 'prop-types';
MeuComponente.defaultProps = {
minhaProp: '', // setando um valor tipo string default para a prop
};
MeuComponente.propTypes = {
minhaProp: PropTypes.string.isRequired, // sou um tipo string
minhaProp: PropTypes.number.isRequired, // sou um tipo numérico
minhaProp: PropTypes.boolean.isRequired, // sou um tipo boleano/lógico
minhaProp: PropTypes.func.shape({ // sou uma função
propFunc: PropTypes.number, // sou uma prop tipo numérica da função
propFunc: PropTypes.string, // sou uma prop tipo string da função
}).isRequired,
minhaProp: PropTypes.arrayof(PropTypes.string), // sou um array de string
arrayofObjects: PropTypes.arrayof(PropTypes.shape({ // sou um array de objeto
propObj: PropTypes.number, // sou um tipo numérico
propObj: PropTypes.string, // sou um tipo string
})).isRequired,
};
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!
O primeiro link de review é um complemento dessa aula aqui:
https://app.betrybe.com/learn/course/5e938f69-6e32-43b3-9685-c936530fd326/live-lectures/b6e3db43-574d-4011-a7cf-ee17a576dc85/recording/8e6d9777-0cef-4f5b-ba9c-d6ce912b9bfc