Recriei a interface do Spotify usando Tailwind
HTML-код
- Опубликовано: 13 апр 2023
- → QUIZ: TESTE SEUS CONHECIMENTOS EM REACT (GRÁTIS): rseat.in/edVSj5nRm
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.br/
Cadastre-se na nossa plataforma: app.rocketseat.com.br/signup
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat
![TRASH or PASS! Eminem ( Houdini ) [REACTION!!!]](http://i.ytimg.com/vi/cB1WrZcMwMc/mqdefault.jpg)
32:00 quem quiser colocar o ícone de play preenchido pode usar a propriedade fill do svg, ficando
Nem todo herói usa capa
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.
Cara, o Diego consegue fazer tudo parecer tão fácil. Incrível isso bixo.
Tenho a mesma sensação... Diego é d+
@Wander Hungerbühler Experiência e conhecimento é tudo né bixo? Espero um dia chegar perto disso.
Parabéns pelo seu trampo também!
@Wander Hungerbühler obrigado pelo incentivo!
A didatica dele é algo incrível
ele ja tem o roteiro pronto nao se engana nao man
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.
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.
Aula magnífica!!! Por favor, traga a parte 2, aplicando a responsividade e a mudança de cor no background.
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
Já quero a parte 2, muito top o conteúdo Diego
Que bacana! Adorei, sempre fico impressionado com o conhecimento, dedicação e didática do Diego, gostaria de ver um continuação com tema dark / white
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.
Diego consegue fazer com que as coisas pareçam fáceis hahah é absurdo. Parabéns pelo conteúdo
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!!!
Responsividade e adição da troca de temas light/dark seria show também :D
Show, estou doido esperando já o vídeo desse layout com responsividade 😊😊😊
conteúdo top, diegão monstro faz parecer tão simples 😂 continuemm!! além da responsividade poderia torná-lo dinâmico
ja estamos à espera da continuacao! grande video, parabens
Show!!! Tem de ter uma parte 2.
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
Diego, da continuidade nesse projeto! Ficou massa!
Show Diegão, continua esse layout sim, vai ficar massa!
Mt bom! E seria legal ver a parte de responsividade tb 👍
Muito bom, uma parte 2 com certeza será bem vinda!
Vídeo incrível, ansioso pela continuação!!!
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.
O cara é um mestre fazendo e explicando ao mesmo tempo, sempre aprendendo contigo obg!
Olha fiz todos os passos e gostei bastante do resultado, eu gostaria mesmo que continuássemos a melhora-lo tipo uma parte 2.
Show! Continua esse layout, Diegão
Muito bom o vídeo, seria legal fazer a continuação!!
vídeo muito bom!! algo que eu gostaria muito de ver seria como montar um design system inteiro com tailwind, seria super interessante
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 🙌🏻
Quero muito aprender a programar desse jeito. Cê faz paracer tão fácil e rápido
Cara, mt bom saber sobre essa propriedade "space", é por isso q é bom ver esses conteúdos mesmo já sabendo sobre, sempre tem uma coisa nova ❤
quero a pt2, show de bola!!
meu, fico impressionado como o diego trabalha com uma naturalidade todos os componentes, monstro demais!!
Parabéns. Excelente trabalho. Se conseguir avançar neste projeto seria interessante.
Aguardando a parte 2 dessa obra de arte 💡🧠
Aual Incrivél! Seria muito bom continuar deixando ele recursivo.
Seria legal mostrar exemplo de como fica quando o style muda de acordo com props do componente
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...
Incrivel, Parabéns Diegão.
Ia ser legal um conteúdo de resposividade com tailwind .... estou começando a usar tailwind e estou curtindo bastante !!
CONTINUEEEE POR FAVORRR
Saudades demais do UI Clone. ps: Esse DMX do Daily Mix me pegou viu mano. 🔥
Muito massa Diego, aprendi muito
Esperando a parte dois. Vai ficar em dia
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
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.
vamos continuar, show de bola... fazer todo com responsividade etc
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...
Eu uso sempre e ainda acabo aprendendo varias coisas. Muito bom
Otimo video. sugestam replicar/recriar interface clickup com tabelas funcionais. seria muito massa ver essse conteudo.
Não vejo a hora da continuação 😊❤
Diego poderia fazer um video sobre esse novo formato de api route do next.. como fazer algo similar a um restfull com ele para receber param em rota e ou queryString
Tenta fazer o segundo vídeo sobre algumas funcionalidades do Spotify
muito bom!!! seria legal ver ele resposivo sim
Muito bom, faz o vídeo de como deixar responsivo.
O diego traz a proxima aula reponsividade por favor ! quero aprender mais !
por favor faça uma parte 2 : )
ó o monstro dando aquela aula monstra numa sexta monstra. Tamo junto Diegãoooo
Dale
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.
Cara o vídeo ficou show, e eu acrescentei algumas coisas que faltava, só não fiz as funcionalidades
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
Continua aí! Faz o responsivo!
Excelente vídeo, como sempre, Diego! Tu pode dizer como adicionou esse commnad de Pick Color no Mac?
É uma extensão do raycast
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?
Faz responsivo!! Muito bom o vídeo
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?
Novo por aqui. Que doideira isso. E o cara faz tão rápido. Mais rápido que fazer no elementor só arrastando hahahaha
Muito daora. Continua Diegão
Continua ele Diego!
Muito top!! Ficou perfeito.
Parte 2 pls!! 😆👏
o lucide tem o icon monitor-speaker que é perfeito pro botão de device do spotify
Diego, qual plugin no VsCode vc usa para o Tailwind?
Já curti antes de assistir, deveria ser uma serie do RocketFlix
Diegão faz um video deixando responsivo, é tema dark é light 😄
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. :(
Pô Diegão seria muito da hora fazer algum conteúdo como esse, por exemplo, utilizndo Electron, dei uma pesquisada sobre Electron + React no RUclips e só achei conteúdo mais antigo.
Verdade cara
Sem querer fazer jabá, mas já fazendo kkkk tem um curso de Electron + React da Rocket que pode ser adquirido individualmente :)
seria uma boa fazer o layout consumir a API do spotify hein!
Continua! muito bom
Diego, fala do t3 stack, queria ver o que vocês da rocket acham
Queria ver como fica o responsivo com temas light e dark mais o uso de @apply.
Parabéns pelo video!!!
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).
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
para preencher o botão de play de preto com o lucida se faz assim>
e tirei o text-color do button
saudades ui clone voltaaaaa
Gostaria de saber quais são essas extensões que o Diego Fernandes usa no vscode.
esse terminal ai tem pra windows n? que coisa linda
Muito bom o video...
Sim...faça a parte da responsividade
Faz a continuação pelo amor de Deuss🙏🙏🙏
outra visão! Diego após assitir seu vídeo senti minha mente mais aberta, não tenho conhecimento técnico para julgar o que vi, mas tenho experiência de vida pra saber que você sabe do que esta falando e fala muito bem, e aforma como trata o código de forma ágil me deixou impressionado, como faz cara pra selecior trechos de código e fazer as substituições e inserções de forma extraordinariamente linda?
parabéns Diego, virei seu fã!
É o Ctrl + D do editor kkkkk seleciona todas as ocorrências do trecho selecionado
Contínua contínua contínua 🚀
Pelo amor de Deus continua!!!
Já quero a parte 2. Kkkkkk
Objetividade brutal, assim que eu gosto.
Diego croma vermelho edição deluxe desbloqueada com Sucesso.
Que massa!!!! Eu estava buscando sobre como aplicar a Api do Spotfy em um bot inteligente e encontrei como fazer a interface do spotfy kakakakakak como o mundo é pequeno
Simplismente incrivel👏👏👏👏👏👏👏👏👏👏👏
É 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!