Gist do projeto Trybetunes! Turma 29 - Tribo B

trybetunes-tribo-b.md

Projeto TrybeTunes 🎵

⚠️ ATENÇÃO: Esse checklist é apenas um template. Para replicar realize o fork deste gist! ⚠️

1. O que preciso saber para fazer o projeto? 🤔

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;

2. Que conteúdos revisar? 📚

2.1 - Aulas do Course

1. Front - Aula 4.1 - Ciclo de Vida de Componentes e Rotas no React - Ciclo de Vida de Componentes
2. Front - Aula 4.2 - Ciclo de Vida de Componentes e Rotas no React - Rotas

2.2 - Mentorias/Materiais complementares

• 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

2.3 - Conteúdos de soft skills

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

2.4 - Dicas da Turma / Instrução (Em constante atualização)

• 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

3. Checklist ✅

3.1 - Planejamento

• Abrir o PR para esse projeto
• Criar seu cronograma de planejamento, use como base a seção 3 e 4 de Frontend

3.2 - 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

3.3 - 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

4. Planejamento 📆

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 recebendo props;
  • Colocar a key sempre que estiver renderizando uma lista de elementos HTML no React;

5. Colinha marota sobre PropTypes 🤓

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!