Recriei a interface do Spotify usando Tailwind
ฝัง
- เผยแพร่เมื่อ 27 ก.ย. 2024
- → 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
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.
Em uma hora o cara faz o layout do Spotify, em uma hora não consigo nem iniciar um projeto kkkk
😂 dois mano kkk
Três 😭
Kkkkkk
Existe todo um planejamento antes e muitas das vezes já fez o projeto antes tbm..
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
O vídeo nem começou e eu já tô no hype!! Diegão é MONSTEEERRRR
Fake
Bom dia, qual a distro linux que vc usa?
kmk Mayke... Da uma luz a]i de como colocar o project no github pages.
Inclusive tomou um monster pra fazer o conteúdo 🤣🤣🤣🤣🤣
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
Perfeito, assisti como se fosse um filme. Devia virar playlist, seria um boracodar em react...
Up
Up pra krl
#Boracodar em outras linguagens seria legal
@@peterpontocom Web só tem JavaScript de linguagem.
E eu sei que tem outras que estão chegando.
32:00 quem quiser colocar o ícone de play preenchido pode usar a propriedade fill do svg, ficando
Nem todo herói usa capa
Aula magnífica!!! Por favor, traga a parte 2, aplicando a responsividade e a mudança de cor no background.
Gostei muito, faz mais vídeos neste estilo, tô começando ver front agr e achei muito bom!!!!
para preencher o botão de play de preto com o lucida se faz assim>
e tirei o text-color do button
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...
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.
Primeira vez vendo o Tailwind. Muito bom e fácil de usar. Muito legal tb vendo vc criar a réplica do spotify. Show!
Perfeito Diego! Consegui acompanhar e ir fazendo junto com você. Isso, faz os temas e também vai aumentando o grau de dificuldade, quem sabe uma API trazendo as músicas de algum lugar ?!😉🙈 Um grande abraço e + sucesso, você merece.
Daora Diegão, eu tava meio desesperado porque eu queria um tutorial rapido de tailwind, já que existe isso de padrão futuro para o next, e sei que você vai abordar no ignite, mas eu queria fazer o ignite agora do 0 usando só tailwind até dominar tudo, mas tava perdido, obrigado mesmo e se puder, traga mais conteúdos assim, me ajuda bastante
video mto massa, fazia tempo que nao codava com typescript e next, mto massa ver o quanto tudo mudou hehe. Vlwww Diegao e galera da Rocket, video bom demais!!!
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...
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).
Mt bom! E seria legal ver a parte de responsividade tb 👍
tailwind parece libertador, não tem que pensar nomes pra classes ou utilizar o método BEM pra nomear as classes vc já inseri o estilo na classe muito bom vou aprender
vamos continuar, show de bola... fazer todo com responsividade etc
Show, estou doido esperando já o vídeo desse layout com responsividade 😊😊😊
ja estamos à espera da continuacao! grande video, parabens
meu, fico impressionado como o diego trabalha com uma naturalidade todos os componentes, monstro demais!!
vídeo muito bom!! algo que eu gostaria muito de ver seria como montar um design system inteiro com tailwind, seria super interessante
Diego, da continuidade nesse projeto! Ficou massa!
Vídeo incrível, ansioso pela continuação!!!
Seria legal mostrar exemplo de como fica quando o style muda de acordo com props do componente
O cara é um mestre fazendo e explicando ao mesmo tempo, sempre aprendendo contigo obg!
Muito bom. Esse Tailwind bem usado com certeza é uma excelente ferramenta, hoje em dia eu uso muito mais o ChakraUI pra desenvolver as interfaces dos projetos da empresa que trabalho, acho ele bem bom. E daria fazer uma interface dessa do spotify em pouquíssimo tempo também. Excelente vídeo.
Como você faz para alterar o design dos componentes dessa lib? Cria um componente deu por exemplo table do chakra e depois cria um arquivo css pra alterar o design?
esse terminal ai tem pra windows n? que coisa linda
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!! 🎉🎉
Não sei se conhece, mas este canal pode te ajudar: www.youtube.com/@devjunioralves 👍
Saudades demais do UI Clone. ps: Esse DMX do Daily Mix me pegou viu mano. 🔥
Queria ver como fica o responsivo com temas light e dark mais o uso de @apply.
Parabéns pelo video!!!
Show! Continua esse layout, Diegão
47:17 Eu gritando aqui kkkkkkkk coloca um burg
Muito bom o vídeo, seria legal fazer a continuação!!
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)
Isso
Show!!! Tem de ter uma parte 2.
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.
Cara o vídeo ficou show, e eu acrescentei algumas coisas que faltava, só não fiz as funcionalidades
É impressionante como o Diego tem a habilidade de tornar tudo tão simples. Ele é realmente incrível nisso! vai ser ótimo para o proximo ep da minha jornada na programção! ótimo conteudo!! abraço!
Novo por aqui. Que doideira isso. E o cara faz tão rápido. Mais rápido que fazer no elementor só arrastando hahahaha
vídeo top, não conhecia o tailwind. Pode continuar essa interface? obrigado
Tenta fazer o segundo vídeo sobre algumas funcionalidades do Spotify
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
Otimo video. sugestam replicar/recriar interface clickup com tabelas funcionais. seria muito massa ver essse conteudo.
por favor faça uma parte 2 : )
Como fazer para conseguir mudar o tamanho da sidebar?
o lucide tem o icon monitor-speaker que é perfeito pro botão de device do spotify
Bora Continuar :)
O diego traz a proxima aula reponsividade por favor ! quero aprender mais !
Eita, que TERMINAL. Fiquei apaixonado ❤❤. Podes dizer qual terminal você usa?
Abraços, a partir de Angola
Se chama wrap, disponível só para mac até então
Diegão faz um video deixando responsivo, é tema dark é light 😄
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.
Diego croma vermelho edição deluxe desbloqueada com Sucesso.
Esperando a parte dois. Vai ficar em dia
Muito massa Diego, aprendi muito
quero a pt2, show de bola!!
Ativar Diego 2X kkkk o veloz!!
ó o monstro dando aquela aula monstra numa sexta monstra. Tamo junto Diegãoooo
Dale
Já curti antes de assistir, deveria ser uma serie do RocketFlix
Diego, tailwind a primeira vez que usei, achei estranho, agora já curto bastante, virou meu "queridinho" sou front react ;)
Continua aí! Faz o responsivo!
Qual os ícones Diego? E o tema utilizado... Excelente vídeo!
Symbols e Rosé Pine
Saudades UI Clone
muito bom!!! seria legal ver ele resposivo sim
Enpaquei logo no primeiro comando, quando rodo pnpm dev dá o erro:
ReferenceError: Request is not defined.
Alguém sabe como corrigir?
Saudades do Ui Clone 😢😢 #VoltaRodão
Não vejo a hora da continuação 😊❤
Saudades UI clone
Faz responsivo!! Muito bom o vídeo
Pqp esse diego eh brabo msm
seria uma boa fazer o layout consumir a API do spotify hein!
Muito bom o video...
Sim...faça a parte da responsividade
Muito daora. Continua Diegão
que fonte family está usando?
Faaaaala dev's ❤️🚀
Eu uso a React incons é muito completa
Continua ele Diego!
o Diegao, posso fazer a mesma aula com Elixir no meu canal?
Penso eu que chegou a hora de eu aprender o Tailwind, muito obrigado Diego pelo o conteúdo.
Parte 2!
Tailwind e um bootstrap avanzado
kd a parte 2
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.
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...
Sdd's ui-clone e mestre Roods kk
Muito top!! Ficou perfeito.
vou aprender!!!
Conteúdo top demais!!
Agora gostaria de que fizessem um vídeo explicando o porque da mudança de ao criar um novo projeto Next, ele não esta vindo com a pasta 'api' (fiz este teste no dia 15/06), e também como proceder neste caso, no que afeta. Pelo que vi na documentação, a pasta 'api' deve ser utilizada dentro de uma pasta 'pages', seria isso mesmo?
Alguém sabe a extensão que ele está usando?
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.
Ta falando de clean architecture? O Rodrigo Manguinho tem um curso fenomenal sobre esse assunto na Udemy, usando React
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!
Tive uma rejeição muito grande na época do Bootstrap, depois não conseguia mais deixar de usá-lo, agora acontece a mesma coisa com o Tailwind, tô começando a gostar desse framework. putz rsrs
Parece que ele não está centralizado mas ele está centralizado ou ele realmente não está centralizado kkkk a vida de um DEV!!
Excelente vídeo, como sempre, Diego! Tu pode dizer como adicionou esse commnad de Pick Color no Mac?
É uma extensão do raycast
Gostaria de saber quais são essas extensões que o Diego Fernandes usa no vscode.
Alguém sabe o modelo desse headset?
volta com o Ui Clone, era muito top o conteúdo
Bom demais!!
Faz o responsivo! xD