image

Acesse bootcamps ilimitados e +650 cursos pra sempre

60
%OFF
Article image
Rafael Biasiolo
Rafael Biasiolo13/09/2024 14:15
Compartilhe

Karaoke Search

  • #jQuery
  • #Bootstrap
  • #API Rest

Peguei um código mais antigo para refatorar e a bagunça estava impressionante. Só Deus sabia o que estava acontecendo! 😂

Foi mais fácil refazer, aplicando novas tecnologias que aprendi e consegui um resultado mais organizado, com sentimento de evolução.

Tentei melhorar a interface adicionando algumas bibliotecas, remodelação de layout, botão dark mode, entre outras coisas.

Modifiquei o método de consumo da api YouTube Data, conseguindo uma busca mais eficiente, além de configurações de SEO, Analitycs, tradução para o Inglês (quero testar se roda fora) e demais boas práticas.

Stack:

HTML

CSS

Sass

Bootstrap

Jquery

Parcel

Canva

O resultado foi um novo site, Karaoke Search:

https://karaoke-search-six.vercel.app/

Quem puder por favor testar e enviar o feedback, agradeço!

Espero que gostem.

Compartilhe
Comentários (4)
Ronaldo Schmidt
Ronaldo Schmidt - 13/09/2024 15:23

Obrigado pelo seu feedback amigo.

Em relação as cores senti um ar meio :"Zangief" se me entende o que quero dizer.

Mas seu site ficou realmente bom e divertido!

Excelente jornada e sucesso nessa empleitada!

VJ

Valter Júnior - 13/09/2024 14:53

achei a proposta muito interessante, botei dois vídeos pra rodar e me diverti um pouco kssks. Muito bom Rafael!

Rafael Biasiolo
Rafael Biasiolo - 13/09/2024 14:42

Boas ideias!

Vou aderir aos efeitos sonoros.


Quanto as cores, a intensidade é proposital. Quero fazer um teste para ver se consigo com que o site tenha público na Ásia e segui uma estética de lá.


Na versão anterior, o consumo da cota de api era muito rápido e eu também ainda não tinha recursos para melhorar:

https://best-karaoke.vercel.app/


Obrigado pelo feedback!

Ronaldo Schmidt
Ronaldo Schmidt - 13/09/2024 14:36

Olá amigo!

Realmente impressionante!

Muito bom mesmo.

Muito bem feito!

Parabéns pela sua dedicação.

Pontos que na minha opinião podem melhorar:

  • utilizaria o conceito mobile-first e ajustaria a responsividade
  • Cuidado com a escolha das fontes e cores(acessibilidade)
  • Senti a falta de efeitos sonoros(bg music,botoes,etc)
  • Um background não estatico-(um videoclip de fundo por exemplo)
  • poderia criar uma api fake(mocked) com algumas musicas...

Eu recomendaria o coolors para ajudar na escolha das cores - link : https://coolors.co/

Mas esse é o caminho , muito bom.

Poderia postar as versoes anteriores e pós para fazermos uma comparação.

Ansioso por uma nova versão.

Obrigado por compartilhar.