Recriei a interface do Spotify usando Tailwind

→ QUIZ: TESTE SEUS CONHECIMENTOS EM REACT (GRÁTIS): rseat.in/edVSj...
Desde que o Tailwind virou a ferramenta padrão de estilização do Next.Js, gostar ou odiar Tailwind é quase um assunto delicado
Acontece que independente da sua opinião a respeito disso, essa é a nossa realidade no momento 😅
E pra colocar na prática e mostrar um pouco das possibilidades que esse novo padrão pode fazer para o nosso código, Diegão decidiu voltar às raízes e clonar a interface do Spotify (versão web) usando Tailwind.
E aí, bora codar?
-----
Conecte-se a 500mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com...
Cadastre-se na nossa plataforma: app.rocketseat...
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
TikTok: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat

[@teliiz]

Em uma hora o cara faz o layout do Spotify, em uma hora não consigo nem iniciar um projeto kkkk

[@AndreRds]

😂 dois mano kkk

[@beneditonamburete1218]

Três 😭

[@tiagopaees]

Kkkkkk

[@emersontrindade299]

Existe todo um planejamento antes e muitas das vezes já fez o projeto antes tbm..

[@sergio.808s]

não se compare mano, estude e tenho certeza que no seu tempo você tbm vai conseguir. E tipo foi uma hora pq ele reescreveu muito código poderia até ser menos kkkkk o cara é um mostro

[@tascintra]

32:00 quem quiser colocar o ícone de play preenchido pode usar a propriedade fill do svg, ficando

[@JonatasBorge]

Nem todo herói usa capa

[@gabrielantunes455]

Fazer responsivo é uma boa hein. Queria ver como iria ficar a organização do Tailwind a medida que vamos adicionando transições, animações e responsividade.

[@onildo_costa]

Cara, o Diego consegue fazer tudo parecer tão fácil. Incrível isso bixo.

[@pablogomes6633]

Tenho a mesma sensação... Diego é d+

[@onildo_costa]

@Wander Hungerbühler Experiência e conhecimento é tudo né bixo? Espero um dia chegar perto disso. Parabéns pelo seu trampo também!

[@onildo_costa]

@Wander Hungerbühler obrigado pelo incentivo!

[@JohnEsrom]

A didatica dele é algo incrível

[@DailyNewsInternationalShorts]

ele ja tem o roteiro pronto nao se engana nao man

[@maykbrito]

O vídeo nem começou e eu já tô no hype!! Diegão é MONSTEEERRRR

[@rapaduraman3543]

Fake

[@filipelperes]

Bom dia, qual a distro linux que vc usa?

[@Id_Mata]

kmk Mayke... Da uma luz a]i de como colocar o project no github pages.

[@GamersRoomful]

Inclusive tomou um monster pra fazer o conteúdo 🤣🤣🤣🤣🤣

[@odeisouza]

Para fazer o nav possuir o texto _Playlist _ com o valor do número incremental, da para usar o emmet: nav>a{Playlist $}*5 Você troca o 5 no final para quantas tags anchor você irá querer

[@aryelramos2260]

Perfeito, assisti como se fosse um filme. Devia virar playlist, seria um boracodar em react...

[@ojoaomarcelo]

Up

[@Luccas_Alves]

Up pra krl

[@peterpontocom]

#Boracodar em outras linguagens seria legal

[@Ramon_Oyster_Cult]

@@peterpontocom Web só tem JavaScript de linguagem.

[@Ramon_Oyster_Cult]

E eu sei que tem outras que estão chegando.

[@userct]

a quantidade de lixo e poluicao no codigo gerado pelo tailwind e incrivelmente grande

[@walkdead94]

Percebi que q melhor maneira de aprender a estilizar frontend é assistindo outras pessoas fazendo e pegando as sacadas que eles tem

[@Gus7Dev]

Exatamente! Ver vídeo explicando as coisas não vale nada praticamente.

[@wChickenLittle]

Responsividade e adição da troca de temas light/dark seria show também :D

[@fabioreichertleite248]

para preencher o botão de play de preto com o lucida se faz assim> e tirei o text-color do button

[@yagosilva9189]

Cara sou apenas eu ou todo mundo tem um bloqueio com o tailwind? ele me parece tão gambiarra.

[@Matheus_1582]

As bolinhas coloridas é da Apple

[@iuritorres]

esse terminal ai tem pra windows n? que coisa linda

[@caiovitor2164]

Aula magnífica!!! Por favor, traga a parte 2, aplicando a responsividade e a mudança de cor no background.

[@LuisSilva-eh5is]

Saudades do Ui Clone 😢😢 #VoltaRodão

[@MatheusPereira-nn9dj]

Felipe Fernandes em 2024 : `` faaala pessoal hoje no video iremos recriar a realidade usando Tailwind`` . Conteúdo da Rocket é incrivel demais 🔥🔥🔥

[@juliocesarcandeia7952]

Gostei muito, faz mais vídeos neste estilo, tô começando ver front agr e achei muito bom!!!!

[@CSouSa0210]

Conheci o tailwind em alguns meses e foi uma das melhores coisas velho, trabalhar com css não é difícil, mas acaba sendo um saco e tailwind é super automático velho...

[@KlausThePuss]

para quem quer ver como fazer a parte de validação, api, database, routes, fetch e etc (backend), so ir ver no canal: "Code With Antonio", foi ele que elaborou esse projeto.

[@rafael141ful]

Muito bom! Para melhorar as classes repetitivas, eu criaria uma classe no style "scoped" e usaria o @apply , sendo assim, o código fica mais limpo e fácil para manutenção. Ex: .titleSectionAlbuns { @apply text-md font-semibold; } E por aí vai...

[@egbertodeoliveira7524]

Vlw Diego, fui demitido a 1 mes e hoje foi meu último dia na empresa, preciso de renovar comecei a estudar Next essa semana já vi todo os vídeo seu falando do next13 e tailwind, e vc manda um dessa pra criar um portfólio, vlw irmão abraço!! 🎉🎉

[@Manoelps]

Não sei se conhece, mas este canal pode te ajudar: www.youtube.com/@devjunioralves 👍

[@braddoidao8818]

Faaala Diegão! Faz pra nós pooooooor favor um tutorial de configurações de ESLint e Prettier pro Next com o Tailwind, com formatação do código, quebra de linha e tudo mais 🙌🏻

[@LucasFilipeSilvaSouza]

Pô Diegão seria muito da hora fazer algum conteúdo como esse, por exemplo, utilizndo Electron, dei uma pesquisada sobre Electron + React no KZbin e só achei conteúdo mais antigo.

[@nicolasmoises2720]

Verdade cara

[@dieegosf]

Sem querer fazer jabá, mas já fazendo kkkk tem um curso de Electron + React da Rocket que pode ser adquirido individualmente :)

[@vitorhallmonteiro]

Queria ver como fica o responsivo com temas light e dark mais o uso de @apply. Parabéns pelo video!!!

[@TechPovo]

Parece que ele não está centralizado mas ele está centralizado ou ele realmente não está centralizado kkkk a vida de um DEV!!

[@jeffreyblanc8683]

Enpaquei logo no primeiro comando, quando rodo pnpm dev dá o erro: ReferenceError: Request is not defined. Alguém sabe como corrigir?

[@PRAlves]

vídeo top, não conhecia o tailwind. Pode continuar essa interface? obrigado

[@rfateixeira]

Sei que o video ja faz 1 ano, mas fiquei pensando e gostaria de um resposta. Daria pra separar em componentes cada parte do codigo? por ex: cada uma daquelas musicas, ao inves de copiar o codigo varias vezes, utilizar o mesmo codigo e puxar do banco de dados as informações de cada musica para alterar no visual

[@joao_jensen]

Alguem por favor me diz que eu não sou o unico louco que usar % e vmin nos estilos em Tailwind. Eu tenho ódio de usar px por que dificulta demais na hora de trazer responsividade.

[@ViniciusGM18]

Faz a continuação pelo amor de Deuss🙏🙏🙏

[@aiandraalvesmeira1039]

Eu amo Taiilwind, meu novo queridinhoo. Arrasou com o vídeo!! E quem tem problema com toque no código, podemos componentizar e deixar o HTML mais limpo...

[@viniclunc8553]

É show de bola, mas em 3min tu faz o mesmo com o Chatgpt. O FrontEnd acabou! E isso é bom

[@miguelpradow]

Como fazer para conseguir mudar o tamanho da sidebar?

[@jeffgrassine]

Aual Incrivél! Seria muito bom continuar deixando ele recursivo.

[@alchemistdrops]

o Diegao, posso fazer a mesma aula com Elixir no meu canal?

[@TWtutoriais]

47:17 Eu gritando aqui kkkkkkkk coloca um burg

[@kleberaugus]

Objetividade brutal, assim que eu gosto.

[@a_fabrica_da_curiosidade]

conteúdo top, diegão monstro faz parecer tão simples 😂 continuemm!! além da responsividade poderia torná-lo dinâmico

[@snarloff]

Qual os ícones Diego? E o tema utilizado... Excelente vídeo!

[@dieegosf]

Symbols e Rosé Pine

[@matheusleao5084]

Diego consegue fazer com que as coisas pareçam fáceis hahah é absurdo. Parabéns pelo conteúdo

[@conpororo]

Tailwind e um bootstrap avanzado

[@wandersonbarbosa]

Olha fiz todos os passos e gostei bastante do resultado, eu gostaria mesmo que continuássemos a melhora-lo tipo uma parte 2.

[@predator8166]

Pausa no video para ouvir Foo Fighters... Pronto!

[@suemareverton7756]

Querem judiar dos haters de tailwind né? 😂

[@alineeisraelporai]

Saudades UI clone

[@cristianosoares5479]

Opa, já no aguardo pro próximo vídeo abordando responsividade no Tailwind, uma dúvida no caso agora o padrão recomendado pela doc do react é usar já de cara um framework tipo next? (ou até já criar com o next)

[@dieegosf]

Isso

[@matheusfellipe6354]

Alguém sabe a extensão que ele está usando?

[@saulolauers5415]

Alguém sabe o modelo desse headset?

[@JeongLee-b5v]

que fonte family está usando?

[@IsraelHam]

Alguém sabe que tema ele usa no vscode ?

[@brennooliveira5052]

Eu ficaria tão feliz se ele usasse o js em vez de ts

[@kaique_yamamoto]

#voltauiclone - isso faz bastante falta

[@lucasmiller8060]

Ativar Diego 2X kkkk o veloz!!

[@FangueGAMER]

volta com o Ui Clone, era muito top o conteúdo

[@shugazun]

Sdd's ui-clone e mestre Roods kk

[@ricardocastanho4717]

Olhando parece fácil kkkk

[@psycchx]

teló dos foguetes tá insano

[@wsanada]

Muito prático! Gostaria de ver fazendo exatamente igual ou bem mais aproximado, com o gradient de fundo trocando as cores de acordo com o álbum, mudar header no scroll down, responsivo etc. Acho que é um exercício bem interessante e explora várias técnicas.

[@hamiceis]

Já quero a parte 2, muito top o conteúdo Diego

[@ohenriqueroos6201]

Vídeo incrível, ansioso pela continuação!!!

[@wallacecorreafontes]

Sei lá o q q é esse icon, muito bom kkkk

[@filipelperes]

Bom dia, qual a distro linux que vc usa?

[@Oculterous]

Eu uso a React incons é muito completa

[@israelmontbarb1590]

Sdds do Diego cor salsicha

[@alexanderherreramillet87]

muito legal gostei muito

[@kazukiEnzo]

código desorganizado

[@eltonsantosoficial]

Saudades UI clone

[@guilhermemachado2580]

Faz o responsivo! xD

[@jeandossantos8279]

Deixar 👍 responsivo o/

[@williampoletto9518]

Mt bom! E seria legal ver a parte de responsividade tb 👍

[@luan_adrien]

Sofrência das antigas

[@PutzNiik]

Se vc consegue fazer isso, tenho certeza que também consegue ler binário. Pq olha….. 🤯

[@dieegosf]

01101110 11100011 01101111 00100000 01100011 01101111 01101110 01110011 01101001 01100111 01101111

[@cannunciato1]

Eu aaaaaaamoooo Tailwind 😍

[@setentaxsete1407]

Primeira vez vendo o Tailwind. Muito bom e fácil de usar. Muito legal tb vendo vc criar a réplica do spotify. Show!

[@dedeh-lives]

Poderia virar rotina fazer isso com tailwind... E não só isso, também aprofundar um pouco mais. Como criar um clone do twitter, e colocar login e autenticação etc... mas tudo bem básico.

[@saviodev777]

ui clone bom de mais

[@aoweageofwarringempire6633]

CONTINUEEEE POR FAVORRR

[@jeandeswesleymartins3044]

Pqp esse diego eh brabo msm

[@jonatascamelo444]

Saudades UI Clone

[@isseihyoudou5522]

42:37 flashbang grenade

[@yuribartolomeu616]

Saudades UI Clone

[@TheLukinha69]

Bora Continuar :)

[@BateraEntrevista]

sdd UI Clone

[@renatotex9356]

Soltaaaa o brabooo!! Queremos continuação!! Me abriu muito a mente sua explicação, a didática é boa demais!

[@victorzarzar2724]

Diego, tailwind a primeira vez que usei, achei estranho, agora já curto bastante, virou meu "queridinho" sou front react ;)

[@NeroDantesco]

saudades UI clone

[@pia7632]

por favor faça uma parte 2 : )

[@walterribeiro3463]

#saudades ui clone RN

[@ZeR0tsx]

Faaaaala dev's ❤️🚀

[@hadeblandoss519]

vou aprender!!!

[@alexandrepellegrino2699]

saudades ui clone

[@silviodossantosneto6665]

Tem vídeo explicando como usar os atalhos do teclado pra codar mais rápido? Tem alguns atalhos que o Diego utilizou que eu não consegui descobrir como que faz. :(

[@fischerdev]

Isso foi um exemplo estático. A questão é fazer um aplicativo dinâmico em que o código da interface fique separado do código de negócios (interação com o banco de dados).

[@kaualandi]

Repo do github?

[@renandevelop]

Quando utilizo uma biblioteca de componentes, fico preocupado com a possibilidade de ela não ser mais atualizada no futuro. No entanto, em projetos de front-end é possível projetar com a possibilidade de substituir a biblioteca no futuro? Ao criar uma API, é possível definir a interface como um contrato, independentemente de quem irá implementá-la. Se alguém conhecer algum projeto que utilize esse mesmo conceito no front-end, por favor, compartilhe o link nos comentários. Obrigado.

[@raphaelgibson6555]

Ta falando de clean architecture? O Rodrigo Manguinho tem um curso fenomenal sobre esse assunto na Udemy, usando React

[@Anilom]

Acredito que você tá pensando em algo como o design pattern Adapter, dê uma olhada lá no refactoring guru. A ideia é componentizar tudo do seu front, ex: BaseText, BaseButton, BaseSelect... Assim você não fica dependente da biblioteca de componentes que estiver usando. Se uma hora precisar trocar a lib de componentes, você apenas adapta as props que envia pra eles dentro dos componentes pra "encaixar" com a nova lib, desse jeito você não precisa alterar nada nas páginas, somente nos componentes. Mas veja no refactoring guru, e dps me diga se era o que tava pensando!

[@murilofuza2838]

Diego, fugindo do conteúdo do video. Teria como disponibilizar as config de estilo do seu mac/vs/warp? Fiquei maravilhada com um ambiente tão "limpo" e confortável de se ver.

[@Frankladylove]

#SaudadesUIClones :D

[@RafaelReisCosta-d2u]

Top demais! Obrigado. Que atalho é esse que você usa para selecionar várias linhas com textos semelhantes? Eu uso o ctrl + D mas esse atalho seleciona uma a uma.

[@brunogoncalvesferreira2490]

Diegão faz um video deixando responsivo, é tema dark é light 😄