Aula 02 | Trilha Intermediário | NLW Pocket

[Música] fala devis seja muito bem-vindo muito bem-vinda ao nlw Pocket de JavaScript eu sou Diego Fernandes e sou City na Rocket City também programador há 13 anos eu vou te acompanhar na trilha intermediária aqui com react e node juntos a gente vai construir em apenas três aulas um app para controles de metas pessoais para você acelerar pro seu próximo nível em programação nesse Evento totalmente gratuito você vai aprender como Us usar o poder do JavaScript para se destacar no mercado de trabalho Esse é um conteúdo inédito Então aproveita muito essa oportunidade porque as aulas vão

ficar disponíveis somente essa semana para você assistir Claro no horário que você preferir mas para chegar até o final dessa missão eu preciso que você Se comprometa a assistir todas essas aulas e colocar a mão na massa junto comigo para sair Daqui com um projeto pro seu portfólio e Um certificado pro seu currículo beleza Lembrando que sempre que tiver qualquer dificuldade ou qualquer dúvida você pode acessar a comunidade do discord da sua trilha e mandar a dúvida por lá o link dessa comunidade todas as informações do evento estão reunidos no guia do evento que você

recebeu por e-mail também é importante que você entre no grupo do WhatsApp exclusivo para participantes do nlw para não perder nada e participar Dos sorteios e brindes e garantir o seu certificado e muito mais então agora bora pro código Bora quar Bora lá então Dev pra nossa segunda aula aqui do nlw Pocket de JavaScript e hoje o que a gente vai fazer é finalizar o nosso backend com chave de ouro e a gente vai começar Claro codar o nosso front end toda a parte de interface do front end e a primeira coisa que eu vou

fazer aqui é que esse nosso arquivo de server ele tá ficando um pouco poluído porque eu tô Colocando todas as rotas aqui dentro e o que eu vou fazer é criar uma pastinha de rotas aqui e separar cada uma dessas rotas dentro de um arquivo Então veja eu tenho três rotas aqui uma delas é para está as metas pendentes então botar aqui get pending goals o nome aqui essa aqui é para criar uma nova meta né então Create go e a última é para criar uma nova Competition né então Create completion pode ser E aí

aqui se a gente for entrar lá No pacote Fast F ty provider Zod aqui embaixo a gente vai ver que tem um exemplo aqui ó how to Create a plugin plugin no ffy é basicamente essa funcionalidade da gente separar e as nossas rotas em mais arquivos né o ffy El chama isso de plugin enquanto outros frameworks por exemplo Express no dentro do Note chama isso de mider que é basicamente eu fazer com que meu servidor ele esteja separado em vários Arquivos e não um único arquivo e a gente vai até copiar aqui esse exemplo e

eu vou vou jogar aqui por exemplo na Create go vamos lá e aí salvo aqui tem alguns errinhos aqui para corrigir o primeiro é que esse FF plugin assim Zod ele é um tipo né então eu posso fazer apenas Import Type ó dessa forma e aí ele não conta isso aqui como uma importação na hora da build o conteúdo aqui da função vou arrancar por completo outra coisa que eu faço aqui é tirar o Function e colocar uma flechinha aqui ó para usar uma Arrow function aqui ao invés de usar uma função nomeada Ah E

aí aqui agora eu vou dar um Export e também vou dar um nome para essa para esse plugin né então V chamar ele de Create ah go root por exemplo E aí aqui agora eu pego aqui dentro eu já tenho o meu App que é esse FF aqui eu posso até trocar o nome dele para app esse opts aqui eu não vou usar então posso tirar e agora eu venho aqui no meu server e Copio a rota de criação de uma nova meta vem aqui e jogo aqui dentro importo aqui o Create go né que

é lá de dentro das minhas functions E aí volto aqui no meu servidor e agora aqui em cima eu fego e faço app pon register que é para eu registrar um plugin e passo a minha rota então Create go roote certo que é esse plugin que eu acabei de criar ó que tá aqui dentro vindo da Rota e a gente vai fazer isso aqui com os demais também né então vou copiar aqui ó Create go manda Aqui pro Create completion apago o conteúdo dele troco aqui para Create completion root tiro a importação aqui em cima

vou no servidor copio aqui ó trago aqui para dentro da função e Porto aqui a minha function e feito ven aqui no meu servidor Create completion roote último agora né do pending goals Então vamos lá copio aqui de novo venho no get pending goals tiro aqui o conteúdo get pending gos root a gente copia aqui traz aqui para Dentro salva importa a função app. register get pending gos root salvo aqui a gente vai ver que o servidor tá rodando se eu venho aqui do Postman faço uma requisição a gente vai ver que o resultado aqui

é o mesmo né a gente não mudou o comportamento a gente só ah trocou ali né de arquivo né Ah e agora vou tirar aqui algumas importações que eu não preciso mais nesse arquivo principal e agora a gente vai criar a última funcionalidade aqui Da nossa aplicação que é o get Wi summary certo vou até copiar o get weck pending goals aqui vamos remover todo o conteúdo dele Get We summary a gente vai precisar de várias coisas aqui mas por enquanto eu vou remover a gente vai importando conforme necessidade tá E aí o que que

eu vou fazer aqui agora vou dar um return aqui summary test só para retornar alguma coisa e eu já vou deixar minha rota Criada então ó get Week summary PTS tá Veio aqui copia o get Week pending goals vou trocar aqui para summary get Week summary roote e aqui eu vou trocar para get Week summary E aí pego aqui o summary e retorno ele aqui embaixo ã removo aqui as importações que eu não tô usando aqui também não tô usando os óio ó na rota do get pending gos tá E aí lá no meu servidor

eu cadastro aqui o get Week sumary né e agora aqui no Postman se eu Vier aqui e duplicar a minha rota e trar o nomee Get We summary e aqui no endereço também trar summary Send a gente vai ver not found por não sei appg summary meu servidor tá rodando deixa eu rodar ele de novo aqui D um send Hum que que eu fiz aqui de errado [Música] ah ah olha só eu usei a minha função aqui e tem que ser minha rota né ó por isso que eu sempre falo né cuidado com As importações

né e aqui eu tinha errado a importação ó para ver que acontece né Sempre beleza ó já tá aqui summary test né mas não é isso que a gente quer retornar então o que que é essa rota do Summer né ele vai retornar isso aqui ó que é basicamente detalhes da minha semana então o que que eu quero que essa rota retorne né Eu quero que ela retorne um resumo aí das metas que eu completei ah dentro de cada dia da semana então seria muito bom se o meu backend eh ele Já retornasse né Por

exemplo esse dia específico Você completou essas metas nesse dia Você completou essas metas e não uma lista com todas as metas que eu completei na semana senão eu vou ter que organizar elas lá no frontend dá também não é um problema daria para fazer dessa forma mas como eu quero que a gente se esforce um pouquinho mais em aprender SQL mesmo né Eh aprender um pouco mais a fundo sobre SQL porque eu acredito que hoje SQL é uma das dos aprendizados mais Importantes que você pode ter quando for trabalhar com backend porque ele é um

aprendizado que você vai levar eh independente da linguagem que você for trabalhar se um dia você não tiver mais trabalhando com node por exemplo tiver trabalhando com PHP com Java com csharp com python ou até ah com outras linguagens né o SQL é algo que você vai levar para todas elas né SQL já é uma convenção Mundial então é muito importante que você foque um tempo em Aprender SQL principalmente se você quer se especializar em backend né E como eu quero que você aprenda mais sobre SQL eu vou fazer essa separação aqui direto na query

Ou seja eu vou fazer com que minha query retorne os dados agrupados por data né então ele vai retornar Exatamente olha nessa data aqui Você completou essas metas aqui né e ele vai trazer os detalhes da meta só que além disso no meu summary aqui eu vou usar essa Requisição do summary para me retornar também dados para eu montar este carinha aqui em cima Então como que eu calculo né essa barra de progresso eu preciso saber primeiro Qual que é o total de metas que eu tenho para completar na semana e veja que esse total

de metas que eu tenho para completar na semana não é a soma de metas cadastradas não é isso é a soma do desired weekly Frequency que eu tenho aqui ó dentro das minhas metas Naquela semana então por exemplo se eu tenho quatro metas por exemplo meditar praticar exercício praticar tá duplicado aqui meditar praticar exercício e nadar e acordar cedo por exemplo E aí por exemplo meditar eu tenho que fazer duas vezes praticar exercício também duas nadar duas e acordar cedo duas isso aqui tem que ser oito né o total porque é a soma de todas

as né todas as desired weekly Frequency dessas metas E aí Você completou oito é a soma de quantas eu já Completei Então essa rota do summary ela tem que me retornar bastante coisa né E vai ser bem legal porque a gente vai aprender sobre agregação de dados dentro do skl que talvez é algo que você nunca tenha feito e eu tenho certeza que vai te surpreender bastante né O que que a gente pode fazer dentro de um de um SQL da vida tá E aí primeira coisa né para eu saber qual é o total aqui

ó para eu calcular né Qual que é o máximo da barra De progresso eu preciso saber exatamente qual que é quais eh Quais são as metas que eu tenho que completar nessa semana senão eu não consigo nem saber o quanto usuário já completou E aí se a gente lembrar lá no get Week pending goals por exemplo eu tenho aqui já uma common table Expression para buscar todas as metas criadas eh até pera aí eu tô até me confundindo Todas as metas que foram criadas antes ou durante a semana atual né que são as metas válidas

para aquela semana né eu não posso contabilizar metas que foram criadas no futuro porque elas não deveriam influenciar na no Progresso da minha semana vou fazer os imports aqui que estão faltando ó do drizzle alguns imports não funciona quando aperto control espaço ó então tu pode vir aqui apagar uma letra e escrever ela de novo e ele aparece por Não sei não sei mesmo tá Ah E aí vou pegar aqui ó o último dia da semana e aí importo aqui o DJs legal Teoricamente com isso aqui eu já tenho as metas inclusive uma coisa legal

de se dizer é que lá no drizzle studio lembra que eu pedi para você separar aqui ó quando quando a gente tem aqui os comon table expressions né que é cada um desses with as aqui ó eu posso pegar a query que eu tenho dentro deles tá vendo aqui ó eu copio aí eu posso vir aqui no final Depois do ponto e vírgula dou um enter e colo a query aqui embaixo e eu consigo executar ela separadamente ó Então essa query que eu tenho aqui dentro é essa query aqui que tá retornando esses dados aqui

então é legal porque aqui no studio eu consigo executar cada uma dessas queries que eu tenho dentro do common table Expression separadamente da mesma forma aqui ó Posso copiar somente essa aqui aí eu boto um ponto eem vírgula aqui né senão ele não separa uma query Da outra jogo ela aqui embaixo e executo Então olha só ele retorna o ID da Go e quantas eu completei é legal né a gente ver dessa forma e bom ah vamos lá agora é da mesma forma que eu sei as metas que eu preciso completar na semana né como

eu falei eu preciso saber quantas eu já completei né para eu falar olha Você completou tantas dê tantas E aí a gente tem já uma cre pronta para isso que é essa carinha aqui go completion counts Certo a gente vai usar a mesma aqui eu só vou fazer os imports que estão faltando né então count aqui ó que vem do drizzle urm o end ó apaga a letra escreve de novo greater than equal também E aí eu preciso do primeiro dia da semana aqui que eu vou pegar e usando DJs também perfeito né eu tenho

Então as metas criadas eh durante ou antes dessa semana eu tenho as metas que eu já completei e Agora que que eu vou fazer aqui tá Lembra que eu falei que agora eu tenho um desafio no SQL que eu quero buscar as metas completadas por eu quero separar elas por dia né Então olha só essa go Competition counts aqui né hoje ela tá me retornando apenas o ID da meta e quantas vezes eu completei a meta certo se eu for tentar utilizar essa quy aqui ó né que é essa aqui que eu botei aqui no

driz se eu for tentar usar essa Cury aqui para agrupar as metas completas por dia não dá né porque eu não tenho a data e não tenho também o título da Meta então não tem como eu usar os dados provindos dessa query aqui para criar essa listagem aqui concorda comigo então o que que eu vou fazer Primeira coisa eu vou adicionar algumas informações a mais nessa go completion counts aqui eu vou adicionar o título e a data que a meta foi foi Completa tá então eu vou trocar um pouquinho aqui ao invés de ser go

completion count eu vou chamar isso aqui de goals completed in Week tá porque eu quero a informação de quais metas eu completei nessa semana mas eu não preciso da Contagem concorda comigo que aqui ó em nenhum momento eu preciso mostrar a contagem de quantas metas eu eu completei né Depois aqui em cima a gente vai precisar mas aqui embaixo não e veja Que agora eu tô querendo listar esses dados aqui então como é que eu posso fazer né novamente eu vou fazer pegar aqui os dados da da tabela go completions tá só que aí eu

vou fazer aqui um join e aqui eu vou fazer um Winner join porque eu já expliquei as diferenças dos joins né Eu quero que os dois lados da relação existam E aí eu vou fazer um join com a tabela GO onde o ID da Meta seja igual ao go completions pgid E aí agora eu tenho dados E das duas tabelas né tanto go completions quanto a goals em si aqui e aí aqui agora no select eu vou tirar o completion count vou tirar o group ID porque eu não quero mais fazer uma agregação né Fazer

o count Então não preciso de um agrupamento quando eu não faço count su nem nada disso E aí vou retornar os dados aqui então vou ter o ID da Meta não vou botar go ID vou botar apenas ID Mesmo posso buscar aqui agora da tabela gos mesmo porque eu já fiz o join com ela né então posso utilizar direto esses dados vou pegar aqui a data created at goost created at Ah e se eu salvar aqui agora esse skl aqui ele vai me devolver e uma listagem né de todas as metas só que lembra todas

as metas que eu completei só que lembra que eu quero agrupar por dia certo Se eu tentar dar um group byy aqui no created at que é Quando a data quando a Ah aqui isso isso aqui é quando a meta foi criada né mas eu quero ã esse created at ele não é suficiente para mim concorda comigo por quê Porque o created at aqui esse aqui é da da da data que a meta foi criada né mas se eu pegar o created at do go completion quer dizer quando eu completei aquela aquela aquela meta que

é o mais importante para mim é para eu saber aqui ó ontem hoje só que esse carinha aqui ó ele não guarda Só a data ele guarda horário também né hora Minuto segundo E aí não tem como eu agrupar porque elas não vão estar completas no mesmo horário veja né Eu quero usar somente a data para agrupar então ao invés de usar esse created at aqui eu vou criar um um completed at date tá E aí eu vou criar um novo Campo aqui né então aqui eu vou utilizar um o esl que eu vou importar

lá do drizzle tá pra gente poder escrever skl aqui dentro vou Colocar aquele comentario Zinho Lembra que eu te expliquei na última aula e vou escrever aqui SQL aqui dentro e agora tudo que eu escrevo aqui dentro vai ficar com sintax Highlight né de SQL e eu vou escrever o seguinte ó date E aí aqui dentro do date eu passo o campo que é o GO completions created AT que que é essa função date faz ela arranca somente a data ela exclui horário Minuto segundo isso não é importante para mim agora tá Ah E aí

aqui no final eh lembra que eu Tinha falado na última aula aqui quando a gente fez essa essa comon table Expression aqui do go completions count que a gente tem que botar esse as aqui ó quando eu faço algum tipo de agregação ou alguma SQL dentro de um e quando eu uso um campo que não existe né o Cri um campo que não existe eh e aí eu aqui ó faço um as e eu passo o mesmo nome ali ó completed at date Ah beleza então agora eu vou ter a data Só que eu preciso

do horário também porque o horário eu preciso mostrar ele na listagem aqui então vou criar aqui um completed at que aí ele traz a data eh inteira tá então aqui eu vou ter a data inteira eh com o horário né e aqui eu vou ter só a data sem o horário eu vou salvar isso aqui agora e hum e é isso logo a gente testa para ver como é que isso como é que isso vai vai Ficar tá bom perfeito agora que eu já tenho as metas criadas e e as metas completas eu vou fazer

mais um agora que é o seguinte eu vou criar uma como um table Expression que ela vai pegar os dados dessa query aqui e vai agrupar os dados pela data que é exatamente o que eu preciso aqui né os dados agrupados pela data 6 de agosto 5 de agosto que é esse campo completed at date Então vamos lá Como é que a gente vai fazer aqui dentro eu vou fazer DB select tá até quebrar a linha aqui e aí o ponto from aqui ó eu vou passar essa comon table Expression aqui e aí eu quero

agrupar os dados como eu bem falei pelo campo completed date certo perfeito e agora aqui dentro do select que que eu quero trazer primeiro eu quero trazer a data e depois eu quero trazer quais metas foram Completadas naquela data por isso eu vou criar aqui um uma nova coluna né no retorno chamado completions e aqui que vem uma das coisas mais legais ah do postc Na minha opinião não só do postr alguns outros bancos de dados né também que é o seguinte eu vou escrever um skl aqui vou passar aquela flagin SQL e aqui a

gente vai fazer algo e que é o seguinte a gente vai fazer uma agregação Ah em formato né então que que acontece né Hoje os dados que eu vou receber aqui desse goals completed in Week aqui eles vão est nesse formato aqui ó então é basicamente um ID que é o ID da Meta né o título por exemplo nadar a gente vai ter o Ah e aqui não deveria nem ser o ID da Meta Acho que deveria ser o ID da goals completion aqui goals completion ID tá então aqui é o ID da da digamos

da conclusão da Meta o título da Meta que mais que eu tenho Aqui a data então a data completa né então 2024 08 10 por exemplo e o horário né então ah ele completou as 12 horas claro que aqui tem a questão do fuso horário e tudo mais e aí a gente tem também um outro Campo que é por exemplo só a data então 08 10 tá E aí a gente pode ter várias linhas aqui né 2 3 4 5 6 aí tem vários eh praticar exercício né então aqui por exemplo aqui aqui aqui né

então a gente vai ter algo mais ou menos nessa linha eu quero transformar isso Aqui para esse seguinte formato aqui de baixo Então imagina que eu tenho aqui dia 11 11 11 e 11 né Então veja eu tenho três metos que foram completas no dia 10 e quatro mos que foram completas aqui no dia 11 eu quero transformar isso aqui na seguinte estrutura de dados Eu quero um objeto do JavaScript tá eh onde eu tenha eh a data então aqui ó veja que eu tô retornando Aqui o completed at date então por exemplo primeo Campo

compl at date que vai ser por exemplo dia 10 e aí eu quero completions que vai ser uma ar com vários objetos dentro contendo cada uma das metas que eu completei então posso ter por exemplo o ID delas então o ID um então no dia 10 eu completei a meta com ID 1 com o título nadar e com o completed At esse aqui Então veja que isso aqui é uma agregação dentro do skl é eu pegar uma lista e converter ela para esse formato aqui e aí como é que a gente pode criar esse aray

aqui né de completions no postgress a gente pode fazer isso usando uma função chamada de Jason aggregate essa função Jason aggregate ele pega um retorno do postc e converte para uma Array né um um retorno de linhas aqui e converte para um Array E aí como a gente tá agrupando isso pela Completed at date ele vai não vai retornar apenas um arrei né ele vai retornar várias informações eh agrupadas por este Campo aqui completed at date ou seja cada data diferente vai gerar um novo arre de completions E aí aqui dentro do Jason aggregate como

eu falei eu quero vários objetos tá vendo ó dentro de completions é um arrei com vários objetos neste formato aqui e aí por isso dentro Jason aggregate eu vou usar uma função chamada Jason build Object que é para eu como o próprio nome já diz construir um objeto então o Jason aggregate vai criar o Array que eu tenho aqui por fora e o Jason build Object vai criar este objeto aqui e aí agora eu passo quais Campos eu vou ter nesse objeto então eu vou ter o ID E aí eu passo vírgula e qual que

é a coluna que vai preencher este Campo id e aqui no drizzle sempre que eu quero referenciar a coluna eu passo aqui ó um template string e passo aqui o nome da tabela por Exemplo go completions ã Na verdade eu tenho que usar esse gos completion comped in Week né ponto ID vírgula aqui no final e vamos lá próximo campo title e o próximo Campo completed at e eu passo aqui tá e pronto só que como eu fiz uma agregação dentro de uma common table Expression no driz eu preciso passar o as aqui no final

com o mesmo nome completions tá senão ele vai dar erro mais pra frente mas não tem problema se você esquecer ele vai te Avisar que você tem que colocar o S perfeito a gente já tá progredindo bastante e agora eu quero te mostrar exatamente como é que estão vindo os nossos dados aqui então vou criar aqui uma variável chamada result que é igual await DB P with E aí vou passar aqui as nossas três comon table expressions então a goals created up to Week a gos como é que o nome aqui gos completed in Week

e a gos completed by weekday tá E aí eu vou fazer um ponto select vou Deixar não vou passar nada ponto from e vou passar esse último carinha aqui ó e aí eu vou retornar result aqui no lugar do summary pra gente ver olha só quando eu venho aqui no post eend ele tá dando erro e provavelmente Deixa eu entender onde é que tá dando erro aqui [Música] error é erro no aqui ó esqueci uma vírgula aqui no Final tá vendo ó famosa vírgula que me assombra desde 2010 na programação que a gente esquece no

SQL ó quando eu tô dentro do SQL eu tenho que cuidar porque eu não posso fazer que nem no JavaScript deixar uma Virgulino aqui é aqueles bugs que tu fica duas horas correndo atrás para entender o que que tá acontecendo tá mas olha só o que que essa nossa query retornou lembra que eu falei o que que ela ia retornar ó ela retornou uma Por que que ela retornou um Array porque eu estou fazendo um select todo select retorna um Array aqui dentro do drizzle tá E aí eu estou agrupando os dados pelo completed at

date então vej que cada Esse arrel é dividido em vários objetos separados pelo completed at date ó então no dia 11 de agosto eu completei a meta acordar cedo no dia 12 de agosto eu completei a meta me exercitar e no dia 13 de agosto eu completei a meta meditar né tô bem aqui nas minhas metas é uma Por dia no máximo Então veja que cara isso aqui tá muito próximo do que eu tenho que retornar aqui né Então olha só o hoje aqui seria essa data completed at date e a lista que tem abaixo

dele aqui ó seria o que eu tenho dentro de completions né Tá aí o que que falta agora falta eu retornar esses dados aqui junto com as informações aqui para retornar o para montar a barra de progresso né Porque só isso aqui não me permite criar barra de Progresso porque eu não sei quais são as metas que eu tenho que e que eu teria que completar né na semana eu só tenho quais metas eu já completei Então a gente vai melhorar um pouquinho esse result aqui né E como é que a gente vai fazer esse

esse esse select aqui tá a gente vai vir aqui no select ó vou colocar um objeto e aí eu vou colocar e algumas e informações tá que é o seguinte eu vou criar a aqui primeira Informação completed eu vou botar quantas metas eu completei no total para eu saber quantas metas eu completei no total eu posso usar esse goals completed in Week que me retorna todas as metas que eu completei naquela semana e aí eu posso usar aqui um SQL para fazer um count certo então eu faço um select count opa voltou botar aqui ó

o Comentario tá vendo que ele tá tudo como string ó se eu bota o comentario Zinho aqui ó skl Oli ó já fica bonito né então fazer um select count posso botar asterisco mesmo from e passo o goals completed in Week aqui ó que é a minha tabela tá se eu salvo isso aqui agora e executo aqui dou um send ó deu erro ah por qu que deu erro select count from Hum [Música] tá eu acho que eu sei o que que é tá quando eu coloco um select dentro de um campo aqui se eu

não me engano eu tenho que botar ele entre parênteses é isso ó porque se eu não boto ele entre parênteses né imagina que aqui eu já tenho um select aí dentro do select eu tô fazendo outro select né Eu sou obrigado a botar ele entre parênteses porque senão ele se perde na Sintae do do skl e eu preciso converter isso aqui para um número né então a gente já aprendeu posso fazer aqui um ponto map with Number ó ele já converte em número tá vendo esse map with aqui no final e beleza depois disso preciso

o total de metas então não só as metas que eu completei eu vou fazer a mesma coisa fazer um SQL aqui ó só que agora eu vou passar aqui ó no goals created up to Week só que lembra o total ele não é a contagem de quantas metas e sim a soma desse Campo aqui ó desired weekly Frequency Então a gente vai fazer o seguinte ó de usar um count eu vou usar uma Sum passa o campo aqui né não é asterisco agora eh goals created up to Week ponto decided weekly Frequency E aí o

resto pode continuar igual fazendo map ó então agora se eu Dou um send ó eu tenho a soma que é quantas metas eu tenho que eh completar e quantas eu completei Ah só que tá vendo que ele tá retornando três vezes os dados por que que ele tá retornando três vezes os dados aqui porque eu tô fazendo um select from goals completed by Week Day que é esse carinha aqui E esse carinha aqui tá me retornando três resultados ou seja esses dados aqui eles estão repetidos três vezes que que Eu vou fazer para resolver esse

problema eu vou fazer uma agregação dos resultados devolvidos por esta query aqui então Olha só eu vou criar aqui um e goals per Day né as metas por dia que é basicamente o que eu quero retornar aqui embaixo e aí novamente vou escrever aqui um SQL tá Vou botar aqui aquele nosso comentário Zinho e aqui eu vou fazer um Jason Object aggregate Tá Então veja que antes eu tinha usado Jason aggregate isso aqui cria um Array tá quando eu uso Jon Object aggregate eu criando um objeto perfeito e a esse objeto ele vai eu passo

para ele só Qual que é a chave e o valor então a chave dele vai ser o go completed by weekday ponto completed at date e o valor dele vai ser o goals completed by weekday completions que é a minha lista de metas completas se eu voltar no Postman e der um send aqui Agora olha só o que que a gente fez Cara isso aqui é incrível tá a gente tem agora dentro do resumo todas as metas que eu completei o total de metas e as metas separadas já por data ou seja cada meta que

eu completei cada dia da semana Olha isso aqui que incrível né então com isso em mãos né agora a gente já pode partir para construir o nosso front end né A útima última coisa que a gente vai fazer aqui só é dentro do meu backend ó eu vou instalar um plugin chamado fast Fy cores se você nunca teve problema com cores talvez você não seja de full stack ainda cores é basicamente uma um método né de segurança Ah que chama Ah que é basicamente uma forma de eu evitar que eu que o meu backend seja

acessível por qualquer front end né e é sempre legal eu configurar core porque no node né se eu não configurar o cores aqui no Fast fy basicamente nenhuma aplicação frontend será capaz de acessar a minha aplicação backend como é Que eu configuro venho aqui dou um app. register Fast fy cor ele vai fazer a importação automática aqui ó de dentro do Fast fy cor passo um objeto de configuração passo Origin e aqui eu vou passar asterisco isso aqui que eu tô dizendo que qualquer URL qualquer frontend vai poder acessar o meu backend é claro que

em produção Fin M eu vou querer botar aqui é RL do meu frontend né Para eu não deixar Outras aplicações acessarem o meu backend feito isso agora Sim a gente finalizou o nosso backend com chave de ouro e a gente pode partir pra Construção do backend do frontend agora que a gente finalizou o nosso backend né eu vou deixar o backend rodando aqui com npm Run né resto eu posso fechar tudo aqui eu não vou utilizar vou deixar né o vest code aqui aberto caso eu precise fazer alguma modificação e e partiu frontend certo eu

vou começar aqui no meu terminal vou fazer o seguinte ó vou ali na pasta Aulas onde a gente criou a pasta server aqui ó E aqui nessa pasta mesmo ó eu vou escrever npm Create Vit @ latest tá que que isso aqui vai fazer né eu vou criar um projeto novo ah utilizando o Vit caso você não conheça né o Vit ele é a ferramenta mais famosa que a gente tem no front end pra Construção ah de projetos front end no geral tá isso eu digo no geral porque não é só react ele serve para

View para svelt Para Solid quick lit react ou até para vanila que seria digamos sem nenhum sem nenhuma biblioteca né seria apenas o JavaScript puro ã e eu vou dar um enter aqui a gente já vai entender como que vai ficar isso aqui ó ele pede o nome do projeto vou escrever web seleciona aqui o Framework que eu tô usando né no caso react aqui qual que é o template que eu quero estar utilizando aqui eu vou selecionar a opção typescript que é o Que a gente vai estar usando né abro aqui o e projeto

web e já vou abrir ele no vest code E aí que loucura ah perfeito projeto web aqui aberto a gente pode rodar um NP Run aqui também ah antes eu tenho que instalar as dependências então npm i ou npm install vai dar na mesma aguardar aqui e eu já posso apagando alguns arquivos desnecessários Aqui é RM a gente não vai estar utilizando es lint aqui a gente não vai estar utilizando né como eu falei a gente tá usando biome que é um substituto do s lint mais rápido e e o resto eu vou remover conforme

necessidade vou rodar um npm Run Dev aqui e ele vai dar o RL da aplicação aqui é local 5173 e essa aqui é Nossa aplicação é bem simples só clica no botãozinho ela Aumenta o count mas a gente vai apagar tudo isso né porque a gente vai fazer ela do zero perfeito vamos remover remover mais algumas coisinhas que a gente não vai estar utilizando então começar pelo Index HTML aqui ó aqui onde tá escrito Vit reacts que é o título da página eu vou escrever inorbit que é o nome da nossa aplicação aqui onde tem

esse ícone do favicon aqui ó onde ele tá hoje esse Vit svg que tá aqui na pasta Public né então todo o Arquivo aqui ó que a gente bota na pasta Public ele fica acessível na raiz do nosso projeto que que eu vou fazer vou lá no figma que você tem acesso aí né E aí eu deixei preparado aqui em cima ó esse iconz clica aqui no ícone vem aqui na direita exportar aí Vamos acessar aqui ó pasta aulas web Public e jogamos aqui dentro o nome pode ser icon mesmo e eu só troca aqui

ó por icon e aqui eu tiro o Vit posso deletar né volto aqui na página ó 5 já tá ali o iconeinstagram Posso vir aqui e rodar um npm install de novo só para ele detectar né que eu removi essas dependências e e já Apagar elas do node modules ali feito isso pasta search também vou remover a pastinha assets aqui vou remover o arquivo app.css Ah no index CSS vou remover tudo que tem aqui dentro salvar vou abrir o arquivo main.tsx ã e aqui eu não vou mudar nada no app.tsx eu vou tirar todo esse

conteúdo Que tem dentro desse aqui na linha 9 até a linha 32 e vou colocar apenas um H1 hello world tá E aí uma coisinha importante aqui ó veja que quando eu escrevi H1 e dei um enter ó ele já criou a tag H1 a gente chama isso aqui de emit E aí você tem que entrar lá nas configs do Se Vest code E aí se você procurar aqui na minha olha só eu tenho essas linhas aqui ó e é importante que você coloque isso aqui include languages JavaScript JavaScript react e noem files Você bota

JavaScript GSX esse do mdx aqui não precisa tá lembrando que todas minhas configs do vest code estão no meu github só cuidado na hora que tu for copiar minhas configs do vest code caso você for copiar as minhas configs do vest code que tem algumas coisas por exemplo a fonte do editor né Eu tô usando aqui a fonte jetbrains mono mas ela não vem instalada no teu sistema Então se tu copiar essa linha aqui e não tiver essa fonte ó vou até botar uma Fonte que não existe ele vai ficar na fonte padrão do editor

o que talvez não seja um problema para você mas não não vai ficar igual a minha fonte tá vendo que ela muda um pouquinho né então cuida que tem algumas configs aqui inclusive que elas são relacionadas a plugins E aí Claro elas não vão funcionar né não vai ficar igual ao meu editor bem certinho se você quiser copiar igual o meu vest code tem um vídeo no YouTube da Rocket City só vai lá procura por vs code tem Um vídeo lá que eu explico como eu configurei todo o meu vs code para ele ficar assim

ó mais minimalista Sem muitas opções em tela mas isso aqui é totalmente opcional certo e aí eu vou apagar também essa linha aqui ó linha set que tem esse US State aqui embaixo vou tirar as importações que eu não tô usando Posso arrancar todas elas e aí aqui eu vou tirar o Export default e trocar por um Export nomeado que é um Export sem o default né E eu prefiro dessa forma ah porque assim lá quando a gente for importar aqui ó a gente precisa passar o nome certinho ó por exemplo app que é o

mesmo nome que tá sendo exportado aqui de dentro senão ele vai dar erro quando eu uso Export default eu posso importar com o nome que eu quiser isso acaba acho que deixando mais feio ali né eu posso acabar esquecendo de trocar algum nome a aqui o ponto test x não é necessário vou remover e o que eu gosto de fazer é Deixar os arquivos com letra minúscula Então vou trocar aqui ó paraa app com letra minúscula aqui tá vendo que ele ele se perdeu né então dou um cont contrl shift P Restart TS server aqui

ó typescript Restart TS server para ele é recarregar né o o language server do typescript e perceber que esse arquivo realmente existe feito isso nosso projeto agora só tem um hello world totalmente em branco né a gente fez uma limpa geral nele antes da gente começar A criar aqui o nosso projeto eu vou fazer algumas coisas da mesma forma que a gente fez no backend por exemplo vou começar instalando o biome que a gente vai est utilizando aqui PR a formatação e link in de código veja que tô fazendo a instalação do pacote igual eu

fiz no backend né E aí lá no backend ó eu posso copiar esse biome P Jason aqui e a gente vai usar o mesmo no front end então venho aqui no front end crio biome Jason e colo aqui dentro tá aí eu volto lá no Back dou um cont contrl shift P procuro por Open workspace settings que é onde a gente fez essa configuração aqui lembra de usar o biome como default formater né no nosso projeto volto no front endol shift P abro as workspace settings que são aquelas settings só do projeto e não do

do vest code Global né e colo a mesma coisa agora a gente vai perceber que se eu for em algum projeto aqui né aqui ele ainda Não funcionou hum talvez se eu der um Reload Window beleza agora sim ó agora eu venho nos nos arquivos aqui ó só salvar e aqui a gente pode ver que ele tá dando um erroz inho né Isso aqui é porque por padrão o biome né a parte de linting do biome que é a parte que faz a gente eh seguir boas práticas né dentro da da linguagem ela pede pra

gente não utilizar o non null assertion que é esse essa instrução aqui aqui com o ponto Exclamação que é uma forma da gente dizer para o typescript que essa variável aqui nunca vai estar nula ou seja que este elemento root no HTML aqui ó sempre vai existir né porque todo get Element by ID ele pode acabar retornando por e nulo porque o elemento pode não existir e aqui a gente tá falando olha não nunca vai ser nulo e ele pede pra gente não usar isso só que eh essa regra não faz tanto sentido aqui né

então eu vou desabilitar ela e para isso eu posso Vir aqui em bom. json a gente vem na opção linter dentro de rules tá vendo ó e a gente vem aqui e procura é da mesma forma que ele bota aqui ó passa Mouse por cima ó Style not é no no New assertion então a gente escreve Style E aí dentro do objeto no no New assertion E aí a gente pode botar aqui off por exemplo E aí veja que a regra já não se aplica mais né então com o biome configurado aqui na nossa aplicação

a gente vai partir pra próxima biblioteca Que a gente vai utilizar aqui em todo o projeto que é o Tent CSS o tem CSS caso você nunca tenha utilizado é uma biblioteca que tá bem famosa tá é é uma biblioteca que já se ah digamos já tá bem sólida no mercado muitas empresas usando principalmente empresas gringas né então se você tem vontade de algum momento trabalhar com a empresa na gringa ah como frontend recomendo dar uma olhada no twind Ah não que é uma obrigação não eu acho que é quando vem Para essa parte ferramental

o CSS dá pra gente fazer o CSS da aplicação de divers essas formas O mais importante é que você entenda a base do CSS né Ah assim como você quando vai utilizar um Framework você precisa entender a base do JavaScript Ah mas o twind ele é uma biblioteca de utility classes tá então o que que é uma biblioteca de utility classes cada classe que você bota no elemento aplica um CSS diferente e por mais que claro se é o seu primeiro Contato com T você vai pensar logo no começo meu Deus do céu em que

ponto chegamos né o meu HTML vai ficar todo sujo sim entendo mas o te tem algumas vantagens Principalmente quando conectado com os frameworks que a gente tem atualmente as bibliotecas de construção de interface como react View ah ou qualquer outra biblioteca né que é o seguinte né uma das vantagens do tnd quando conectado com essas bibliotecas é que essas bibliotecas elas já têm um Padrão de componentização que é dividir a nossa aplicação em vários componentes eh pequenos né ou seja se eu tenho a minha aplicação dividida em vários pedacinhos pequenos e eu tenho menos código

em tela né menos HTML em cada desses cada pedacinho desses e consequentemente menos classes ou seja o como eu não tenho arquivos geralmente muito grandes essas classes elas acabam não trazendo um efeito muito negativo visual ali na hora que a gente tá vendo O código mas tem outras e duas vantagens do Tent que eu acho que são a parte principal da ferramenta a primeira delas é que o Tent ele segue com uma ideia de theme first api ou Ah uma API com o tema vindo como prioridade que que isso quer dizer você não pode sair

utilizando Ou pelo menos não deveria né Você pode mas não é recomendado você sair utilizando qualquer valor por exemplo para tamanho de fonte para espaçamento para arredondamento de borda não você vai Configurar o seu tema Ou seja você vai falar quais são os padrões que o seu projeto vai seguir Ou seja eu sempre vou utilizar fontes de tamanho e 12 14 16 18 20 ou 24 e você não tem como fugir não vai chegar lá um dev por exemplo ele pode mas ele não deveria chegar lá e botar por exemplo uma fonte de tamanho 23

sabe sendo que não tá sendo usado Aquilo em nenhum outro lugar da aplicação isso Fale para qualquer outra propriedade do CSS Eh como cores tamanhos espaçamento E por aí vai outra coisa que é muito legal do twind é que eu acho que é o grande potencial de onde eu vejo o twind aplicado num projeto em larga escala é que a manutenção ela sempre vai ser local o que que isso quer dizer imagina que você tá olhando pra sua interface e aí você percebe Poxa ten Tem um errinho aqui né essa fonte aqui ela tá com

tamanho H muito grande quando a gente não tá usando tnd a gente tem que ficar Muitas vezes a gente vai lá no componente ver qual classe ou qual ID tá sendo aplicado a esse elemento E aí a gente vai ver que às vezes pô tem um um outro elemento que tá sem querer atrapalhando o CSS desse elemento aqui porque ele tá ou seja com o CSS puro quando a gente não usa o twind né É é é muito comum a gente se perder muitas vezes quando o nosso projeto é muito grande e ter um CSS

de um outro elemento que tá Às vezes a atrapalhando né o CSS De um elemento que ele nem deveria né aplicando o CSS no elemento que ele não deveria no twind não todos os elementos do HTML eles têm o seu CSS zerado a partir do momento né estilização zerada a partir do momento que a gente instala o Tent E aí a gente precisa aplicar a cada elemento exclusivamente o as classes que vão estilizar aquele elemento e por mais que você pense Nossa esse tnd é uma mod inha Total isso não faz sentido pro CSS é

cuidado porque se A gente for pegar ah outras estratégias de utilização Como o próprio Swift né o Swift Y agora né a linguagem da Apple ah com os aplicativos para iOS a gente tá indo pel pela mesma linha né Se você pegar um código Swift Y você vai ver algo parecido porque também é utilizado interface declarativa o CSS ele fica próximo à estrutura da página se a gente pegar outras ferramentas como flutter mesma coisa né totalmente interface declarativa se a gente for pegar bom tem Muitos né Poderia ficar o jetpack compose Poderia ficar aqui citando

vários ou seja não não é só o Tent que tá indo por essa linha existe uma motivação e eu entendo você pode não gostar mas não é por isso que você pode se negar a aprender caso Em algum momento seja necessário você aprender né E aí a gente vai est utilizando o Tend aqui dentro então vou começar instalando o Tend aqui dentro para instalar o Tend você pode vir aqui ó ah no no Tent Docs Vem aqui em Framework Guides tá vendo e você procura aqui ó Vit que é o que a gente tá usando

E aí tem todo o tutorial a gente vai começar executando esse primeiro comando aqui ó ele vai instalar o tnd o post CSS e o auto prefixer e depois eu vou executar Este comando aqui só aguardar aqui ele fazer a instalação o teend init ele vai criar o arquivo de configuração do T que tá aqui ó e agora ele pede pra gente abrir esse arquivo de configuração e jogar essas linhas aqui Então vou só seguir exatamente o que ele tá pedindo aqui dentro e aí ele pede pra gente abrir o index CSS que tá aqui

jogar essas três linhas aqui e aí pronto nosso projeto já tá com T configurado só vamos reiniciar o projeto aqui outra coisa que é importante é que no seu vest code você esteja com a extensão do twind instalado tá senão você não vai conseguir eh receber esse auto complete de classes aqui quando você for escrever as suas classes Ok feito isso a gente Pode vir aqui no nosso app.tsx onde a gente tem esse H1 e eu posso colocar uma classe nele só uma coisa importante é que no no react a gente não usa classe e

s Class name tá isso é a mesma coisa que uma classe no JavaScript porém a gente bota esse name aqui junto tá E aí se eu vier aqui nesse título e botar nele por exemplo um BG black que é uma cor de fundo preta e a cor do texto branca e colocar um tamanho grande aqui por exemplo um text XL que seria tamanho de 20 pixels né a gente pode ver aqui o a classe text XL ela coloca essas duas propriedades né Font size e aqui o t usa tudo com unidade relativa né que é

o ham salvo volto aqui no navegador abro aqui e veja que agora o meu H1 aqui ele tem fundo preto cor do texto branca e ele é um pouquinho maior né se a gente aumentar ele mais ainda botar 3 XL que seria 30 pixels de tamanho olha só ele aumentou mais ainda né então a gente vai utilizar essas classes aí do twind para Fazer a estilização do nosso projeto e a gente vai começar estilizando já de Cara essa criando essa primeira tela aqui juntos que é a tela de quando o usuário não tem nenhuma meta

cadastrada dentro da aplicação tá E aí Claro conforme a gente for desenvolvendo mais telas a gente vai aprendendo juntos aí é mais sobre react mais sobre Tent e tudo mais né Ah claro aqui a gente vai precisar de algumas imagens né como você bem pode ver então o que que eu vou fazer ó eu Vou vir aqui na esquerda vou procurar aqui ó esse primeiro frame aqui ó é essa primeira imagem aqui do logo vou vir aqui em Export ou ao invés de vir em Export você pode também clicar com o botão direito aqui ó

dar um copy as svd né você copiar o vetor E aí veja eu vou criar agora aqui dentro de sece vou criar uma pastinha assets e aqui dentro eu vou criar um arquivo chamado Ah logo traço in traço Orbit svg e vou Colar o código ali dentro fazer a mesma coisa com esse svg aqui de baixo ó que o nome dele é let's start tá vendo vou clicar aqui copy s svg e let's start illustration com dois Ls né salvo e pronto já estão ali as duas imagens que a gente precisa utilizar primeira coisa que

a gente tem que ver É que a nossa tela como um todo né todas as telas da aplicação elas seguem e um background Preto né quase Preto Ah o twind ah deixa eu entrar na documentação dos tnds aqui Ó o twind ele vem com algumas cores pré setadas né então se a gente vem aqui na documentação do te aqui na esquerda a gente consegue ver todas as propriedades do CSS como a gente consegue escrever elas com tnd Mas tem uma opção aqui em cima que é customization Colors e o tnd ele vem com uma base

né de cores pré-estabelecidas né geralmente para quem não tem Muita criatividade não tem um designer ali por trás né você pode seguir essas cores Cara eu vou te dizer que 90% dos meus projetos Eu uso as cores do twind tá eu acabo nem criando uma paleta de cores própria e aqui ele tem várias tonalidades de Cinza tá vendo umas mais puxadas para Azul outras mais puxadas pro marrom mas tem essa zinc que ela é totalmente cinza ela não é puxada nem pro marrom nem pro azul e eu vou usar as tonalidades de Cinza 50 mais

claro até 950 mais escuro e aí eu venho aqui no index HTML ó venho aqui no bar e aí como Eu não tô num componente react agora né no arquivo react eu não preciso escrever Class name aqui pode ser Class mesmo tá E aí eu vou botar BG zinc 950 que é aquela tonalidade mais escura e text zinc 50 que é a tonalidade mais clara pros textos e vou adicionar aqui também uma opção chamada analized Isso aqui vai adicionar essas duas propriedades aqui ó que elas aplicam principalmente no Chrome E se eu não me engano

no Windows nem funciona é que é deixar as fontes né Da nossa aplicação mais detalhadas né Elas não ficam tão grosseiras digamos assim pronto ó pode ver que o fundo da nossa aplicação aqui já tá cinza e aí lá no nosso app agora eu posso remover essas classes aqui do H1 ele vai continuar cinza com o texto em branco né que é o que a gente padronizou aí para toda a aplicação E agora se a gente for ver aqui na nossa tela a gente tem todos os elementos alinhados ao centro né então aqui no meu

App ó o que que eu vou Fazer vou começar colocando um parênteses porque agora eu vou ter um HTML com várias linhas e aí no react quando a gente tem esse HTML aqui dentro né isso aqui a gente chama de jsx que é basicamente JavaScript XML né que é o XML né o ou HTML digamos assim né então quando a gente escreve HTML dentro do react a gente chama isso de jsx inclusive o próprio View né agora tem suporte a jsx também é algo bem já difundido na na comunidade né E aí a Gente vai

começar então colocando Ah uma div aqui por volta de tudo e eu vou passar para ela basicamente o seguinte Ah vou passar aqui um h screen Isso aqui vai fazer com que ela ocupe 100% da tela né usando o viewport height né e vou passar aqui ah um Flex para botar o display Flex Flex co para botar o Flex Direction colum porque os elementos fiquem um abaixo do outro ah e eu vou alinhar agora tudo ao centro tanto verticalmente quanto ou melhor Tanto horizontalmente quando verticalment certo e aí eu tenho espaçamento aqui entre os elementos

né se eu for ver aqui no filme Ó 32 de espaçamento isso quando a gente tem o Flex a gente aplica o espaçamento usando GAP E aí no t tudo que quer espaçamento a gente sempre pensa múltiplos de quatro ou seja se eu boto GAP 1 quer dizer 4 pixels se no caso aqui eu tenho 32 32 di por 4 8 certo então então eu boto GAP 8 eu tenho 32 pixels de espaçamento e aqui Agora eu vou botar as nossas imagens no react quando eu quero carregar uma imagem eu vou carregar essa imagem como

uma importação tá E aqui tem duas na verdade ã vamos lá tem duas formas de de eu carregar imagens aqui dentro ah do react tá vou te mostrar as duas vamos lá primeiro eu vou importar Ah o nosso logo aqui então vou botar port logo from vou passar aqui Ah o endereço né então pon barra assets bar logo in Orbit svg e eu Vou colocar uma imagem aqui dentro ó IMG sece E aí agora ó eu não posso eu preciso passar esta variável aqui dentro do search tá se eu passar assim Isso aqui é uma

string né não tô passando a variável então no react quando eu quero passar uma variável dentro aqui de um atributo do HTML eu sempre uso Chaves ó então passo Chaves e aí boto o logo e aí posso fechar aag aqui dentro só que é importante que as imagens tenham texto alternativo né então a gente pode botar Aqui ó in Orbit salvo voltamos aqui e veja nossa imagem já tá aqui dentro né se eu for aqui no inspecionar Network ó veja que ele carregou a imagem aqui ó no momento que eu abri a minha aplicação então

ele tá abrindo aqui ó o logo in Orbit e eu vou deixar para mostrar esse outro modelo de carregar imagens no react um pouquinho mais pra frente tá vamos lá a gente a gente vai botar agora a nossa outra ilustração então importar aqui ó Import Ah vou chamar de let's start from bar assets barlet start illustration boto ela aqui embaixo salvo e olha ali Nossa ilustração já tá aqui dentro certo abaixo aqui da nossa imagem a gente vai ter esse texto aqui ó vou botar ele dentro de um parágrafo tá se eu salvar veja ele

vai ficar ali dentro só que a gente vai aplicar aqui alguma classes né porque não ficou tão legal tão igual como tenho ali dentro né primeiro text zinc 300 pra cor ficar um pouquinho mais Opaco eu posso pegar todas tudo isso aqui ó text zink 300 tá ele tem um Line height 160 aqui no t a gente usa o leading relaxed que é um Line height de 162,5 é o mais próximo não tem problema a gente pode usar esse Vamos botar nele também um Max with que é o Max da w de 80 que é

320 pixels veja porque é sempre múltiplos de 4 certo e o text Center pro texto ficar alinhado ao centro salvo veja agora sim meu texto já Tá bem parecido aqui né ele tem agora um botão aqui embaixo e a gente vai fazer isso eu vou criar um botão dentro do botão tá escrito cadastrar meta Além disso dentro do botão eu tenho um ícone como eu bem Posso ver ali um maizinho né E aí para isso eu vou instalar uma biblioteca de ícones aqui no meu projeto chamada lucid traço react aguardar um pouquinho feito isso nós

vamos lá nas importações e vou importar de lucid react o ícone Que é o Plus posso ver os nomes dos ícones vindo aqui no figma clico aqui perto dele com o control né Eu clico aqui no botão e aqui ó lucid barra Plus quer dizer que o ícone se chama Plus venho aqui o Icone ele tá na esquerda do texto né então vou jogar ele deste lado aqui ele é um componente dessa forma aqui e aí passo para ele uma classe também size traço qu porque eu quero que ele tenha with e height de 16

pixels né como eu bem Posso ver aqui ó se eu Clicar no ícone ó 16 por 16 e agora vamos estilizar o botão primeira coisa que eu posso ver do botão aqui ó PED em lateral 16 pixels Então vamos adicionar algumas classes aqui no botão né PED em lateral qu que dá 16 aqui o biome tá pedindo pra gente colocar a propriedade Type boton perfeito ah que mais pedem vertical de 10 Poxa mas 10 não tem múltiplo de 4 né quando são valores muito pequenos abaixo de 12 o tem tem números quebrados então por exemplo

2.5 x 4 daria 10 né então eu tenho 1.5 0.5 2.5 são os valores que eu tenho quebrados no t tá arredondamento de borda o então é rounded x L ó ou melhor LG que dá 8 pixels de border radios ali ó Show cor de fundo Violet 500 então BG Violet 500 cor do texto aqui tá errado índigo 50 deveria ser Violet 50 então text Violet 50 Ah que mais espaçamento aqui ó entre o ícone e o texto oito então a gente vai botar o qu um Flex items Center GAP 2 Para dar espaçamento ali

vamos salvar e ver como é que tá ficando olha ali legal né só o que acontece ó se a gente for ver no botão aqui ó o tamanho do texto clicando aqui no texto mesmo cadastrar meta 14 e median então a gente vai trocar também ó text small que é 14 e fonte median seria o Font weight 500 Além disso ele tem um um lead spacing aqui ó menos 2% que é para deixar ele um pouquinho mais apertado por isso a gente vai utilizar aqui o Tracking tight que é para dar uma no espaçamento entre

as letras e aí pronto já temos o nosso botão igualzinho tá ali no figma se eu vi aqui na direita eu vou ver que os botões né eles T algumas propriedades diferentes por exemplo quando eu passo o mouse por cima ele tem que escurecer um pouquinho como é que eu faço isso aqui no t simples só veio aqui passo ó Hover dois pontos e agora a propriedade que eu quero mudar quando fizer o Rover ó BG Violet TR 600 Então veja ele era 500 agora escurecer ele um pouquinho para 600 ó passa o mouse ó

já escureceu tá restante das propriedades não vamos colocar agora nosso objetivo mais era finalizar essa página do empty gos aqui pra gente aprender um pouquinho mais sobre como que o twind funciona uma coisa novamente se você quer aprender mais sobre twind tem vários vídeos no canal da Rocket City é só você entrar lá e procurar por twind tem um projeto inclusive que eu Copio a interface inteiro dois Spotify utilizando twind CSS tem um vídeo que eu explico boas práticas com twind tem muita coisa mas calma que claro a gente ainda vai criar mais coisas com

te aqui agora mas eu acho uma ferramenta incrível para você também aprender um pouquinho mais show agora que a gente terminou é esse componente aqui nessa tela ah a gente tem mais um monte de telas aqui pra gente criar né Então bora lá aqui pra gente não investir A grande Maioria do tempo né das nossas aulas do frontend é só fazendo CSS que é algo que você pode aprender em muitos conteúdos né como eu bem falei a gente vai sim fazer CSS mas para também não fazer todo CSS eu deixei um zip aqui nos materiais

né que você encontra do nlw e se você pegar esse Zip e eh extrair ele você vai receber uma pastinha chamada ui Vou até apagar o zip aqui você vai pegar essa pasta aqui ó ela para dentro de Sece e aqui eu vou criar dentro de sece uma pasta components e aí vou mover ui para dentro de components aqui ó então vai ficar search components E aí vem Ui aqui dentro de ui eu deixei preparado vários componentes e componentes né no react são basicamente funções que Retornam HTML né E esses esses componentes aqui ó eles

são como eu falei são divs né que tem algumas classes aplicadas a eles só Que para alguns componentes funcionar a gente vai ter que instalar algumas bibliotecas então eu vou junto com você entrando em cada componente e vendo as bibliotecas que faltam por exemplo aqui ó a gente vai instalar essa twind merge que que essa biblioteca twind merge ela faz né ela basicamente permite que eu faça a união de classes tnd né então eu passo por exemplo classes base que esse component sempre vai ter e esse componente pode receber classes Adicionais se você quer entender

como funciona a mais né um pouco mais fundo aqui eu tem Wind merge tem um vídeo muito bom no canal da Rocket aqui só você vir aqui no canal da Rocket vem aqui na busca twind e aí você pode dar uma olhada ã cadê Aqui ó três dicas para escalar apps react containment nesse vídeo aqui eu mostro tudo que eu usei para criar esses componentes aqui ó twind merge tá vendo aqui eu uso twind variants também Que a gente vai tá usando aqui ó nesse botão Ó tem o invariants tá vendo Então aqui eu não

vou entrar muito no mérito porque nesse nlw específico como eu falei diferente dos outros nlw onde se você já teve a oportunidade de participar a gente e fazer o CSS todo do zero só que a gente passa muito tempo no CSS esse aqui eu quis dar um pouquinho mais de foco na parte de formulários e fet de dados né que é a conexão do meu front aqui com o meu backend por isso Que eu t Te Entregando isso pronto então beleza A gente já instalou aqui no Radi group aqui a gente vai instalar essa biblioteca

aqui então é só a gente ir entrando nos arquivos copiando o nome das bibliotecas que tá dando erro aqui em cima e instalando aqui também aqui nada Lab nada input nada e aqui a última e você vai ver que eh não tem eh dentro desses componentes aqui que eu te entreguei não tem nada de JavaScript né São basicamente tags com CSS né então o botão por exemplo é só CSS né O que muda aqui no botão É que eu tô usando uma biblioteca chamada T in variants que ela permite por exemplo que eu faça um

botão ele ter diferentes eh cores e tamanhos baseado em atributos que eu passo para ele então se eu passar por exemplo Button com size small ele vai ter um CSS diferente se eu não passar nada ele usa o default né então é é basicamente para isso Tá Mas como eu Falei tudo explicado naquele vídeo não precisa fazer agora tá o nosso foco nestas aulas aqui não é CSS como eu bem falei não precisa assistir esse vídeo agora deixa lá depois você assiste para entender um pouquinho mais a fundo aqui a gente só vai sair utilizando

inclusive aqui agora no nosso nosso app né onde a gente tem esse botão cadastrar meta a gente pode trocar por este botão que a gente instalou aqui então Olha só eu vou comentar esse botão aqui e vou escrever Aqui ó buton com b maiúsculo agora ele vai sugerir a gente importar aqui ó lá de components y Button tá vou fechar a tag aqui e aí eu passo o ícone e o texto aqui dentro ó Plus e cadastrar meta salvo e a gente vai ver que o resultado ó é o mesmo isso aqui é o mesmo

tá vendo que o botão é igual Ou seja aquele botão lá o que muda é que agora nesse botão aqui ó eu posso passar um size small caso eu queira o Size SM ele vai ficar Menorzinho Ó mas aqui nesse caso eu não quero né ou eu posso passar também ó uma propriedade chamada Variant E aí tem o primary que é o roxinho né ou secondary aqui ó que ele é cinza ó então eu eu deixei já configurado essas duas opções pra gente tá mas como eu falei não é o foco a gente e entender

tudo isso agora naé parte de CSS mas tá feito isso que que a gente vai construir agora né a gente vai Construir essa essa parte aqui de c castrar meta tá e como é que a gente vai fazer isso a gente vai fazer isso usando aqui esse componente de dialog tá e como é que ele funciona tá esse componente dialog aqui ele usa uma biblioteca chamada hadix né inclusive vários componentes aqui que eu usei tanto dialog quanto Radio group quanto Progress bar eles usam essa biblioteca hadix que que é essa biblioteca hadix aqui a gente

vem em Hadix primitives get started e aqui no lado a gente vai encontrar que tem vários componentes ó essa biblioteca que que ela faz ela traz ah ah traz comportamentos que são comuns da gente ter na web em formato de componentes no react então por exemplo Ah um select né o select que é geralmente quando a gente quer clicar e selecionar alguma coisa né a gente tem um elemento né em o select lá do formulário só que o CSS ele tem uma Limitação a gente não consegue estilizar aquele select e por completo então radix ele

tem um componente select que a gente pode usar estilizar ele da maneira que a gente quiser e o mais legal de todos esses componentes aqui do hadx é que eles são 100% acessíveis isso quer dizer que a gente consegue né E esse componente ele passa a ser lido como um select e nativo para o leitor de tela Inclusive eu consigo navegar por ele ó usando o teclado uso enter para Selecionar uso enter para abrir e todos os componentes são assim por exemplo naveg menu aqui ó eu consigo ir pelo eh clicar aqui ó de eu

vem pelo Tab dou um enter ó consigo navegar nele inteirinho utilizando aqui o tab né o tab o teclado e por aí vai né Isso é muito legal quando a gente quer criar uma aplicação mais acessível e a gente vai ver que tem vários e vários componentes por exemplo acordeon né onde a gente faz esse efeito aqui à a gente tem aqui Avatar tem checkbox tem collapsible né que quando eu quero abrir alguma coisa mais tem context menu que é quando eu clico o botão direito ó tem dialog né que é quando eu quero que

apareça um modal ou alguma coisa em cima da tela que é o que a gente vai usar né drop Down menu Ó tem muita e muita coisa legal que dá para você utilizar aqui dentro ó tabs né funcionamento de Abas então você não precisa ficar criando as coisas do zero né ele já entrega pronto E aqui nesse caso a gente vai usar o dialog que é basicamente quando eu clicar no botão eu quero que algo apareça por cima e é o que a gente vai fazer quando clicar em cadastrar meta aparece aqui o formulário de

criar uma nova meta e como é que funciona isso né eu vou basicamente aqui ó como é que como é que a gente vai fazer isso eu vou colocar aqui eh ã pode Ser vou botar por volta de tudo aqui ó Então vou pegar essa minha div vou dar um cont CRL x e vou começar colocando o dialog que eu importo de components e y dialog Cuidado para importar do local certo tá não importar lá do radix E aí aqui dentro eu boto a div que eu tinha copiado isso aqui não vai mudar nada o

dom F5 não muda nada vai mudar a partir do momento que eu botar aqui embaixo eu vou botar dialog content que eu vou também importar de Components e i dialog e aí dentro eu vou escrever Oi tá se eu salvar aqui agora não vai mostrar nada por quê Porque o modal tá fechado ainda se eu clico no botão ele não abre certo que que eu tenho que fazer então trocar o meu botão pelo dialog Trigger que tá dentro aqui ó também ó dialog Trigger que é o que vai fazer quando eu clicar né abrir o

meu o meu dialog ou eu posso vir caso eu esteja só testando venho aqui no dialog ó e coloco nele Open e é isso aqui eu Estou dizendo que ele deve sempre estar aberto se eu salvo e volto Olha só agora eu tenho já ali na direita aparecendo né e eu não consigo fechar ó porque ele tá Open para sempre né eu não não eu tô fixando né esse valor de aberto mas eu quero que esse botão aqui Abra o dialog então o que que eu vou fazer ó pego isso aqui jogo dialog Trigger importar

aqui do components e o i dialog e jogo o botão dentro se eu salvo aqui agora e clico no botão ó ele Tá abrindo o dialog Tá vendo só que se eu vier aqui inspecionar o botão a gente vai ver que ele criou um botão dentro de outro por quê Porque o dialog trigger é um botão e esse carinha aqui também é um botão e aí tem uma opção né que o hadix nos dá pra grande maioria dos componentes que é as child se eu passo essa propriedade as child no no componente do hadix Ele

não cria dois ele usa o de dentro apenas como sendo o Trigger salvo e vejo que agora ó só tem Um botão tá vendo não tem mais os dois e aí eu clico aqui ó abriu o dialog legal né e agora aqui dentro do dialog né eu vou criar aqui a estrutura pra criação né a estrutura visual pra criação de uma nova de uma nova meta né então se eu for ver aqui eu começo tendo aqui o cadastrar meta e um botãozinho de fechar já então vamos fazer isso né começar aqui com uma div colocar

aqui nela um Flex Ah items Center e justify between né porque eu quero um totalmente pra esquerda e um totalmente pra direita e aí aqui dentro eu vou botar o dialog title que eu vou importar de components e i dialog também é cadastrar meta e o dialog Close que eu também vou importar lá de dentro e aí dentro desse dialog Close eu vou botar só o iconz então boto o sinal de menor x e ele vai dar a sugestão de importar de dentro do lucid react e nesse ícone eu vou botar um Tamanho 5 que

é 20 pixels né de largura e altura e text zync 600 salvo volto ali na web clico para abrir Olha lá já tem ó clico no botão ele já fecha sozinho pra gente tá E aí agora embaixo Aqui eu quero botar esse texto ó adicione atividades e tudo mais então vou fazer o seguinte V botar uma div por volta dessa vou mover aqui o fechamento da tag Aqui para baixo daí nessa div aqui eu vou botar Ah um Flex Flexco GAP 3 que eu quero dar um distanciamento de 12 pixels aqui ó 12 e aqui

eu boto um dialog description que eu também vou importar lá do mesmo lugar veja que é o componente White dialog veja que agora volto ali ó já tá a descrição ali certinho e agora a gente vai criar o nosso formulário então o que que eu vou fazer aqui por volta dessa div aqui vou jogar mais uma div porque agora a distância é um pouco maior do formulário veja que daqui para cá é é 24 Já então boto uma div nessa div eu vou botar Flex flexco e GAP o 6 para dar 24 né Aí eu

jogo aquela div que a gente já tinha e agora aqui embaixo eu jogo o meu formulário no meu formulário aqui eu vou jogar nele uma classe Flex flexco também tá porque os elementos dentro do formulário estão um abaixo do outro e aí tá vendo que os botões do formulário eles estão lá embaixo então o que que eu vou fazer eu vou botar aqui um justify between porque Eu quero que os botões sejam jogados lá para baixo e vou jogar no formulário também um Flex 1 que que isso aqui vai fazer vai fazer com que o

formulário né o Flex 1 ele basicamente adiciona a opção grow 1 Flex shrink 1 e Flex bases 0% né o Flex grow 1 permite com que o formulário ocupe Todo o espaço disponível então isso aqui vai fazer com que o formulário ocupe Todo o espaço ali de altura do meu dialog né E aí agora Aqui dentro do meu formulário eu vou fazer o seguinte eu vou criar uma div onde vão ficar os campos aqui do meu formulário e lá embaixo eu vou ter uma div onde vão ter os meus botões vou fazer Inclusive essa div

Primeiro vou botar nela aqui um Flex items Center GAP 3 que é o distanciamento aqui é o de 12 pixels entre eles né E aí vou jogar dois botões aqui dentro o primeiro botão ele vai tá escrito fechar e o segundo botão vai tá escrito salvar se Eu vier aqui para ver como é que tá ficando ó não tá muito legal primeiro porque esse botão de fechar precisa ser cinza então vou passar aqui para ele Variant secondary ó já tá cinza tá e eu quero que eles ocupem o máximo da largura possível então eu vou

vir aqui no primeiro botão vou jogar nele um Flex um mesma lógica do formulário ocupar o máximo de espaço possível veja que agora ele ocupou o máximo de espaço só que o botão salvar ficou meio pequeno Se eu Jogar Flex 1 nele também os dois vão ocupar o mesmo tamanho Olha lá legal né E aí eu quero que o botão fechar ele Feche o modal tá claro clicando aqui ele tá fechando por quê Porque um botão dentro de um formulário por padrão ele vira um botão de submit só que se eu passo um Type buton

nele que não é um botão de submit ó quando eu abro o modal e clico nada acontece Tá vendo como é que eu faço para ele fechar aqui o nosso modal tá vendo esse dialog Close que eu Tenho aqui dentro Ó vou botar ele por volta do meu [Aplausos] botão só que aí aqui vai acontecer a mesma coisa que eu falei antes o dialog Close é um botão isso aqui é um botão vai ficar um botão dentro do outro então eu venho aqui no dial close e boto as Child salvo e agora ó clico já

fechou certo então falta agora os inputs aqui do meu formulário então no meu formulário vou Fazer o seguinte vou começar colocando aqui uma div Class name Flex Flex co GAP 6 E aí por volta de cada input com sua Label eu vou botar mais uma div então vão ser duas divs né A primeira aqui que é pro primeiro input E aí eu vou botar nela aqui um Flex flexco GAP 2 e nessa segunda também mesma coisa Flex flexco e GAP 2 vamos lá nessa primeira div aqui vou começar colocando uma Label com l maiúsculo e

vou importar lá de components e i Label e o texto vai Ser Qual a atividade embaixo dela eu vou botar um input com i maiúsculo importar lá dos componentes também e vou colocar nele aqui um placeholder praticar exercícios meditar etc Salv aqui agora a gente pode ver como que tá ficando já lá o nosso input inclusive nesse input eu vou botar a opção autofocus nele aqui ó com F maiúsculo Isso aqui vai fazer com que quando eu abro o modal o input já vem focado tá vendo bem legal né Além Disso Vou passar nele um

id title e aqui no Label pass um html for title né Toda Label ela pode ter a propriedade for só que aqui no react a gente chama de html for tá e dessa forma quando eu clico na Label ó ele faz o foco no input certo nessa outra div aqui de baixo mesma coisa eu também vou ter uma Label tá Só que essa Label aqui vai est escrito quantas vezes na semana e aí aqui embaixo dela eu vou ter o meu Radio group que eu vou importar também de Components ui Radio group E aí cada

item aqui né de cada dia da semana aqui ó isso aqui o radio group ele é o conjunto inteiro né cada item desses aqui ele vai ser um Radio group item que eu tenho aqui também dentro de components Bari bar radiogroup e aí dentro do item cada item ele precisa ter um valor diferente então se o usuário selecionar esse primeiro item aqui é o valor um ou seja um dia na semana e aí eu posso Escrever aqui dentro por exemplo uma vez na semana se eu dou um enter aqui agora olha lá como é que

ficou uma vez na semana só que não tá muito legal aqui né porque ainda falta um emojinho que a gente vai colocar ali e aqui na esquerda falta um indicador ali se se esse aqui é o item selecionado ou não então que que a gente vai fazer aqui agora primeiro que tá faltando hã e deixa eu pensar aqui esses botões ficarem lá para baixo Deixa eu inspecionar aqui entender o que que tá acontecendo tá então aqui eu tenho minha div aí essa div aqui ela não tá ocupando o tamanho todo que é Uhum eu acho

que aqui tá faltando nessa divia aqui ó que é a que tá logo dentro do meu dialog content aqui ó botar nela um h Full para ela ocupar altura toda agora sim perfeito tá vamos lá então agora a gente vai ter um Radio group item desse aqui para cada Dia da semana só que dentro dele não vai ter só esse texto aqui tá eu vou botar dentro dele o radio group indicator tá ó e ele vai ficar só uma tag assim mesmo que vai gerar este carinha aqui ó e aí quando eu clico ó puf

já apareceu AL selecionado e lá no finalzinho eu vou ter um emoji né para cada um desses carinhas aí então o Emoji eu vou colocar dentro de um spa venho aqui no figma seleciono copio e jogo aqui dentro perfeito e aí esse um vez na semana né Uma vez na semana também vou colocar dentro de um spa porque eu quero adicionar um pouco de CSS mas se eu ver como é que tá ficando ó já tá bem legal vamos lá nesse uma vez na semana eu vou adicionar nele aqui um text zinc 300 text small

Font medium e vou colocar a opção leading non que que você vai fazer Line height um ou seja tirar o Line height né porque como eu sei que não vão ter várias linhas eu vou deixar ele o menor possível Então veja ó já ficou bem Legal aqui nesse nesse emoji mesma coisa tá vou aumentar um pouquinho a fonte 18 pixels e também vou tirar o Line height leading non salvo e show de bola agora a gente pode replicar esse Radio Group item mais por exemplo duas vezes nesse aqui eu vou trocar para o valor dois

duas vezes na semana esse aqui três três vezes na semana mas pra frente a gente vai criar as outras opções também tá mas aqui ó daí depois a gente vai botar um emojinho aqui diferente e aqui também Diferente né para cada uma dessas opções veja que eu clico entre elas ó e posso ir navegando né show de bola fecha o mudal e tranquilo a gente terminou aí uma boa parte da nossa aplicação né a gente copiou aí ah os nossos componentes que a gente vai utilizar paraa parte de interface criamos o nosso modal aqui o

nosso dialog né de criação de uma nova meta que claro ainda não tá funcionando né só CSS ainda mas mais paraa frente vai funcionar e agora falta a gente Criar a página ah principal da nossa aplicação que é quando o usuário já cadastrou alguma meta Então essa página aqui é quando o usuário Não cadastrou nenhuma meta ainda né vai ficar dessa forma como se fosse um um empty state né um estado de vazio e quando ele cadastrou alguma meta a gente vai ter essas duas telas aqui né essa tela é quando ele já cadastrou meta

porém não completou nenhuma meta ainda E essa tela aqui é quando ele já cadastrou a meta e Completou pelo menos alguma meta e aí a gente vai ter a listagem aqui embaixo Então bora lá né pra gente criar essa próxima tela né que que a gente vai fazer aqui né se você concordar comigo nessas telas aqui que ah onde o usuário já cadastrou alguma meta né nessas duas diferentes dessa aqui ahã ou melhor em comum com essa aqui também a gente vai ter a parte de cadastrar meta então aqui o botão de cadastrar meta fica

aqui daí ele abre o Modal aqui eu tenho o botão de cadastrar meta aqui em cima ele também vai abrir o modal mesma coisa então ou seja essa parte do modal aqui ó eh do dialog aqui eu vou precisar nas duas telas tá então o que que eu vou fazer aqui o react ele Gira né em torno desse conceito principal que é componente componente é uma forma de eu separar a minha aplicação em vários pedacinhos que depois quando juntos eles ficam eh formam o meu projeto né e eu posso criar Quantos componentes eu quiser por

exemplo eu posso vir aqui ó esse dialog content aqui ó posso pegar ele inteiro aqui olha que legal então peguei todo aquele dialog content tá vou aqui dentro de components criar um componente chamado Create traço go E aí eu exporto aqui de dentro uma função Create goog aquio que eui só que agora eu tenho que importar algumas paradas aqui né então Add Import cuidado ó porque aqui ele pede pra gente importar do radix mas não é eu tenho que importar lá do e y dialog senão ele vai vir sem o CSS E aí eu posso

ir nos outros e vou importando ó aqui o x aqui eu tenho que importar L seed o description cuidado para importar o local certo Label input ah Radio group aqui também ó cuidado ó não importa o rix é o segundo aqui ó Radio Group a gente pode ir nos Demais e importando buton por último e fechou ó os imports veja que eles ficaram tudo de ui barra e o nome do componente não lá do hadix Tá e agora eu venho aqui ó e boto onde tava o dialog content aqui ó boto Create go boto esse

meu novo componente que eu acabei de criar tá e o componente sempre começa com letra maiúscula tá E ele funciona como uma TNA do HTML e aí e olha só continua funcionando igual né então eu separei Para ficar com código menor veja que eu tenho várias importações que eu não tô mais usando posso dar um cont control shift P remove unused imports enter ó ele tira tudo ah como eu também posso pegar ó essa parte aqui ó essa div vou lá nos componentes e vou criar aqui ó é empt goals então quando eu não tenho

nenhuma meta né e eu crio um componente empty goal retorno e trago as importações aqui das Imagens né aqui para dentro aqui só tem que cuidar né porque agora como Eu movi esse componente para dentro de uma pasta components aqui não é mais ponto bar assets né porque eles não estão na mesma pasta tem que ser ponto pon bar assets quando é arquivo de imagem ele não ele não mostra erro tá infelizmente falando que não existe né aquele caminho então tem que cuidar pros importes ficarem B certinho importar o dialog Trigger aqui ó de Yu

bar dialog o Buton e o Plus e aqui novamente removo os imports não usados e jogo aqui empt gos tá perfeito ó tudo funcionando normal só o que que acontece agora né Eu ainda não consigo como no meu front end não tá conectado com meu backend eu ainda não consigo distinguir né se eu tenho metas cadastradas ou não então que que eu vou fazer eu vou comentar agora ó usando aqui o control e a barra essa linha aqui do empty gos vou comentar Aqui em cima também e a tela vai ficar preta e eu vou

criar um outro componente agora que é o weekly ah ou só summary ponto tsx que vai ser o componente que eu vou mostrar em tela quando o usuário tiver metas né então aqui ó vou botar H1 summary só pra gente ver e aqui embaixo do empt goals Vou botar aqui o meu componente summary salvo e tá lá ó então mais pra frente o que que a gente vai fazer vai fazer um if aqui né se o Usuário não tiver nenhuma meta mostra isso aqui se ele tiver alguma meta mostra isso aqui perfeito por enquanto como

eu não tenho né essa informação não vou fazer if nenhum aqui dentro e aí a gente vai começar a codar essa página aí do summary né Vamos lá começar aqui colocando uma div por volta de tudo Vou botar aqui nela ã a gente pode ver que ela tá ela tem uma largura Fixa aqui ó de 480 pixels e ela tem um espaçamento no topo aqui ó de 40 tá vendo Então a gente vai começar botando aqui nela espaçamento no topo e embaixo também que é o pading y que é tanto top quanto Bottom de 10

porque vezes 4 dá 40 né vou colocar uma largura fixa E aí eu posso botar aqui ó Max w traço e procurando algum valor que se assemelha aquele que eu tinha lá né que é 480 então o máximo que tem aqui ó é 384 tá vendo que nesse caso aqui não me resolve né porque 384 é muito pequeno precisava no mínimo 480 quando é esse Caso aqui eu posso vir aqui ó e jogo um coches E aí ele me permite colocar um valor que eu quiser então por exemplo 480 tá E aí vou botar aqui

também um pading X5 que é de 20 pixels para caso o usuário reduza bastante a tela não fique colado né os elementos aqui na direita e na esquerda Ahã MX Out para que dê o marg left e right Auto né fique Centralizado na tela ali Flex flexco porque tá um elemento abaixo do outro e GAP 6 né Por quê Porque os elementos Aqui a gente pode ver que eles TM espaçamento ó de 24 pixels salvo e agora a gente vai criar primeiro essa parte aqui em cima então começar colocando uma div nessa div aqui eu

vou botar um Flex items Center e justify between lá na direita eu vou ter o botãozinho cadastrar meta né então posso criar aqui ó um buton posso até copiar o botão que eu tenho aqui no emp gos aqui ó com o dialog Trigger junto né porque ele também vai abrir o modal então boto Aqui ó importo aqui o dialog Trigger importo o botão Porto o ícone e aqui só a gente vai no botão ó botar nele um size small PR ele ficar pequeninho a gente pode ver aqui no navegador ó que ele ficou um pouquinho

menor agora a gente quer esse iconz e esse 5 a 10 de Agosto tá vou começar colocando Primeiro só o 5 a 10 de Agosto depois a gente bota o iconz junto ali também então aqui a gente vai botar um Spam 5 a 10 de agosto e nesse spam eu vou colocar nele um large e um fonte semib Então olha lá já ficou lá agora o iconz olha só tenho duas opções Lembra que eu falei que eu ia te mostrar duas maneiras de carregar essas imagens no react Então a primeira maneira é aquela forma que

a gente já fez no empt gos né a gente salva lá o svg lá dentro da pastinha assets importa eles e qual que é o que que acontece quando a gente faz esse Import aqui né quando a gente Acessa a página a imagem é carregada né no Network aqui então é um carregamento que a gente chama de ah lazy né Ele é um carregamento Preguiçoso ele vai ele vai carregar Somente depois que o usuário já abriu a aplicação então quando uma imagem Ela carrega eh depois que o usuário já abriu a aplicação né que é

a grande maioria das imagens tem que ser assim eh geralmente a gente pode ter algo que a gente chama de layout shift que é o seguinte a imagem ela pode estar No primeiro momento ainda não foi carregada E aí depois ela aparece certo quando uma imagem ela é muito pequeninha né um vetor muito pequeninho a gente a gente pode usar o próprio vetor já direto no HTML então poderia vir aqui ó pegar o ícone clicar com o botão direito copy S svg E aí Claro se eu jogar esse vetor direto aqui dentro ó é muito

código tá vendo fica muita coisa então eu separo ele em um componente Então vou criar aqui ó in Orbit Icon E aí eu exporto in Orbit icon e retorno aqui o meu svg Ah aqui ele tá dando um errinho por o bio me pede para que todo svg eu inclua uma propriedade title falando o que que é esse ícone né Ah E aí eu posso botar aqui ó in Orbit logo icon ah ou só in Orbit ah pronto salvo veja que o biome ele já dá um Fix aqui em quase tudo tá E aí tem

algumas coisas aqui que são importantes tá tá vendo essas propriedades tipo Stop Color aqui ó no react a gente não usa os atributos separados por ifen ó eles são com letra dessa forma aqui ó em cel Case só que seria chato eu vir aqui e ajustar um por um né então tem uma outra forma de eu fazer isso quando eu venho aqui ó e copio um svg não copy S svg eu posso entrar num site aqui ó chamado Transform P Tools e aqui ele tem várias e ferramentas de transformar de um formato para outro tem

um aqui que é svg jsx tá vendo eu cola o svg aqui ó e agora eu Vou copiar só essa parte da tag do svg aqui ó até lá no final e aí eu substituo esta tag aqui perfeito posso tirar essa linha aqui ó props não preciso dela aqui e ele acabou removendo o title aqui que eu tinha botado né in Orbit Então pronto né veja que agora tá tudo como queel Case já aqui as propriedades Tá e agora eu posso vir aqui dentro ó e jogar o meu in Orbit icon só vou jogar uma

div por volta deles E nessa div também jogar um Flex item Center GAP 3 que é um espaçamento de 12 ali e veja que agora eu tenho o ícone Qual que é a diferença agora né se eu for no inspecionar e vier aqui no Network ó veja que em nenhum momento eu carreguei ssvg até se eu vier aqui selecionar image ó o US svg não foi carregado por quê Porque ele foi embutido direto no HTML ó ele tá aqui ó direto no HTML ele não é uma tag image né então ele é ele faz parte

do HTML né Então quando a gente tem iconz menores assim essa é uma ótima estratégia tá agora a gente vai para essa barra de progresso né que ela vai ficar abaixo dessa div aqui que representa aquele meu cabeçalho essa barra de progresso eu vou colocar uma div por volta dela Flex flexco GAP 3 e aí dentro dela aqui eu vou jogar o meu Progress que eu importo lá de / Progress bar e dentro o Progress indicator que é a barra de Progresso em Si né aqui no Progress eu posso passar para ele duas propriedades a

propriedade Max que é qual que é o valor máximo Então pensa se eu completei oito de 15 metas eu posso falar olha o valor máximo é 15 por exemplo e qual que é o valor atual Então e e quando a gente passa números paraa propriedade no react a gente não usa assim tá isso aqui geralmente não faz ó até dá erro né a gente usa nesse formato aqui quando é número tá só para string que a gente usa Aspas mesmo e aí eu tô em oito então completei de oito de no máximo 15 acho que

faz mais sentio velho vir antes aqui né E aqui no Progress indicator eu vou precisar passar para ele um estilo tá E aí no react quando a gente quer passar um estilo in Line né um estilo eh aqui digamos é por exemplo eu quero passar uma wif em porcentagem né nesse caso eu não não uso twind tá quando eu quero nesse caso é de passar um valor que ele é calculado através de um Cálculo JavaScript aí eu não uso Tend porque como eu falei o Tend ele tem valores pré-definidos quando eu quero fugir desses valores

pré-definidos Geralmente eu uso Style E aí no HTML por padrão a gente faria algo assim ó Style botaria aspas e Faria with if 200 pixels por exemplo no react a gente não faz assim a gente usa a sintae de objetos Então olha só eu uso novamente chave lembra chave indica que eu tô querendo colocar uma variável JavaScript aqui dentro e aí eu posso separar essa variável aqui por exemplo ó Style e coloco 200 e aí passo Style dessa forma aqui ó salvo veja aqui vai ficar ali ó barra com irif 200 ou eu posso pegar

já isso aqui ó o objeto mesmo e jogo aqui veja que daí a chave vai ficar repetida aqui né Cuidado para não se confundir é assim mesmo né porque essa chave de dentro representa um objeto e aí tá lá posso passar também uma string por Exemplo 50% né vai funcionar também tá ali na metadinha abaixo aqui do Progress eu vou passar uma div com o Class name Flex item Center justify between text Extra small e text zinc 400 e aí é onde vão ficar esses dois textinhos que estão aqui abaixo da Barra progresso no primeiro

texto Eu vou ter esse texto aqui ó Você completou t t t t tã e no segundo texto o percentual veja que já tá ali os dois texos né só que o oito e o 15 aqui eu quero que ele fique Um pouquinho mais claro então aqui ó por volta do oito eu vou jogar um spa e por volta do 15 vou jogar um spam E aí seleciono esses dois Spa aqui ó com D só os dois né e boto Em ambos um Class name text zinc 100 salvo biome já vai dar uma organizada aqui

para mim e pronto vejo que os dois agora estão um pouquinho mais claros ali né agora abaixo dessa div aqui onde eu tenho Progresso eu vou colocar um componente que se chama separator e olha só ele vai criar essa Linha ali né esse componente que eu entreguei PR você pronto ali na pasta ui né que é só uma divinha com um pixel de altura tá nada demais e abaixo aqui do separator agora eu vou ter as minhas ã metas pendentes aqui né E aí como é que a gente vai fazer elas bem simples criar aqui

uma div vou jogar aqui nela um flex com GAP 3 e cada meta pendente vai ser um outline Button que eu também te Entreguei pronto que ele é um botão só com uma borda Dash Zinha ali né eu vou escrever aqui ó meditar por exemplo salvo e já tá ali só que ele tem que ter um Icone Zinho dentro né Então a gente vai botar aquele iconz Plus E aí eu jogo aqui nele um size 4 e um text zinc 600 no ícone Então já tá ali ó e aí a gente pode ter mais Eh

mais metas aqui meditar nadar praticar exercício Ah e aqui ó se eu criar mais Uma meta aqui por exemplo Vamos criar um aqui que se chama e me alimentar bem veja que olha só ele el não quebrou a linha n isso porque o Flex pro padrão não quebra eu tenho que jogar aqui Flex rap que ele vai melhor Flex Wap ah escrevi Flex Wap vai adar propriedade Flex permite que quebre a linha né quando chegar no final e não cober mais legal né E aí fechar aqui também por último a gente vai criar a listagem

de metas então V criar uma div GAP 6 vamos botar aqui um H2 escrito sua semana no H2 aqui vou jogar um text XL que é um tamanho 20 Font medium e agora vou criar aqui embaixo uma div e essa div aqui vai ficar é cada div dessa aqui Vai representar um dia da semana então vou jogar aqui nela também um Flex flexco GAP 4 né que a gente pode ver que é o espaçamento aqui ó no aqui ó entre isso aqui e isso aqui ó 16 pixs tá vendo e esse aqui para cá é

24 Por isso que aqui era 6 e aqui é 4 e aqui vou botar um H3 com dia da semana por exemplo domingo e aí entre parênteses que eu vou botar num SP eu vou botar a data por exemplo 10 de agosto não sei se 10 de agosto domingo eu tô chutando qualquer coisa aqui tá E aí aqui no H3 eu vou botar Font medium e no spam eu vou botar text Z 400 e text Extra small que é pr deixar ele pequeninho salvo a gente pode ver como tá ficando aqui ó domingo 10 de

Agosto E aí agora a gente tem essa lista de metas aqui embaixo que eu vou botar abaixo do H3 Então vou botar aqui uma ul botar aqui um Flex flexco GAP 3 para distanciar cada item da meta e cada item vai ser uma li mesmo e aí nesse li eu vou jogar um Flex item Center GAP 2 e vou botar aqui o izinho que é esse aqui da esquerda que ele é o Check Circle 2 que eu importo do seed react E aí no ícone eu vou jogar um size 4 e um text Pink 500

que é um rosinha e vou jogar um spam com esse texto aqui dentro Você completou a cor daar cedo às 88:13 só que no li aqui o texto ainda tá meio grande né então aqui no spa ó eu vou jogar nele um text small e um text zinc 400 então ele já ficou na mesma forma só que da mesma forma que lá em cima ó o praticar exercício e a data eu quero que estejam mais clarinhas né Então eu vou botar aqui ó é por volta do acordar cedo aqui ah primeiro deixa eu trocar essa

aspas aqui que ele pegou uma aspas do figma né então aqui dentro eu vou colocar um spam acordar cedo e aqui por volta da data também um spam E aí eu seleciono os dois spam aqui ó coloco um Class name Em ambos de text Z Inc 100 e veja como é que ficou bem legal já né Tem esse botãozinho de desfazer que eu não vou fazer tá vou deixar com uma atividade Depois para ti mas por isso a gente vai deixar ele fora e agora se eu repetir esse li aqui várias vezes a gente vai

ver né que eu tenho a representação de várias metas e se eu repetir essa div inteira aqui que tá Por volta do G3 aqui ó eu vou ter vários dias da semana então poderia botar domingo segunda-feira e aí 11 de Agosto E aí aqui Eu por exemplo fiz uma meta só né então deixaria algo assim e pronto Nossa aplicação agora tá concluída botão de cadastrar meta aqui Já tá abrindo toda a interface da nossa aplicação tá pronta pra gente amanhã fazer a conexão disso com a nossa api criar os formulários E por aí agora sim

hein parabéns por ter finalizado essa aula agora que você terminou essa etapa acessa a comunidade do discord exclusiva da sua trilha e posta lá que você concluiu essa aula inclusive pode me marcar lá que eu mando um coraçãozinho lá você também pode tirar dúvidas sobre o conteúdo e ajudar outros devs a Finalizar a aula também isso vai te ajudar a evoluir muito além do código Lembrando que todas as informações sobre o evento estão Reunidas no guia que você recebeu por e-mail e lá você vai também encontrar Como concorrer a prêmios exclusivos e também como você

entra no grupo do WhatsApp que você precisa tá para concorrer esses prêmios Então não esquece de entrar lá até amanhã na próxima aula n