Aula 2: Setup do Projeto & Autenticação | Full Stack Week

Fala Turma sejam muito bem-vindos à segunda aula da sexta edição da F quick Olha eu tô muito feliz tô muito animado cara porque hoje a gente vai finalmente começar a criar o nosso SAS de gestão de Finanças Então hoje a gente vai colocar mão na massa Vai ter muito código muito conteúdo pesado feito na faixa para fazer você crescer como deve mas antes da gente ir pro conteúdo Vamos fazer um exercício tá se você assistiu a Live de Ontem comenta que agora eu participei se você assistiu a nossa aula de ontem que aconteceu ao vivo

se você não assistiu se você tá caindo de para-quedas nessa aula aqui comenta eu não participei pra gente ver como que tá o seu engajamento aqui na F quick beleza e se você não assistiu a aula de ontem cara assiste essa aula Aqui termina de assistir ela e depois você assista a de ontem também por quê Porque foi uma aula on dia eu dei toda a entação do evento para você Eu dei várias orientações eu expliquei detalhe por detalhe cada aula O que que a gente vai fazer como a gente vai fazer a ordem das

coisas também então é muito importante que você assista a primeira aula também e a gente já fez cara essa aqui é a sexta edição da F quick e a gente aprendeu muito no processo então cada aula que a gente coloca cada conteúdo é pensado de forma estratégica para você tirar o melhor proveito possível do nosso evento Então não deixe De assistir a aula de ontem nem a de hoje nem as demais aulas também fechou e turma antes da gente começar efetivamente eu quero dar uma rápida passada no cronograma aqui do evento e se você não

tirou o print disso aqui ontem tira agora e guarda em algum lugar para você não perder nenhuma aula aqui que a gente preparou para você ok bom ontem nós tivemos a aula um que foi a aula de boas-vindas e apresentação do evento já falei sobre ela também Hoje Nós estamos aqui ó na aula dois e essa aula galera ela é gravada como você tá vendo aqui então nós temos dois formatos de aula dentro aqui da F quick o primeiro é aula ao vivo que são algumas aulas que eu vou falar para vocês quais aulas são

você pode ver pela foto também e aulas gravadas que são essa aula e algumas outras também que serão gravadas Ok então a aula de hoje é gravada a gente vai fazer o setup do projeto e a autenticação de usuários também ok e Turma todas as aulas gravadas são liberadas às 9 horas da manhã horário de Brasília então coloca um late aí no seu calendário para você não perder essas aulas Ok amanhã dia 6 de novembro nós teremos a terceira aula onde onde Nós faremos a gestão de transações do nosso projeto Então a gente vai fazer

essa tela aqui de gestão das transações essa aqui ó onde o usuário consegue ver as transações onde ele consegue adicionar editar e deletar transações também Perfeito Então vai ser uma aula bem massa que obviamente vai ser a continuação da aula de hoje nós teremos também no dia 7 de novembro uma aula ao vivo Ok as aulas ao vivo acontecem 20 horas horário de Brasília e nessa aula a gente vai ter o momento exclusivo para vocês tirar arem as suas dúvidas Então se você travar no projeto ficar com alguma dificuldade essas aulas ao vivo serão essenciais

importantíssimas para você resolver esses problemas porque um Lema que nós temos aqui na F quick ninguém fica para trás Ninguém vai desistir no meio do caminho se depender da gente porque a gente vai fazer o possível e o impossível para ajudar você a não travar no projeto Ok e nesse dia aqui nós também falaremos todos os detalhes sobre a próxima abert do F stch Club que é o meu treinamento eu vou adiantar para você vai ser a melhor abertura de todas a gente vai liberar uma condição que a gente nunca liberou Antes então não perca

a aula 4 que vai acontecer ao vivo dia 7 de novembro 20 horas Ok dia 8 teremos outra aula gravada tá Nós faremos aqui nessa aula essa parte aqui da dashboard e dos gráficos da aplicação perfeito Então essa tela que a gente vai fazer no dia 8 de novembro também será gravada liberada 9 horas da amanhã dia 9 de novembro teremos a aula 6 que vai ser uma aula sensacional que a gente vai integrar o projeto com o chat GPT e também com o Stripe para que o usuário consiga assinar diferentes planos para o seu

perfil Então vai ter o plano gratuito e vai ter o plano pago como a gente vê nessa tela aqui onde tá a tela de assinatura aqui turma essa tela aqui então como você pode ver o usuário vai ter o plano básico e o plano pro a gente vai implementar isso na aula de 9 de novembro que também será liberada de forma gravada às 9 horas da manhã e dia 10 de novembro teremos outra aula ao Vivo às 20 horas mais uma aula de tira dúvidas Então outra aula que a gente vai trocar uma ideia que

vocês tiraram as dúvidas de vocês e dia 11 de novembro nós fecharemos com chave de ouro Nós faremos o Deploy e a revisão do projeto também de forma ao vivo pra gente fechar o nosso evento com chave de ouro perfeito e turma essa aqui é a programação da F quick Como que você pode tirar o melhor proveito possível do nosso evento primeiro você vai entrar no Grupo de alunos exclusivo do WhatsApp que tá aqui na descrição dessa aula por que que você tem que entrar lá porque lá a gente vai mandar o link da nossa

comunidade no discord a gente vai mandar o link do nosso portal gratuito de conteúdos preparatórios da F quick Então esse Portal aqui ele está acessível para quem está dentro dos grupos do WhatsApp então Aqui nós temos aula de react typescript Next JS vídeo sobre carreira vídeo sobre o f Club também então esteja Nos grupos do WhatsApp legal e nós também temos lá como eu falei o link da nossa comunidade no discord para você tirar as suas dúvidas perfeito então entra no grupo não fica de fora para você não perder nada que a gente preparou especialmente

para você você também consegue gerar o seu ingresso personalizado enviando a palavra ingresso no Direct do meu Instagram que está aqui na descrição e isso aqui vai gerar o ingresso para você para que você Consiga Compartilhar esse ingresso nas suas redes sociais para todo mundo saber que você tá buscando crescer como deve se você tá buscando se desenvolver como programador beleza e turma você também pode se tornar um membro Gold da F Tech quick O que é o membro Gold da fus Quick é um membro que tem conteúdos exclusivos como aulas de LinkedIn github currículo

um membro que vai ganhar uma mentoria ao vivo comigo ao final do evento e que vai concorrer ao notebook Gamer também no Valor de R 4500 para você saber mais vou deixar o link aqui na descrição também caso você queira se tornar um ingresso Gold e turma se organizem para vocês assistirem todas as aulas assim que liberadas para que não acumule conteúdo e também esteja nos encontros ao vivo tá então você seguindo essas orientações você vai conseguir tirar o melhor proveito aqui do nosso evento perfeito e turminha por último mas não menos importante como eu

falei na aula de Ontem também esse projeto vai agregar demais no seu portfólio então não desista eu sei que pode ser difícil eu sei que pode ser muito conteúdo eu sei que às vezes talvez vai dar vontade de você desistir mas não desista porque não existe almoço grátis e se você pagar esse preço de se dedicar de participar comigo de todas as aulas você com certeza vai colher os frutos dessa decisão então não desista fica comigo e vamos para cima e turma Ontem eu vi Muitos comentários de pessoas perguntando pô Felipão Por que você deu

essa dica de primeiro assistir a aula prestando atenção no meu raciocínio na minha linha de pensamento para só depois você reassistir a aula talvez em uma velocidade maior E aí sim escrever o código comigo porque eu quero aqui na F quick te preparar para criar um projeto real eu quero preparar você para de fato você saber o que você tá fazendo eu não quero que você só saia copiando o código Que eu tô fazendo aqui e termina o projeto Não eu quero que você seja um programador que pensa de fato um programador que pensa na

resolução de problemas eu não quero que você dependa sempre de uma pessoa escrevendo um código junto com você para você fazer um projeto então por isso que eu preciso que você assista Prime aula comigo entendendo como que eu tô pensando o que eu estou pensando as decisões que eu estou tomando para que depois você reass Ista a aula e agora sim escrevendo código junto comigo porque se você aprender isso se você aprender a ter uma linha de pensamento uma linha de resolução de problemas um pensamento crítico você não vai depender de nenhuma tecnologia porque você

vai ser um programador de verdade você não vai depender de Framework de nada disso porque você vai ter a base bem reforçada quem aprende não depende é isso que eu quero passar para você aqui na F quick Quem aprende de verdade não depende de tecnologia não depende de mercado não depende de Framework não depende Então eu quero que você seja esse tipo de Dev que você saia da F quick com isso bem desenvolvido perfeito então turma agora que a gente já tá 100% alinhado vamos lá direto pro conteúdo turma seguinte o que a gente vai

fazer para criar este projeto aqui a gente vai usar o nextjs o nextjs ele é um Framework do react ok então o react é uma biblioteca e o Next Yes é um Framework que usa dentre outras bibliotecas o react e o Next ele dá pra gente uma gama de possibilidades muito grande porque com ele a gente consegue criar aplicações FC que é o que a gente precisa uma aplicação fusc é uma aplicação que tem o front end o backend banco de dados todos conectados todos conversando entre si perfeito então next ele nos dá essa oportunidade

essa possibilidade E além disso hoje ele é o Framework do react mais popular no Mercado então aqui na fck a gente só ensina para você tecnologias que você realmente vai usar no seu dia a dia perfeito então turma Ah se você nunca nunca trabalhou com next se você nem sabe o que é next Fica tranquilo eu vou passando para você os conceitos Mas o que eu aconselho você a fazer é o seguinte quando você terminar essa aula dá uma olhada nesse aulão de Next que nós temos aqui na plataforma exclusiva de aquecimento d f quick

para você Acessar entra no nosso grupo do WhatsApp porque nessa aula aqui a gente vai bem a fundo nos conceitos fundamentais do NE mas você nunca trabalhou com ne Fica tranquilo porque tem esse aulão e a gente vai aqui também fazer o projeto junto vou pegar na sua mão para que a gente consiga finalizar este projeto Ok então turma vamos aqui acessar a documentação do neet vamos aqui em get started e aqui a gente vai basicamente vir aqui installation pra gente começar O setup aí do nosso projeto então vou abrir aqui o meu terminal eu

vou aqui ah na minha área de trabalho e obviamente você precisa ter o node instalado no seu computadora né então se você trabalha com react já fez algum projeto com react você sabe que um projeto react é um projeto node Então a gente tem que usar node aqui para fazer um projeto next também porque como eu falei o Next usa o react Beleza então turma a gente vai executar Esse comando aqui que está na Documentação do Next para criar a nossa aplicação mas tem um detalhe muito importante que é o seguinte turma no momento em

que eu estou gravando essa aula a versão atual do nex é a 15 Ela acabou de sair há três dias atrás se eu não estou enganado beleza Mas qual que é o problema essa versão 15 do Next usa a versão 19 do react e essa versão 19 apesar de ela já estar muito bem testada ela ainda não foi lançada oficialmente como uma versão estável para produção Então tem muitas bibliotecas incluindo bibliotecas que nós usaremos neste projeto que ainda não são compatíveis com o react 19 então pra gente não ter nenhum tipo de problema de compatibilidade

a gente vai usar a versão 14 next Ok então vou abrir aqui o meu terminal para criar o projeto eu vou copiar esse comando só que ao invés aqui de eu colocar latest eu vou colocar @ 14.2.10 beleza Isso aqui vai criar o projeto para mim na versão 14.12.2 perdão p10 você pode ah na verdade eu posso até colocar essa mais recente aqui ó 14.2.1 Beleza então certifica de que você está usando essa mesma versão Ah que eu perfeito Então vou dar o enter ele vai fazer algumas perguntas para m mim ele vai perguntar se

ele pode instalar essa biblioteca Eu vou marcar que sim e agora ele vai perguntar o nome do meu projeto aqui eu vou colocar finance ai você pode chamar da forma que Você quiser ele perguntou se eu vou usar Type Script o Type scpt turma é uma sub linguagem feita em cima do JavaScript se você não conhece typescript a gente tem um curso de typescript lá no blog da full stack Week tá você pode ver e aqui durante a criação do projeto você vai aprendendo ele também então vamos usar ele aqui vou marcar que sim e

esse lente a gente também vai usar eu vou explicar com mais detalhes o que que é esss Lins mas vai ajudar a gente essencialmente Resumidamente aqui a prevenir erros no nosso código a garantir algumas também regras no nosso código Vamos marcar que sim tem oice SS também utilizaremos vamos marcar que sim também e a gente também vai marcar que não aqui nessa pergunta que pergunta se a gente quer usar o src vou marcar que não nisso aqui beleza você quer usar o App router Sim vou marcar que sim e mais paraa frente eu explico o

que é o app router mas mas ele é a forma mais moderna que a gente Tem de criar aplicações next Ok vou marcar que não nessa última pergunta também beleza fechou ele vai começar a instalar para mim as dependências o t o is link que a gente marcou que a gente vai usar o próprio react então isso aqui pode levar um tempo dependendo da sua conexão com a internet foi rapidinho aqui perfeito e agora eu vou abrir esse projeto então você pode abrir pelo próprio terminal digitando code e o nome do projeto que você acabou

de criar Beleza então esse aqui é o nosso projeto agora a gente está pronto para começar fechou e turma eu vou usar como editor de texto o vs code Ok então se você quer usar outra ide tudo bem mas eu recomendo que você use o vs code para você conseguir seguir 100% aqui junto comigo Deixa eu tirar a status barra lá de baixo OK vou dar um zoom aqui para vocês deixa eu aumentar também aqui o tamanho da fonte colocar 16 para ficar mais fácil para vocês verem perfeito agora Turma vamos começar aqui entendendo alguns

conceitos básicos aqui do nextjs tá vamos entender essa estrutura aqui de pastas perfeito turma nós temos essa pasta app aqui que é uma das pastas mais importantes da nossa aplicação porque dentro dela nós temos esse arquivo page.ts e se eu rodar a minha aplicação com npm rund Dev percebe que eu vou acessá-la localhost 3000 e eu vou ver justamente essa page ptsx ó esse arquivo aqui ó então percebe que eu Tenho aqui o meu texto eu tenho aqui o meu logo e tudo mais e eu tô vendo justamente isso aqui na minha aplicação então Então

essa page ptsx esse arquivo page tsx é basicamente a nossa página inicial então se eu mexer nisso aqui por exemplo colocar sei lá um H1 Hello Road e voltar aqui pra minha aplicação percebe que eu tenho Hello Road aqui então percebe que esse page ptsx Ele é tratado como a minha homepage por qu ele é tratado como a minha página inicial Porque ele está dentro dessa pasta app se eu criar uma pasta aqui dentro da pasta app chamada por exemplo transactions e dentro dessa pasta transaction eu criar um arquivo chamado page ptsx adivinho o que

vai acontecer ó vou criar aqui um componente Lembrando que isso é muito importante você precisa exportar a função como default aqui para que a página funcione Ok eu vou chamar essa página aqui ó esse componente melhor dizendo de transactions e aqui eu Vou colocar transactions page perfeito Fechou então agora se eu voltar para cá e acessar local host 3000 bar transactions Olha que interessante eu vou ter aqui a minha transactions page então next ele tem tem esse sistema de rotas baseado em pastas Ok então quando você tem uma pasta e dentro dessa pasta você tem

esse arquivo page.on tsx o Next ele cria uma página usando o nome da página e ele renderiza esse arquivo page.ts no conteúdo da página perfeito e A gente pode inclusive criar outras páginas aqui dentro ó Então posso criar uma pasta chamada subscription bar page.six e lembrando que nós teremos essas telas aqui no nosso projeto né então a gente vai ter galera tanto a página aqui de subscription que vai ser essa aqui quanto a página de transações também que vai ser essa página aqui então nós já estamos criando essas páginas aqui no next Ok então vou

criar aqui ó ah Subscription aqui eu vou colocar um H1 subscription page então se eu salvar acessar aqui agora barra subscription eu vou ter a minha página subscription perfeito show de bola turma eu posso fazer a mesma coisa aqui ó com dashboard então dashboard bar page.six que vai ser basicamente a nossa dashboard né Então essa tela aqui ó dashboard e na verdade ela vai ser a nossa página inicial Tá então nem vou criar uma página dashboard vai ser a Nossa página inicial perfeito Então eu quero que você entenda primeiro Esse sistema de rotas aqui dentro

do Next Ok e nós também podemos galera receber parâmetros aqui nas nossas páginas tá então por exemplo vamos supor que você queira acessar uma página de uma transação para você ver os detalhes de uma transação em específico a gente não vai fazer isso no projeto mas eu quero sinais para você Então como que a gente faz isso aqui primeiro eu vou criar aqui Dentro de transactions uma pasta chamada ID entrechats dessa forma tá e dentro dessa pasta eu vou criar uma page PSX e agora eu vou criar uma função aqui dentro vou colocar de transaction

beleza e aqui galera que que eu vou receber eu vou receber params E aí eu vou receber como parâmetro o ID Por que ID porque é o nome dessa pasta aqui legal então agora olha que interessante se eu colocar um H1 transaction e aqui eu colocar ID Olha que interessante ó se eu Acessar Barra transactions bar1 2 3 olha que massa transaction 1 2 3 então o que que o Next faz ele usa o nome da pasta entre colchetes isso é importante tem que estar entre colchetes para receber esse parâmetro ID que condiz com o

nome dessa pasta e a gente consegue passar esse parâmetro aqui na URL então se eu mudar esse aqui para ABC por exemplo esse ID aqui ó ele vai ser esse ABC Então esse é o é o fundamental que você tem que saber Sobre o sistema de rotas oect para você seguir aqui o projeto comigo perfeito e outra coisa turma eu vou apagar esse arquivo aqui porque a gente não vai usar ele eu só queria simplificar para vocês outra coisa massa é esse esse arquivo layout ptsx tá esse arquivo turma ele é justamente o layout da

página então ele está em volta de todas as nossas páginas tá então percebe que aqui ó o Next Ele carrega as fontes pra gente enfim se eu colocar por exemplo turma um H1 aqui em Cima ó layout Olha que interessante interessante esse layout vai aparecer tanto aqui na minha página inicial ó então layouts hello world quanto na minha página de transactions também ó eu vou ter o layout transactions page Então esse layout ele vai ficar em volta de todas as nossas páginas tanto da página inicial quanto da página subscription quanto da página transactions tá então

se eu acessar aqui ó ah subscription também eu vou ter esse layout aqui ok e Percebe que ele recebe esse Children tá esse Children é justamente o conteúdo da página então se eu remover esse Children aqui ó eu não vou ter nada só vou ter o layout Ok então se você Ah tem alguma dúvida sobre o Next ah sobre o sistema de rotas aqui deixa nos comentários ou recomendo que você deixe na nossa comunidade no discord porque lá a gente tem mais espaço para conversar para ajudar você a sanar as suas dúvidas Ok fechado turma

então a gente teve aqui o Essencial aqui do Next a gente vai aprender mais ainda sobre next mas por enquanto eu preciso que você saiba disso aqui agora turma vamos começar a pensar na nossa aplicação e quando você vai criar uma aplicação a primeira coisa que você tem que pensar é na modelagem dos dados quais dados a gente vai salvar e quais dados nós exibiremos como que nós exibiremos e salvaremos esses dados porque se você pensar uma aplicação ela é essencialmente isso ela é você Armazenar dado e você exibir esses dados processar esses dados obviamente

conforme necessário mas é essencialmente isso você armazenar e exibir dados Então os dados Eles são um pilar fundamental da nossa aplicação Então a gente vai começar pensando na sua modelagem Ok então turma pra gente modelar os dados é muito importante a gente ver o figma porque a gente consegue ver o que que a gente quer exibir pro usuário em qual formato Então a primeira coisa que a Gente quer exibir que é a mais óbvia aqui acredito eu são as transações né então a gente tem que exibir as transações aqui e a gente já consegue ver

o que é uma transação então uma transação ela tem o seu nome ela tem o tipo dela que pode ser um ganho um gasto ou um investimento Então a gente vai ter esses três tipos aqui ã de transações Beleza cada transação tem a sua categoria que é opcional percebe ó eu tenho aqui moradia Alimentação mas esse gasto não tem uma categoria então é uma propriedade opcional eu tenho também o método de pagamento que vai ser pix cartão ou boleto legal eu tenho a data da transação também e o valor dela então eu preciso armazenar esses

dados no meu banco de dados para eu mostrá-los para o usuário perfeito e turma essas categorias aqui e métodos de pagamento não são editáveis Ok o que eu quero dizer com isso quando o usuário for Criar a transação ele vai ter uma lista definida de categorias e de métodos de pagamento para escolher então ele não consegue por exemplo criar um método de pagamento novo ou criar uma categoria nova se você quiser expandir o projeto para acrescentar isso você pode fazer mas a gente não vai fazer aqui muito por questões de necessidade mesmo não vejo tanta

necessidade até porque método de pagamento dificilmente V mudar em categorias também né mas se você quiser Você pode eu aconselho você a expandir esse projeto Conforme você achar melhor Conforme você quiser sinta-se livre para fazer isso Beleza então turma a gente vai agora ah pensar na modelagem desses dados a nível de banco de dados como que a gente vai modelar essas transações como que a gente vai salvar elas no nosso banco tá porque a nossa aplicação é essencialmente isso não tem muito mais aqui o que falar obviamente que nós teremos aqui alguns gráficos né então

ó A gente vai ter o total de valor investido de receita de despesas a gente também vai ter Ah um fluxo aqui do mês também certo gastos por categoria mas tudo isso aqui usará os mesmos dados as transações a gente só vai exibir eles de forma diferente aqui na nossa aplicação então turma eu preparei aqui um diagrama pra gente pra gente ter essa visualização do nosso banco de dados tá então turma a gente vai ter a nossa tabela de transactions Ok e faltou Também a gente falar sobre o usuário porque nessa aula a gente vai

fazer Justamente a autenticação de usuários então uma transação ela vai ter também o user id o id do usuário ao qual essa transação pert Então se o João cria transação por exemplo salário essa transação vai ter o user ID do João porque ela pert ao João tá então aqui ó eu exemplifiquei essa modelagem dentro aqui dessa ferramenta de diagramas tá então uma transação ela vai ter um ID Que é um identificador único tá que vai ser uma chave primária então uma chave primária é um identificador único que não pode se repetir entre os registros é

tipo o CPF de uma pessoa não pode se repetir uma pessoa ela tem um CPF único certo é um identificador daquela pessoa eu tenho tipo da transação também que a gente viu né que vai ser ã ou um gasto ou um ganho ou um investimento eu tenho o nome dessa transação eu tenho o valor dela eu tenho a categoria E eu tenho Aqui os campos de created ads e updated ads que é só pra gente ter uma noção de quando tal transação foi criada quando tal transação foi atualizada isso é muito útil para fins de

debug também tá para você ter esse monitoramento aí no seu banco e temos também o payment methods tá tá faltando algumas algumas propriedades aqui eu vou colocar Ah aqui ó eu consigo essa ferramenta é bem legal eu consigo escrever aqui o diagrama em Forma de código ele já faz para mim é bem massa o nome é Eraser tá não tô sendo patrocinado nem nada beleza o que faltou aqui galera faltou a dates que vai ser uma data tá essa dates ela vai ser basicamente galera eh a data da transação porque a data de criação da

transação é diferente da data que aquela transação ocorreu porque hoje por exemplo dia 30 de outubro eu posso criar uma transação que aconteceu dia 25 então o Crater ats vai ser 30 de Outubro mas a Data vai ser dia 25 beleza e eu vou ter também aqui ã o user ID beleza e user que vai ser uma string Tá beleza então essa aqui turma vai ser a nossa A modelagem aqui do nosso banco e turma nós teremos alguns enun aqui né O que que são enun são basicamente uma lista possíveis uma lista possível de valores

então por exemplo aqui o Type ele vai ter apenas três valores possíveis lembra que a gente viu que é ganho gasto investimento mesma coisa para as Categorias a gente vai ter um N1 ou seja uma lista de valores possíveis Então a gente vai ter por exemplo alimentação educação lazer etc daqui a pouco eu passo a lista completa para vocês e teremos também os m de pagamento que também serão um en1 perfeito Então essa aqui é a modelagem do nosso banco de dados e turma O que que a gente vai usar para se conectar com o

banco e para criar efetivamente essas tabelas neste banco a gente vai usar o prisma tá e Junto com Prisma a gente vai usar o postgis como banco de dados por que o postgis porque galera o postgis é o banco relacional hoje mais popular e essa aplicação Apesar dela não ter muitos dados ela vai ter uma relação ali entre usuário e transação e a gente não vai criar tabela de usuário e eu já vou falar o porquê mas segue comigo aqui por enquanto você poderia tranquilamente usar por exemplo o mongo DB nessa aplicação Mas como eu

quero te preparar O melhor possível para o mercado aqui na F stack Week assim como a gente faz também no f stack Club a gente vai usar um banco que é muito mais comum de você ver no mercado que é o postgis beleza que é um banco relacional um banco não relacional turma não é o padrão ele é muito mais atípico de ser utilizado do que um banco relacional então a gente vai usar um banco relacional o post Quiz você pode usar também se você quiser o my si etc mas eu recomendo que você use

O postgis aqui para seguir junto comigo e junto com ele a gente vai usar o prisma como eu falei o prisma turma ele é um ORM o que que é um ORM é basicamente uma ferramenta que facilita o seu trabalho com um banco de dados então ao invés de você ter que escrever código SQL na mão o irm ele vai escrever esse código SQL para você então você vai falar para ele por exemplo ó eu quero uma tabela com essas propriedades e o ORM vai traduzir aquela sua idade para Um código SQL ele vai gerenciar

as migrations também o prisma ele tem uma integração com o próprio typescript que vai ajudar muito a gente aqui no nosso projeto Beleza então a gente vai usar ele aqui também é um dos orms mais populares do mercado atualmente você tem outros também como drizzle que tá bem Popular mas eu gosto bastante do Prisma ele vai suprir perfeitamente a nossa necessidade tá a gente também pode seguir aqui o guia deles então vamos Clicar aqui em get started e aqui a gente consegue dar uma olhada ó eu vou basicamente selecionar o meu banco post e eu

já tenho aqui um breve passo a passo aqui de como fazer o setup então Primeira coisa eu preciso instalar o prisma tá Ah então vou instalar aqui o prisma no meu projeto Então vamos lá vou abrir aqui meu vest code e turma quando eu for instalar uma dependência Vocês verão que eu sempre instalarei uma versão específica tá Eu recomendo que Vocês façam a mesma coisa para vocês não terem problema de compatibilidade comigo beleza então vou instalar aqui o prisma na versão 5.21.1 Então essa é versão que eu vou usar aqui na nossa aplicação fechou Beleza

agora turma o que que eu vou fazer eu vou rodar esse Prisma init aqui beleza então vamos rodar Esse comando aqui npx Prisma init e esse comando galera ele vai fazer algumas coisinhas aqui para mim primeiro ele vai criar Aqui no meu arquivo pon env Na verdade ele não criou isso eu vou ter que criar aqui em ponto env ele criou para mim ó essa variável Database URL tá essa variável é o banco de dados da minha aplicação onde que tá o meu banco Qual o orl do meu banco da daqui a pouco a gente

vê isso aqui perfeito e outra coisa que ele fez turma Ele criou essa pasta Prisma e aqui dentro esima P Prisma e esse arquivo é muito importante por quê Porque é aqui dentro que a gente Vai definir as nossas tabelas é aqui dentro que a gente vai definir essa tabela de transações que a gente desenhou aqui beleza E esse arquivo ele tem uma sintaxe um pouco peculiar Mas vamos comigo pra gente especificar uma tabela então eu quero criar uma tabela Prisma como que eu falo isso para você você vai criar um modo e você vai

colocar o nome da tabela eu vou colocar transaction beleza e aí eu vou começar a listar os campos dessa tabela então Primeiro campo é o qu galera um ID que é o string e eu vou falar pro Prisma que ele é o ID do meu registro então que ele é um registro único que ele não pode se repetir que ele vai ser usado como identificador único de um registro então para isso eu vou usar um @id E como default eu vou colocar um uid fechou que é um formato de ID que a gente vai usar

aqui de de aleatório você deve conhecer OK segunda coisa name string perfeito terceira coisa o Type esse Type vai ser Um en1 E como que eu crio um en1 aqui no Prisma vamos lá vou criar en1 transaction Type e aqui galera eu vou ter três possibilidades eu vou ter deposits que vai ser o depósito vai ser um ganho basicamente eu vou ter o expense que vai ser uma um gasto e eu vou ter o investments que vai ser um investimento então esses são os três valores possíveis que eu tenho aqui para uma transação legal então

vou deixar esse transaction Type aqui fechou agora Eu vou ter o qu galera eu vou ter além do Type o amount esse amount galera eu vou salvar ele como um valor floats perfeito então o valor com casas decimais o problema de floats é que esse floats ele pode ter quantas casas decimais eu quiser e quando a gente trabalha com valores monetários é importante a gente ter um padrão de quantas casas monetária a gente quer para aquela para aquele valor então para isso eu vou usar o décimal que ele é um Pouco mais preciso tá e

eu vou colocar o seguinte @ dbd e eu vou colocar aqui ó 10,2 o que isso significa significa que antes da vírgula eu vou ter até 10 dígitos e depois a vírgula eu vou ter dois dígitos Então a gente vai ter essa precisão nas casas decimais que a gente não tem com o floats tá E esses tipos turma aqui string dcim etc Eles serão traduzidos para tipos do postgis você pode ver aqui também ó se você procurar por postgis Prisma você vai ver que ele Tem aqui ã a documentação com esses tipos que você pode

ver ó Então acho que tá aqui ó então string por exemplo é text bullan é boolean obviamente in integer você pode ver essa relação aqui mas como eu falei o RM ele vai traduzir muita coisa pra gente automaticamente a gente vai ver isso aqui daqui a pouco na prática tá fechou turma Depois teremos a nossa category que também será outro enum então transaction category e eu vou criar aqui Um enum de transaction category e aqui galera eu vou copiar e colar esse enum você pode pausar o vídeo depois quando você tiver codando junto comigo e

você copiar aqui tá ou pegar do github também do repositório do projeto Então a gente vai ter essas categorias aqui beleza então isso aqui é housing que é tipo assim gastos com casa ah transporte comida entretenimento saúde e assim por diante Então vamos colocar esse enum aqui no kg agora vamos criar outra Propriedade que vai ser o payment method que também será o en1 tá então vou criar aqui mais uma vez aqui um en1 você pode copiar isso aqui também então nós teremos algumas opções primeiro cartão de crédito cartão de débito transferência bancária boleto dinheiro

pix e outro então se você tiver outro que não se encaixa aqui você coloca o outro beleza e aqui eu vou colocar payments method perfeito agora faltou o created ads e aqui eu vou usar um Datetime eu vou colocar o default como Now né então quando eu criar o registro eu vou ah basicamente falar que o cre at vai ser o tempo atual tempo de agora beleza e vou fazer o updated ads aqui eu vou usar um date time também que é o formato aqui de data do Prisma updated ads e faltou a nossa data

né galera então dates aqui vai ser também um dates time Ok esse date time galera por padrão ele tem ã o dia e a hora tá então se você procurar aqui ó post Dates time Deixa eu procurar no Prisma também dates aqui ó então no postes ele vai criar um time stamp tá E esse time stamp do postgis ele é essencialmente a data completa tá ó então tem o tempo e a data Ok beleza turma então vamos lá a gente fez aqui a nossa tabela eu posso galera rodar um NP x Prisma formats para eu

formatar esse arquivo ó então ele já vai formatar e deixar esse arquivo lindão aqui pra gente beleza fechou Turma agora eu preciso aplicar isso aqui no meu banco eu preciso criar essas tabelas no meu banco de dados E para isso eu preciso ter um banco rodando e nós temos duas opções para isso A primeira é você usar um serviço como o neon Eu recomendo que você use o neon zbi para você ter um posts rodando aí tá então você vai acessar vou deixar o link na descrição também você vai criar sua conta ou você pode

fazer login aqui acredito com o Google então vou fazer Aqui já vamos criar o banco aqui comigo e por meio dessa plataforma você vai ter um post rodando aí para você trabalhar com ele você pode usar também outras plataformas como o supabase você pode usar também o versel a versel né ela tem o poquis também que você pode usar mas eu recomendo você usar o new aqui para você seguir junto comigo beleza assim que eu criar minha conta ele vai pedir para eu criar um projeto aqui no neon eu vou colocar o nome dele finance

ai a Versão do postc vou deixar essa aqui mesmo não vou mudar isso aqui região vou deixar US East aqui infelizmente não tem o Brasil aqui ficaria mais rápido mas isso aqui é só no plano pro se eu não me engano que tem o Brasil beleza mas também não vai nos atrapalhar muito não vou criar aqui o projeto Ah vou confirmar perfeito beleza ele vai dar pra gente aqui alguns dados aqui do nosso banco e percebe cara que aqui ó no Project settings aqui dentro de Dashboard ele colocou um aut scaling aqui e eu vou

tirar esse aut scaling que que é isso aqui ele vai basicamente ah usar mais recursos Se necessário eu vou tirar deixar o mínimo pra gente não ter nenhum tipo de cobrança tá então faça a mesma coisa OK então deixa o mínimo possível aqui que a gente não vai precisar de muito processamento Não beleza agora turma aqui na dashboard percebe que eu já tenho essa Connection string ó que é a URL que a gente vai Usar para se conectar com o nosso banco então vou copiar isso aqui e eu vou colar aqui ó no meu ponto

Envy então aqui no ponto envi eu vou colar isso aqui fechou Beleza então eu tenho aqui o meu usuário a minha senha e a URL aqui do meu banco agora Tur eu vou aplicar isso aqui neste banco que eu acabei de criar para isso galera eu vou fazer uma migration O que que é uma migration uma migration é uma migração de dados como o nome disse então eu vou migrar o meu Banco de dados do Estado a que é o estado que ele está agora que não tem nada nele não tem nenhuma tabela para o

estado B que é o estado onde ele terá tabelas certo então para isso eu vou rodar um npx prisma migrates Dev e aqui galera eu vou colocar traço traço name e vou colocar o nome dessa migration cada migration tem um nome eu vou colocar init ZB que é a migration inicial de inicialização do meu banco eu vou apertar enter ele vai se conectar com o Meu banco isso aqui pode levar um tempinho então vamos esperar um pouquinho mas ele vai se conectar com o banco e ele vai executar um script nesse banco ele vai gerar

script pra gente a gente já vai ver para criar essa tabela aqui de transação e os enun que a gente colocou nesse arquivo aqui do Prisma também beleza turma então a nossa migration já foi executada e a nossa Database o nosso banco de dados já está em sincronização com o nosso skima o que Isso significa se eu vier aqui no neon e eu vier aqui agora em tables eu já vou ter a minha tabela aqui ó Então olha que interessante eu já vou ter aqui ó transaction que é a tabela que a gente criou com

todas as colunas todas as dades que a gente colocou lá no nosso arquivo olha que massa Tur ele gerou pra gente aqui ó em Prisma migrations esse arquivo aqui ó inits tob que é o nosso código SQL então é aquilo que eu falei para você o ORM ele vai escrever código SQL pra gente vai pegar muito da complexidade que a gente tem naturalmente sem um ORM para ele então Vai facilitar muito o nosso trabalho Ok então turma já estamos aqui com o nosso banco de dados pronto e agora a gente pode começar efetivamente a criar

as telas do nosso projeto certo certo a gente já pode começar mas antes vamos fazer um comit tá Por quê Porque eu já falei antes e falo novamente eu quero que aqui na fqu que você tem uma Experiência que se aproxima ao máximo da realidade do mercado da realidade de grandes projetos e o ideal é que você faça comits separados que você faça cada comit com poucas mudanças Porque assim fica mais fácil de transitar no histórico de mudanças da sua aplicação E além disso a gente vai usar um padrão de comits chamado conventional commits ele

facilita muito a nossa vida na hora de escrever mensagens de commits porque Imagine que você está num projeto que Tem 10 20 programadores trabalhando em conjunto cada um tem a sua forma de escrever comits e isso muitas vezes pode resultar numa bagunça né Cada comit escrito de de forma totalmente diferente um em português outro em inglês Enfim então conventional commits ajuda a gente nisso então com ele a gente coloca prefixos nos nossos commits então por exemplo um commit que corrige um bug ele começa com fix um que implementa algo novo uma feature ele começa com

feits e Assim por diante tá então o que que eu vou fazer aqui ó eu vou criar um commit eu vou dar um Git ads vou colocar um Git commit e se Fix galera de que o seu ponto en está no seu Git ignor tá então ponto aqui no seu Git ignor beleza e a mensagem vai ser o seguinte eu vou colocar Core ads Prisma and Database setup e o que que é o Core o Core é uma dança no setup do projeto é algo que não é uma feature nova não é uma Funcionalidade é

mais uma questão de configuração como a gente acabou de fazer aqui beleza então vou dar o commit vou dar um Clear aqui no console e fechou a gente já fez o nosso commit perfeito deixa eu dar um zoom aqui também no vest cod para ficar mais fácil para vocês agora galera vamos começar a trabalhar com algumas ferramentas que a gente vai usar no nosso projeto a gente quando criou o projeto a gente marcou que a gente ia usar o twind né e o twind Ele é ah um Framework CSS que permite com que nós estilizamos

as nossas aplicações de uma forma muito mais rápida então a gente consegue aplicar classes aqui nos nossos elementos como você vê aqui no exemplo E essas classes são traduzidas em estilos CSS Então vamos dar uma olhada agora no t pra gente começar a criar as nossas primeiras telas Ok então turma aqui na minha page eu já consigo usá-la por quê Porque o Next ele já vem Com tnd pré-configurado você pode ver que eu tenho esse arquivo aqui ó t. config que é o arquivo de configuração do twing então aqui galera no meu H1 eu posso

colocar um Class name text Red 500 e se no seu BS code não aparecer isso aqui ó esse aut complete você vai instalar a extensão do T aí no seu vs code Ok ó então instala essa extensão aqui do tnd porque aí quando você passar o mouse em cima da classe essa extensão vai mostrar Qual estilo essa classe Aplica então por exemplo posso escrever aqui P5 que é um pading de 20 pixels Felipe onde estão essas classes está tudo aqui na documentação do T ó se você vier aqui em get started você vai ter aqui

embaixo ó layout por exemplo Ó você tem aqui ó eu quero achar o pading aqui ó pading Então você vai ter as classes e o estilo correspondente de cada classe então por exemplo P1 aplica esse pad top e borom P5 que a gente usou aplica um pading de 20 pixels você pode usar pading vertical que é o PX perdão horizontal que é o PX vertical que é o py e assim por diante Mas calma que isso aqui você vai pegando Conforme você usa o t aqui junto comigo beleza eu vou escrevendo as classes e te

falando sobre a existência de cada uma delas conforme a gente avança aqui no projeto fechou se eu salvar isso aqui e executar minha aplicação percebe que esse texto ele vai Ficar vermelho com um pequeno pading ó Então vamos lá vou executar aqui ó vem para cá e eu tenho o meu texto vermelho com pequeno pading Olha que interessante Então o t ele permite com que a gente estilize a nossa aplicação de uma forma muito rápido Como você pode ver aqui beleza ó então eu posso por exemplo ah criar outra div aqui dentro e essa div

ela pode ter uma Class name de Flex que é um display Flex pode ter um item Center ah just F Center que é um justf Content Center e um wif screen que é um wif né de 100 viewports wifs E aí tudo vai ficar Centralizado Então a gente vai pegando essas classes conforme a gente avança aqui no nosso projeto beleza mas turma a gente pode entrar numa situação do twind onde um elemento ele vai ter várias e várias classes e percebe que eu não tenho nenhum tipo de padronização na ordem das classes Então imagina que

eu tenho classe onde o display Flex ele tá no início da Class name outra que ele tá No final ou no meio Isso fica muito confuso então para isso a gente vai usar um Plugin do prer tá então você pode procurar por plugin tnd preder aqui no Google que você vai achar esse plugin e se você não conhece o preder ele é uma extensão que vai formatar o seu código para fazer esse tipo de coisa de por exemplo mudar a posição desse Flex por exemplo pro final sempre que eu salvar o meu código Beleza então

para instalar esse plugin eu vou copiar esse comando Eu vou colar aqui no meu terminal e eu vou criar um arquivo de configuração do prer Ó então ponto prer RC P Jon e eu vou copiar isso aqui ó esse plugins aqui ó e colar aqui beleza e você precisa também instalar a extensão do prer ok então instala a extensão do preder a minha já tá instalada depois você vai apertar nesse botão aqui ó de configurações Você vai em settings você vai procurar por default formatter ou formatador padrão se o seu v code Estiver em português

tá e você vai marcar o prer aqui perfeito fechou depois você vai procurar por formats on save ou formatar ao salvar e você vai marcar isso aqui agora se eu salvar percebe que ele formatou e não formata apenas as classes mas formata também a identação ó eu vou deixar assim salvei ele formatou então prer ajuda a gente isso aqui é importantíssimo a gente usar essa ferramenta também e similar a ele temos também o is lent que eu recomendo Que você também instale a extensão dele ele é basicamente uma extensão que a gente usa para detectar

problemas no nosso código então por exemplo se eu se eu criar uma variável aqui em cima e não usá-la então sei lá vou criar aqui ó const name e não usá-la percebe que eu tenho essa linha vermelha se eu passar o mouse em cima ó eu tenho esse erro esse erro é do links então por exemplo se eu tenho uma variável que eu criei mas não usei eu não quero essa variável então SL Lint vai nos avisar desse tipo de coisa não vou muito a fundo nisso mas é legal você ter a extensão instalada também

e o Next ele já vem com s link configurado pra gente perfeito então turma esse aqui é o twind ah em Essência a gente vai vendo mais dele também durante a criação do projeto vou fazer outro comit aqui galera e eu vou ah basicamente Chamar esse commit de core ads taing preter plugin então a gente Adicionou O plugin do preter para o Twin pra gente ter essa formatação aqui legal turma agora a gente vai usar outra biblioteca que é o sh decen o SH decn turma é uma biblioteca de componentes Então ela nos dá uma

gama muito grande de componentes já prontos que a gente pode usar para criar a nossa aplicação e ela acelera muito o nosso trabalho você pode dar uma olhada em quais são esses componentes aqui na própria documentação aqui em Components você vê que tem vários componentes tem botões tem cards tem os charts também que são os gráficos que a gente vai usar na nossa aplicação nós temos aqui o dialog form inputs tem muita coisa m a gente vai usar o shaden porque é uma biblioteca muito massa que vai como eu falei acelerar muito aqui o nosso

trabalho tá E para instalar Ele é bem simples A gente vai abrir aqui o nosso terminal e eu vou digitar o seguinte npx shaden eu vou colocar @ 2.1.3 Ou seja a versão que eu estou utilizando essa aqui como eu falei eu recomendo que você use sempre as mesmas versões que eu Ok eu vou colocar aqui inits isso aqui vai fazer com que ele inicializa aqui o projeto vou marcar que eu quero instalar essa versão ele vai inicializar aqui o projeto ele vai fazer algumas perguntas aqui para mim também eu vou marcar que eu quero

usar o Style default e você pode mexer aqui com as setas vou marcar default apertar enter Aqui eu vou colocar neutro mesmo Ah vou marcar que eu quero usar CSS verbal já vou mostrar para vocês com mais detalhes beleza ele instalou aqui perfeito fechou agora turma ã eu posso aqui acessar minha página minha aplicação já vai ter mudado aqui a gente vai mudar a gente vai alterar isso aqui para voltar como tava antes aquele tema Dark e tudo mais mas turma vamos agora focar no que que esse comando criou pra gente ele criou primeiro esse

arquivo components P Jon Tá e percebe que tem várias coisas aqui beleza e por enquanto eu vou fazer algumas alterações neste arquivo é o seguinte turma se você perceber ele criou para mim essa pasta Lib dentro dela eu tenho esse arquivo utils esse arquivo ele vai ser usado pelo shaden nos componentes que ele prover pra gente então eu vou manter esse arquivo como tá mas eu quero mudar ele de lugar tá eu quero deixar ele dentro da minha pasta app Ok Felipão mas ele não é uma página Tudo bem Nós não precisamos necessariamente ter apenas

páginas dentro da pasta app de fato uma pasta só será tratada como página se ela tiver o page P tsx dentro dela essa Lib não vai ser tratada como página porque ela não tem o page P tsx dentro dela então se eu acessar local 3000 bar Lib eu vou ter um 404 perfeito Beleza agora turma tem outra mudança que eu quero fazer no next a gente tem uma coisa chamada de rotas privadas o que que são isso na verdade Não rotas São pastas privadas OK são pastas que nunca serão tratadas como rotas nem se tiver

um page ptsx dentro delas e para criar uma pasta privada eu vou colocar um underline antes do nome e é isso Acabou então o que eu gosto de fazer turma toda pasta que não é uma rota eu coloco underline antes só isso só pra gente ter uma visualização mais fácil do que é uma rota e o que não é isso torna como eu falei a visualização mais simplificada então todas pastas que Não forem páginas como essa Lib eu vou deixar com esse underline antes Aqui fechou Beleza agora eu preciso aqui no components.js mudar o caminho

aqui ó dessa Lib tá então esse @ galera ele vai nos levar pra raiz do projeto Beleza então quando eu colocar ar eu estou na raiz do projeto então Então eu preciso agora colocar barra app e aqui eu vou colocar components também com o underline aqui no Lib fazer a mesma coisa ó então app e o Lib vai ficar Assim com underline aqui mesma coisa ó @ bara components @a Lib e aqui nos hooks também app hooks perfeito Fechou então tá certinho agora turma tem outra coisa que eu quero mostrar para vocês que é esse

arquivo globals.css ele tem várias variáveis aqui essas variáveis são cores legal e você pode inclusive aqui no shad CN Eles Têm uma página de temas que você consegue customizar Então você consegue criar um tema Verde um tema Violet por Exemplo e copiar o código que é justamente essas variáveis eu vou galera copiar um código que eu já tenho aqui com todas as cores que a gente vai usar Então tudo isso aqui já tá certinho pra nossa aplicação vou deixar e o repositório no grupo do WhatsApp para você acessar e para você conseguir esse código aqui

também Fechou então basicamente eu tô definindo as cores aqui da nossa aplicação e percebe que eu tenho duas classes né eu tenho essa Classe Na verdade tenho a classe Dark e esse selector de Roots aqui o que isso significa quando eu aplicar classe Dark a minha aplicação ela vai ficar com Dark F Beleza então se eu vier aqui no meu layout então app layout e aqui no Body colocar o Dark minha aplicação vai ficar preta então se eu vi PR cá PR home ó agora ela tá preta se eu tirar essa classe Dark daqui então

tirei a Dark ela vai ficar branca Beleza vou deixar Dark porque a nossa aplicação ela vai ser Dark fechou beleza turma então o setup do tá pronto e para testar isso galera vamos adicionar um componente então para adicionar um componente Então vamos supor que você queira usar o componente B aqui do Então vou aqui em Componentes eu quero usar este componente aqui na minha aplic Como que eu faço isso eu vou rodar Esse comando aqui ó npn add Button Então vamos lá vou rodar npx shcn @ 2.1.3 ads Button e ele vai comear a adicionar

esse Botão para mim adicionou perfeito e percebe que ele criou galera dentro aqui da pasta app a pasta components e dentro dela ui Button e aqui que tá o componente e turma Esse é um dos grandes pontos positivos do shad porque ele copia e cola o código do componente na sua aplicação Então você consegue customizar o componente que o SH dade de uma forma muito simples então O código dele tá aqui inclusive ele usa o twind olha que interessante e agora eu posso Aqui na minha página inicial por exemplo usar o meu buron então eu

posso retornar ao meu buron que eu vou importar da minha pasta components e o y Button e aqui eu vou colocar por exemplo hello world salvei e o meu Button ele tá aqui olha que massa Olha que sensacional então nós usamos o primeiro componente aí do xcn então vamos fazer um commit eu vou usar a ferramenta de Git aqui do vscode mesmo eu vou fazer um commit vou chamar ele de core também add shaden Setup então a gente adicionou o setup do sharen e vamos obviamente escrever commits em inglês para você já se acostumar já

praticar o seu inglês também beleza fechou turma agora galera vamos começar a fazer a parte de autenticação tá a gente já fez aí o a parte do tailwind do shaden do banco de dados agora vamos fazer a parte de autenticação pra gente ah já fechar essa aula aqui e na próxima aula a gente vai começar de fato a interagir com o nosso Banco de dados pra gente começar a listar e criar transações eu sei que a ansiedade é muito forte pra gente começar a criar logo as telas tal mas a gente tem que ter esse

momento para fazer o setup do nosso projeto da forma correta deixa eu fechar também algumas ABS aqui que tem muita coisa aberta Ah isso aqui eu vou deixar fechou perfeito beleza turma seguinte a página de login vai ser essa aqui vamos primeiro fazer a página de Login legal e já vamos praticar também um pouco do twind e do shad cen aqui vai ser bem massa Ok então vamos lá turma que que eu vou fazer aqui cara eu preciso criar essa tela de login concorda Então como que eu crio uma tela uma página nova aqui no

NE a gente já viu né a gente vem aqui em app eu vou criar uma pasta chamada login e dentro dela um arquivo chamado bar page.ts então se você como você acabou de ver que eu fiz né se você criar um arquivo Aqui no vs code e colocar o nome dele de login barra page P tsx ele vai criar o arquivo page tsx dentro da pasta login isso é bem massa também aqui eu vou digitar FC eu tô usando uma extensão chamada Simple react snippets para eu ter esses atalhos aqui no meu vest code Ok

então instala ela que você consegue digitar sfc já criar a função aqui para você expla também eu vou chamar isso aqui de login page Ok então quando é uma página eu gosto de colocar esse page Aqui no final eu posso até colocar nas outras também então subscription page pra gente seguir esse padrão e transactions page também transactions page beleza Show Beleza turma agora esse login page o que que ele vai ser ele vai ser uma div certo ah eu posso usar o display Grid aqui porque tanto essa coluna aqui né Essa parte da esquerda quanto

a da direita ocupam a mesma largura Então vou usar um display Grid por exemplo aqui eu Vou colocar esse texto esse botão que vai ser do shad cen também e aqui essa imagem essa imagem eu vou exportá-lo então vou exportar aqui no figma você pode acessar o figma também o link tá nos grupos do WhatsApp Entra no grupo para você acessar o figma Beleza e você pode exportar aqui a imagem ó Então você clica na imagem exports minha câmera deve estar em cima Deixa eu tirar rapidinho ó então ah você consegue vir aqui ó exports

para você exportar a Imagem vou exportar com tamanho duplicado para eu ter uma qualidade melhor vou colocar aqui ah na minha pasta do projeto finance ai na pasta Public aqui já vou explicar para você e eu vou chamar ela de login.png beleza botar minha câmera aqui fechou agora que que eu vou fazer turma ã aqui na minha login page eu vou criar a minha div e essa div ela tem tem um display grids então eu vou colocar um Class name de grids grids calls 2 Isso aqui vai colocar um display Grid e falar que vai

ter duas colunas iguais se eu passar o mouse em cima ó eu tenho o que que essa classe equivale aqui no CSS beleza fechou primeiro eu vou ter o lado da direita que vai ser a imagem tá galera eu vou usar o image aqui do Next image esse aqui é um componente do Next e é uma das facilidades que o Next dá pra gente como next é um Framework ele nos dá várias coisas que por padrão o react não dá incluindo esse componente De imagem e ele tem várias otimizações aqui pra gente a gente pode

ver aqui ó na própria documentação mas ele Basicamente já tem las loading por padrão então a gente só vai carregar a imagem quando o usuário estiver de fato visualizando aquela imagem ela vai evitar layout shifts então não vai ter aquele problema de por exemplo ã o texto tem o texto e uma imagem aqui certo só que enquanto a imagem não carrega o texto ele fica aqui e quando a imagem Carrega o texto vai para baixo Então isso é um layout shift é uma quebra do layout com next image isso não acontece então tem essas e

outras otimizações também aqui na src eu vou passar bar login.png e isso aqui turma já vai automaticamente pegar o arquivo login.png que está na minha pasta Public Beleza daqui a pouco exp essa pasta Public para vocês e no eu vou colocar login faça login por exemplo tá E aqui galera V Colocar um with e um he o with e o he ele é obrigatório quando a gente tá usando o Next image Então eu preciso por exemplo colar um Wi aqui e um he dessa forma inclusive se eu tirar isso aqui galera não vai funcionar Tá

se eu vi aqui na minha aplicação ó e acessar aqui local host 3000 bar login ele vai dar um erro porque eu preciso do Wi e do heights mas nesse caso cara eu preciso que essa imagem ocupe 100% da largura e da altura certo então para Isso turma que que eu vou fazer vou fazer uma coisa um pouquinho diferente eu vou criar uma div aqui e essa div ela vai ter um Class name de relative ou seja um position relative e ela vai ter um height full e with full ter um height altura de 100%

e largura de 100% também e dentro dela eu vou colocar imagem e eu vou falar galera para essa imagem ela ocupar essa div então ela vai ocupar o tamanho dessa div aqui perfeito beleza e eu vou colocar um Class name Object Cover pra imagem ocupar aí toda a div pra imagem não ser diminuída para ela manter o aspect ratio para ela de fato ter esse comportamento de cobrir né de cover Fechou então se eu salvar Agora sim se eu recarregar eu ainda não vejo a minha a minha imagem e turma Por que que a minha

imagem não tá aparecendo aqui porque eu preciso fazer com que essa div aqui ó que está em volta aqui da minha página né então que tem esse display Grids que ela ocupe 100% da altura da tela e o que eu gosto de fazer nesses casos eu gosto de fazer com que o HTML e o body ocupem também 100% da altura então para fazer isso eu vou lá no meu globals.css e aqui galera eu vou falar que esse Body ele vai ter um height full então eu consigo aplicar uma classe do t a esse Body fazer

a mesma coisa aqui com HTML então apply height full E agora se eu colocar um height full aqui na minha divita também ela vai ocupar 100% da Altura perfeito fechou galera agora eu vou criar a parte da esquerda aqui né então eu vou colocar o logo o texto e o botão como a gente tem aqui no figma Então vou exportar Esse logo aqui também Você pode exportar aqui ó Então exporto vou exportar como svg para não perder qualidade Vou colocar aqui no desktop colocar logo vou colocar também aqui na pasta Public do projeto ó então

Public Vou salvar perfeito e agora eu vou colocar a imagem Aqui dentro vou colocar src bar logo.svg o if e o heights aqui galera vai ser o if aqui vai ser 173 e o height 39 perfeito e o alts aqui vai ser finance ai então esse alts é usado para fins de acessibilidade em leitores de tela por exemplo Eles leem esse aqui é uma descrição da sua imagem perfeito fechou turma agora embaixo dele eu vou colocar um H1 bem-vindo e eu vou colocar colar um Parágrafo aqui embaixo com esse texto aqui ó fechou beleza turma

então se eu salvar já tem alguma coisa aqui certo se eu recarregar Deixa eu tirar esse layout aqui de cima também galera esse texto aqui que não tá nada a ver ali então vamos lá no layout tirar esse H1 daqui beleza fechou agora Tur eu preciso colocar tudo isso aqui a imagem o título e o parágrafo dentro de uma div né para que eles fiquem aí Ã todos juntos né então eu vou pegar isso aqui vou jogar pra div fechou agora eu vou falar que essa div vai ter um Flex Flex Call he full Então

vai ter um Flex Direction colum ocupar 100% da altura e ela vai ter um just fy sener aqui então Ó vim para cá na verdade é item Center e item cer também né então items cer ó Então beleza show de bola na verdade eu vou tirar esse JF Center e eu vou tirar o item Center Na verdade eu quero alinhar apenas Verticalmente aqui OK e eu preciso fazer também com Que essa div tem um pading né ó ela tem um pading de 32 Então vamos lá aqui eu vou colocar um pading de não tá aparecendo

aqui na extensão no complete deixa eu recarregar meu V code que às vezes ele dá essa bugada mesmo então pading e para você colocar P no te p e você coloca aqui a medida Então vou colocar p8 deixa eu Ok então já tem um pequeno Pading e esse texto aqui galera não só o texto mas tudo aqui dentro ó vai ter uma largura máxima aqui né então Ó esse conteúdo ele tem uma largura máxima de 488 pixels então eu vou fazer o seguinte eu vou colocar tudo isso aqui ã é na verdade cara eu posso

colocar aqui ó Max with 500 pixels E aí eu coloco um MX alto para ele ficar no meio aqui fechou beleza perfeito turma então tá feito Aqui agora eu vou aumentar o tamanho desse H1 vai ser um Class name text 4xl vai ser um Font b então percebe que eu aumentei o tamanho do texto coloquei um Font bolts também um Font weight maior e esse parágrafo galera ele vai ter um Class name de text muted foreground essa é uma cor do shad CN que tá aqui ó no globals.css ó tenho esse text muted foreground aqui

ó percebe Então essa corzinha aqui que é um cinza eu vou também aumentar um Pouco essa largura que tá muito pequena colocar 550 pixels e ficou um pouquinho pequeno eu acho 650 colocar 550 mesmo beleza e eu vou colocar um espaçamento né então entre o logo e o H1 então entre o logo aqui ó e o H1 vou ter 32 entre o H1 aqui eu vou ter 12 e entre aqui vou ter 32 Fechou então aqui ó no image eu posso colocar um Class name de Mb 8 que é 32 ó margem borom 32 pixels

ok aqui no H1 eu vou colocar Um mb3 que é 12 pixels legal e aqui na imagem é tá certinho É isso mesmo e aí eu vou colocar o buron né faltou o botão aqui embaixo então aqui embaixo do parágrafo vou colocar o buron eu vou colocar fazer login ou criar conta beleza e a Variant desse botão Ou seja a variante dele vai ser ó Variant outline Então essa Variant galera está na documentação do shad CN ó então aqui no Bon você tem várias variantes ó o Primary secondary destructive outline Ghost e assim por diante

eu vou usar ah a outline Ok belezinha turma E além disso eu quero colocar um espaçamento então aqui no parágrafo vou colocar um B de 8 margem borom de 32 pixels perfeito eu vou colocar um ícone aqui também dentro do buron então para is eu vou importar aqui ó o login icon do lucid react que é uma biblioteca que vem aqui também com o shad CN Ok e aqui eu vou colocar uma Class nesse Button Na Verdade nesse ícone aqui de MR2 uma margem w aqui perfeito turma Fechou então fizemos aqui a nossa tela de

login show de bola então vamos fazer um commit vamos lá então aqui eu vou usar a própria ferramenta aqui do code do Git Fits ads initial colocar ads login page então a gente já tou a tela de login pra nossa aplicação fechou agora turma eu preciso de fato fazer o login né então quando eu clicar aqui em fazer login ou criar conta eu quero fazer o login ou Criar conta né não tá fazendo nada atualmente esse botão e para isso galera a gente vai usar o clerk o clerk é um serviço de autenticação tá então

quando você tá trabalhando com uma aplicação e você quer implement algo que pensa comigo todas as aplicações precisam certo Todo mundo precisa de autenticação nesse caso usa uma biblioteca usa um serviço porque é um trabalho que você não precisa fazer do zero quando já tem inúmeras soluções para isso claro que se Você tá aprendendo algo do zero tipo assim você tá fazendo um curso por exemplo é importante você aprender a fazer do zero as coisas a fazer uma autenticação do zero por exemplo mas quando você tá criando um projeto para colocar no mercado enfim um

projeto que Tá exigindo dinheiro para ser feito que tá enfim alguém tá pagando aquele projeto usa um serviço usa uma biblioteca porque você vai salvar muito tempo e é isso que a gente vai fazer Aqui na nossa aplicação você tem outras opções também você tem o Next off que a gente já usou em outras versões da F quick mas o clerk é um serviço que é muito mais fácil de você configurar só que ele é um serviço galera o Next off ele é uma biblioteca tá são coisas diferentes porque o clerk ele vai te cobrar

aqui por número de usuários né então quando você tem mais de 10.000 usuários ativos você vai ter que pagar $5 aqui por mês beleza então tem esse Ponto mas como a gente tá criando um SAS pensa comigo e o usuário ele vai pagar para usar ele vai ter um plano pago muitas vezes esse ganho que você vai ter com as assinaturas vai pagar o clerk vai ser suficiente para bancar esse valor aqui tá então se você tem uma aplicação que ela tem alguma forma de receber dinheiro de Fazer Dinheiro de faturar você pode pensar em

usar o clerk senão eu recomendo você usar o Next off que é uma alternativa gratuita totalmente Gratuita e a gente tem no f Club vídeo sobre o Next off projetos com next off Mas vamos usar o clerk nesse caso aqui beleza então galera para fazer o setup aqui dele é bem tranquilo primeiro você tem que criar sua conta então você vem aqui em get started e eu vou fazer aqui com o Google é bem rápido então vamos lá fazer login aqui com a minha conta você vai ver cara como é rápido como é impressionante isso

aqui tá Então vamos lá ele vai pedir aqui o nome da minha Aplicação vou colocar finance ai e aqui ele vai perguntar quais métodos de login eu quero então eu quero e-mail e eu quero Google ou seja eu vou dar a opção do cara do usuário Fazer login com o e-mail dele ou com a conta do Google se você quiser colocar outras aqui você pode tipo github por exemplo eu vou deixar apenas o do Google tá então vou criar a aplicação beleza ele já vai me dar um guia aqui com nextjs Olha que Interessante Então

primeiro eu tenho que instalar essa biblioteca aqui do clerk Então vamos lá vou abrir meu terminal vou instalar aqui ó npm install clerk next JS na versão 5.7.5 tá versão que eu vou usar aqui depois ele vai pedir para eu definir as minhas variáveis de ambiente eu vou copiar isso aqui e aqui no ponto env eu vou colar vou criar um comentário aqui ó colocar clerk e eu vou ter as minhas variáveis aqui beleza deletar esses comentários aqui também Beleza olha como é fáil ele já dá tudo pronto aqui para mim depois eu preciso criar

esse arquivo midware PTS né aqui na raiz do projeto Então vamos lá vou criar aqui midware PTS e esse arquivo galera ele é o midware né Você pode dar uma olhada também aqui no nextjs na documentação do midware mas a gente vai usar também mais pra frente com mais intensidade também ok mas isso aqui essencialmente vai ser executado sempre que a gente acessar uma página e o Next O clerk na verdade precisa disso aqui para funcionar bem ok fechou turma agora eu preciso adicionar esse clerk provider para minha aplicação Então vamos lá vou aqui no

layout E como eu quero adicionar ele para minha aplicação inteira eu vou colocar no layout porque lembra o layout ele fica em volta de todas as páginas Ok então vou colocar aqui ó em volta do HTML clerk Na verdade vou colocar em volta do B aqui Ah então aqui ó clerk provider eu vou importar do Next certo provider do Next JS Ok beleza e é isso basicamente Fechou então vamos rodar minha aplicação para ver se não quebrou nada então recarreguei tá funcionando OK agora o que que eu quero fazer galera o clerk ele tá configurado

Então midare tá configurado variáveis de ambiente também legal agora eu preciso cara quando eu clicar aqui ó na minha pasta login page PSX na minha página de Login quando eu clicar nesse botão de fazer login ou criar conta eu preciso de fato levar o usuário para esse fluxo de fazer login ou criar conta certo então para fazer ISO Olha que interessante eu vou importar o sign buron do clerk barns e aqui eu vou colocar dentro dele o meu buron só isso olha que massa Vou salvar que que vai acontecer quando eu clicar aqui se prepara

ó olha que interessante ele me jogou para essa tela Para eu fazer o login na minha aplicação tá beleza eu vou clicar aqui em continuar com Google ele vai pedir minha conta perfeito vou selecionar continuar beleza ele vai redirecionar de volta pra minha aplicação sensacional Ok mas não aconteceu nada por quê Porque agora a gente tem que acessar os dados desse usuário que acabou de fazer login e para isso turma que que eu vou fazer vamos lá vamos lá vamos fazer uma brincadeira aqui Aqui na minha página de login eu tenho que fazer a seguinte

lógica se o usuário está logado eu não vou deixar ele ver essa página aqui certo como que eu faço isso seguinte turma eu vou aqui na minha login page criar uma constante que vai ser igual a off eu vou importar isso aqui do nexts bar server vou colocar um ait aqui na frente e aqui turma tá um ponto bem Interessante do Next que um componente ele pode ser assíncrono e a gente vai ver isso com mais detalhes na próxima aula beleza por enquanto só coloca esse assink aqui a gente V com mais detalhes disso aqui

na próxima aula beleza eu prometo para você fechou e aqui galera eu vou colocar um user ID se eu tiver um user ID Eu Vou Chamar esse redirect do Next bar navigation Vou importar ele aqui do Next bar navigation redirect to barra fechou então se eu Salvar Olha que interessante ó ele já me redireciona para cá se eu colocar 3000 bar login ele me redireciona para cá porque eu estou logado Eu tenho um user ID esse off vai pegar o usuário que tá logado Então se esse user ID existir significa que eu estou logado Ok

fechou agora turma que que eu vou fazer eu vou criar mais ou menos esse componente aqui ó da nossa sideb da nossa Perão da noss Barra negação para eu mostrar isso aqui legal para eu mostrar essa essa Barrinha Aqui na verdade vamos fazer o seguinte cara só pra gente ter um exemplo aqui na próxima aula a gente estiliza melhor aqui na minha homepage eu vou galera fazer o seguinte eu vou renderizar um cara chamado user Button que eu vou importado clerk barns Olha que interessante turma aqui na minha home Eu tenho esse cara aqui tá

vendo e para deixar mais claro o que que eu vou fazer eu vou criar uma div eu vou Falar que ela vai ser he full Flex item Center usf Center só para tudo ficar Centralizado e aqui eu vou colocar o user buttle e eu vou passar uma prop para ele chamada show name beleza Ah não tá aparecendo o nome era para aparecer mas tudo bem a gente vê isso também na próxima aula deve ter alguma coisa a ver com o tema que a gente vai ver na próxima aula e aqui turma quando eu clico aqui

olha que interessante Aparece os meus dados olha que massa e eu posso fazer os sign outs então se eu clicar aqui ó não tenho mais nada aqui se eu for lá pra minha página de login eu consigo ver ela porque eu não estou mais logado então percebe que o clerk ele já faz essa esse gerenciamento do Estado de autenticação para mim então se eu vier aqui fazer login ou criar conta continuar aqui com o Google novamente vier para cá Olha que interessante ó continuar ele vai fazer o Login para mim vai me redirecionar e eu

tô aqui ó aqui que tá o meu ícone aqui do usuário olha que massa e aqui na home cara pensa comigo eu não posso deixar o usuário acessar essa página porque posteriormente essa página vai ser galera essa página inicial aqui ó essa aqui eu não posso deixar ele acessar essa página se ele não estiver logado Então o que eu posso fazer aqui ó eu posso transformar isso aqui em assink novamente eu posso chamar aqui ele a Waits off e eu posso aqui pegar o user id e eu vou verificar se eu não tiver um user

ID É porque eu não estou logado eu vou redirecionar ele pra tela de login ó Beleza então se eu sair eu já vou voltar pra tela de login porque ele vai ver que eu não tenho mais usuário vai me redirecionar se eu fazer o login agora então continuar com o Google vi para cá continuar olha que massa eu tô aqui Beleza olha que massa turma Olha que sensacional e turma aqui eu posso até mesmo cara é mudar o meu tema aqui ó percebe que isso aqui tá Light né tá com esse tema branco eu posso

mudar pro tema Dark se eu procurar por clerk Fes eu consigo aqui ó mudar o tema eu consigo colocar o o light e o Dark então para isso eu preciso dar uma olhada na documentação aqui ó preciso instar esse clerk fims vamos fazer isso aqui rapidinho então Vamos lá eu vou instalar esse clerk FS na versão deixa eu ver a versão na versão 2.1.37 Ok e agora ã aqui no user Button que que eu vou fazer eu vou passar o appearance vai ser um objeto vou colocar base them e aqui eu vou importar o Dark

do clerk Fes então se eu Viar para cá agora aparece o nome ó porque tava Preto basicamente o nome agora tá tudo Dark e eu posso galera também lá no meu layout e turma eu tô navegando Assim entre os Arquivos com Cont contrl P tá cont control P eu naveg Assim entre os arquivos eu posso buscar e navegar entre os arquivos muito rápido e aqui no clerk provider eu vou passar o appearance base F Dark salvei perfeito tá aqui ó e aqui galera eu posso tirar esse appearance do meu user Button porque eu já estou

com appearance aqui no meu layout então ele já vai aplicar o tema Dark para tudo então agora se eu fazer o sign out percebe que todo o fluxo de login vai Ficar Ah aqui não vai ficar preto não tem como a gente fazer isso não vai ficar com o tema Dark mas ah pelo menos o nosso user buron vai ficar aqui se eu vier aqui em manage accounts também olha o tanto de coisa turma que o clerk já dá pra gente claro que isso vem com o custo como eu falei para vocês né a gente

tem aquele custo lá se você passa de uma faixa de usuários mensais mas cara isso aqui é muito massa eu posso mudar minha foto eu Tenho aqui opções de segurança aqui também isso aqui é muito muito legal tá eu posso acionar outros e-mails aqui isso aqui é sensacional e a gente já tá com autenticação Funcionando aqui na nossa aplicação Fechou eu vou remover esse Import daqui perfeito ah ok então vamos fazer o nosso commit isso aqui foi uma feature Foi algo novo que a gente fez certo então aqui eu vou adicionar aqui então se você

nunca usou essa ferramenta de Git aqui Do vest code quando você clica aqui no Mais Você adiciona esses arquivos no stag Então você prepara eles para commit e eu vou colocar um feits aqui adds authentication with clerk perfeito e turma agora a gente está chegando aqui no final da aula eu quero parabenizar você por você estar assistindo até aqui eu sei que é muito conteúdo mas eu quero te parabenizar de verdade porque com certeza esse esforço vai dar frutos vai valer a pena e agora Eu quero fazer uma configuração com você de uma ferramenta que

eu acho muito massa da gente ter aqui no nosso projeto Porque pensa comigo a gente tá usando o prer certo para formatar o nosso código e o para ar erros neste código beleza mas tem um problema a gente só executa o prer quando a gente salva o arquivo e por quê Porque a gente tem a extensão do prer instalada e porque a gente configurou o nosso vs code para usar o prer para formatar mas imagina que você Tá trabalhando num projeto real e você usa o prer nele mas tem um Dev que não tem o

prer no vs code dele então não vai formatar ele vai subir código pro github sem formatação Com erros do S link por por exemplo então para solucionar esse problema a gente usa uma coisa chamada G hooks os G hooks são comandos que a gente roda no nosso código antes de fazer um commit Então o que eu quero fazer eu quero executar o preter eu quero formatar o código com preter antes De cada commit independentemente se a pessoa tem ou não o prer no vs code dela ou eslint eu quero rodar também o is link para

detectar erros no código também antes de cada comente para isso a gente vai usar uma biblioteca chamada husky e essa biblioteca permite com que a gente use esses Git hooks Beleza então eu vou instalar ele vou aqui no meu terminal vou rodar o npm Install e eu vou instalar como dependência de desenvolvimento porque eu não preciso Dele em produção apenas para desenvolvimento certo eu vou instalar aqui o husk na versão 9.1.6 então 9.1.6 Opa p6 beleza e eu também turma preciso instalar outra biblioteca chamada lints staged Tá eu vou instalar ela também na versão vamos

ver 12.3.2 então vamos lá install também como dependência de desenvolvimento links staged na versão 12 3.2 e a gente vai usar ambos aqui em conjunto Ok beleza agora eu vou rodar um Npx husky init Isso aqui vai inicializar o rusk no nosso projeto Ele criou pra gente essa pasta P husk com esse arquivo pre-commit aqui dentro turma a gente vai colocar qual comando a gente quer executar antes de cada commit então quando eu fizer um commit o que eu quero executar e aqui galera eu vou rodar o link staged vou rodar o npx link staged

o link Stage turma ele vai pegar apenas os arquivos que estão em Stage Ou seja que estão preparados para commit e a Gente vai rodar certo comando nestes arquivos ok Porque eu não quero Imagine que eu tenho 5000 arqu no meu projeto se eu fiz um commit que eu tô alterando apenas um destes 5000 eu não quero rodar o prer nesse 5000 por exemplo então eu não posso rodar por exemplo tipo um prer aqui para corrigir tudo senão isso aqui vai rodar em todos os arquivos então o link stag ele faz esse filtro ele só

roda tal comando nos arquivos que estão naquele commit beleza e para configurar O link staged eu vou criar um arquivo aqui chamado pon link staged rc.js isso na pasta raiz do meu projeto Ok e aqui eu vou colar isso aqui ó então eu vou colar isso aqui que vai essencialmente rodar o es link Fix Ou seja eu vou corrigir os erros do es link nos arquivos e eu vou executar o prer esse prer WR Vai formatar os arquivos tá e eu vou fazer isso para todo arquivo pon TS ou pon tsx e eu preciso obviamente

instalar também o prer tá porque eu não Tenho instalado aqui na verdade eu tenho já o Next já instala perfeito já tenho aqui ó preder 3.3.3 Fechou então turma eu vou fazer um teste ó vamos lá vamos lá eu vou colocar um arquivo aqui no meu commit eu vou por exemplo criar uma variável aqui ó name e eu tenho um erro de lent então ele não deve deixar eu fazer o comit com esse erro Esse é o propósito dos Git hooks e eu vou tirar a formatação aqui ó por Exemplo Deixar tudo errado aqui eu

vou apertar control shift p e eu vou selecionar save ele não formatar esse arquivo ao salvar Beleza agora eu vou rodar um Git vou colocar um Git commit e vou colocar um test aqui só PR ele ver se vai funcionar mesmo só pra gente ver se vai funcionar o Lage olha que massa turma ele rodou ó Então olha que interessante el rodou L nos arquivos do meu commit ele viu que tem um erro então ele não deixou fazer o commit se eu tiar Esse name eu não mais ter o erro do eente certo então vou

tirar Vou salvar sem formatar para ele não formatar comter e agora eu vou rodar de novo então Git commits e ele vai formatar esse arquivo ó se liga formatou e fez o commit olha que interessante olha que massa então aí a gente garante que todos os nossos arquivos estão formatados como a gente quer que eles estejam eu vou desfazer esse último commit aqui ó vou vir aqui em commits vou desfazer esse Commit só fiz para testar mesmo beleza então configuramos já o link staged eu vou fazer um commit aqui então vai ser um Core ads

Gi Hook setup então a gente adicionou a configuração dos G hooks perfeito show de bola turma agora a gente pode também galera adicionar outra verificação no nosso commit que é o seguinte essa biblioteca aqui ó essa Git commits message linter ela também vai verificar se a mensagem do nosso commit É compatível com conventional commits então eu sempre vou Obrigatoriamente precisar colocar um prefixo aqui no meu com fixit e etc essa biblioteca vai fazer isso pra gente então posso instalar ela aqui também então vamos lá vou instalar na versão 5.0.8 legal e agora eu vou descer

um pouquinho aqui ó work with husk 5 eu preciso fazer isso aqui Ó Então vou executar Esse comando created tá vou fazer o seguinte galera eu vou criar nessa pasta pon husk um arquivo chamado commits message e aqui dentro eu vou colocar isso aqui ó Beleza vou dar um Git AD vou colocar Git commit vou colocar teste por exemplo percebe turma que ele deu erro ó Qual o erro que ele deu invalid Get commit message e ele até dá o motivo pelo qual essa mensagem tá inválida bom ã eu preciso que que a mensagem tenha

no Mínimo 10 caracteres ó Então vou colocar mais caracteres aqui ó só para ver mais uma vez Deu erro agora é o quê eu preciso que ela tenha um escopo né o prefixo então se eu colocar agora ó gits commit vou colocar um Core ads Git commits message linter agora ele vai deixar e fez o commit porque agora eu tenho o prefixo aqui na mensagem perfeito show de bola turma muito bom então agora turma estamos com o projeto liso redondinho aqui pra gente na Próxima aula fazer a próxima tela que vai ser essa aqui ó

gestão de transações Então a gente vai conseguir ver as transações criar uma transação nova vamos começar a interagir com o nosso banco de dado de dados então nessa aula a gente fez o setup dele configurou criou as tabelas e tal conheceu ali o básico do Prisma e na próxima aula a gente vai fazer essa integração mais forte com o banco para exibir criar editar e deletar as nossas transações Beleza E mais uma vez eu quero te parabenizar por você ter terminado se você terminou se você tá no final aqui da aula deixa aqui nos comentários

agora #sp para eu saber que você faz parte desse grupo que fica até o final que termina o que começa que tem comprometimento e que vai ficar até o final da F quick eu tô muito feliz pelo projeto que a gente tá criando e esse aqui é só o começo lembrando se você tem algum amigo ou amiga que quer também Evoluir como deve que quer fazer esse projeto sensacional para colocar no portfólio para dar esse próximo passo na carreira manda F quick para esse amigo ou para essa amiga porque com certeza vai agregar muito aí

na carreira dela ou dele também e lembrando a gente tem também vários links para você acessar a gente tem o nosso notion nosso discord para você tirar as suas dúvidas inclusive se ficou alguma dúvida manda lá no discord Ou se você quiser guarda Pra quinta-feira que a gente vai ter uma live aqui onde a gente vai tirar as suas dúvidas beleza e turma outra coisinha pra gente finalizar aqui muitas pessoas Perguntaram para mim ontem sobre o f Club o f Club é o meu treinamento completo que vai levar você pro próximo nível na programação com

Com certeza ele vai fazer você crescer muito como programador d o seu próximo passo como programador nós já temos mais de 700 aulas mais de 400 alunos e se você quer Saber mais detalhes sobre o fus Club e também sobre a melhor oportunidade da história do fus Club Para você fazer parte da nossa família participe da nossa Live de quinta-feira que lá eu vou dar todos os detalhes dessa oportunidade imperdível que a gente preparou para você para comemorar essa black friday aí beleza turminha vamos para cima amanhã tem mais tem outra aula aqui pra gente

continuar o nosso projeto como eu falei e mais uma vez vamos comigo tô muito Orgulhoso de você e esse é só o começo a gente se vê amanhã pra próxima aula