Quando vi os requisitos para esse projeto, fiquei muito animado em mexer em API de músicas!!
Amo música!!!
Tive de criar uma aplicação para pesquisar e listar álbuns e músicas de várias bandas e artistas.
Nela possível até mesmo ouvir o preview de cada música. Além disso, você também poderá favoritar suas músicas preferidas.
Tudo isso é dividido em várias rotas, cada uma responsável por uma parte da funcionalidade.
A partir do projeto Trybe Tunes levei para todos os projetos quando necesário, criar o aqruvivo Routes.jsx.
Toda vez que tem uma mudança de rotas em qualquer projeto, crio um aruivo Routes. O código fica mais limpo e fácil de entender, crio mesmo quando há poucas rotas. Mas é questão de gosto!!! Aqui entrou React Router, uma biblioteca que permite organizar suas aplicações em rotas e fornece formas de navegar entre elas.
Outra peça importante de React que faltava no meu repertório e usei aqui, eram os Lifecycle methods.
Com eles você consegue fazer com que componentes realizem ações em determinados momentos de seu ciclo de vida, como fazer uma requisição a uma API. Foi um super aprendizado com a mão na massa!!🖥️💻
Sou um entusiasta de web design e fiquei encarregado de criar uma estilização atraente para este projeto incrível.
Nessa etapa, decidi explorar as possibilidades do Bootstrap, uma ferramenta poderosa para criar interfaces responsivas e com um visual profissional. Utilizei os recursos do Bootstrap para estruturar o layout do projeto e implementar componentes estilizados de forma rápida e eficiente.
Quero compartilhar um pouco sobre as cores escolhidas e como elas contribuem para a experiência visual da aplicação.
Ao criar a paleta de cores, levei em consideração a proposta de escutar uma música favorita de forma rápida e fácil.
Optei por utilizar as cores #20063b e #140d24, que trazem uma sensação de profundidade e mistério ao design.
A cor #20063b, um tom profundo de roxo, transmite uma atmosfera sofisticada e envolvente. Essa cor, combinada com o contraste do branco para o texto, cria uma legibilidade clara e agradável, garantindo que as informações essenciais se destaquem.
Já a cor #140d24, um tom de azul escuro, adiciona um toque de mistério e elegância ao design. Essa escolha de cor reflete a atmosfera emocionante e aconchegante que a música pode proporcionar. Além disso, o contraste entre o azul escuro e o roxo cria uma harmonia visual interessante e cativante.
Ao focar na estilização para funcionamento no desktop, com destaque para a experiência no mobile, estou priorizando a usabilidade e acessibilidade em dispositivos móveis, que são amplamente utilizados nos dias de hoje. A interface responsiva garantirá uma experiência fluida e agradável, independentemente do dispositivo utilizado.
Embora a estilização possa ser aprimorada para um visual ainda mais bonito, é importante ressaltar que a aplicação mantém sua integridade funcional e cumpre sua proposta de permitir que os usuários escutem suas músicas favoritas rapidamente.
Essa aplicação é 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;
Foi aquele up eu conseguir a nota máxima!!!