Aula 2: Setup do Projeto | Full Stack Week

Fala Turma sejam muito bem-vindos à segunda aula da full stack Week e olha eu estou extremamente feliz por você estar aqui porque a gente preparou um evento muito massa para você tem muito conteúdo aqui e eu tenho certeza de que todo esse conteúdo que você verá durante essa nossa semana tem potencial de transformar a sua carreira como deve e hoje a gente vai fazer o setup inicial do nosso projeto Ou seja a gente vai Configurar ambiente configurar vest code configurar projeto configurar ferramentas criaremos a base necessária para que a gente siga nas próximas aulas a

criação do nosso sistema de self checkout para restaurantes e Dev se você não assistiu a aula de ontem que basicamente foi aula de apresentação do evento Então eu dei todos os detalhes a respeito dessa edição da F quick que com certeza é a melhor da história eu falei tudo que você precisa saber para tirar o Melhor proveito possível aqui do nosso evento Então se você ainda não assistiu a aula de ontem pausa essa aula aqui assista a aula de ontem para você não perder nada dessa F weck depois você volta aqui fechou e turma antes

da gente ir pro conteúdo e hoje vai ter muito código muito conteúdo mão na massa já para você tá eu quero dar uma rápida repassada no nosso cronograma aqui da full stack weck belezinha Então galera ã esse aqui é o nosso cronograma Tá certo Então ontem nós tivemos aula aula um como eu falei foi aula de boas-vindas e tudo mais e hoje estamos aqui nessa aula dois do setup do projeto Ok e turma a aula de hoje até a aula de sexta-feira Elas serão gravadas E essas aulas gravadas serão liberadas sempre às 9 horas da

manhã tá certo então nós já fizemos mais de seis edições da F quick e a gente chegou nesse formato aqui onde algumas aulas são ao vivo e outras são gravadas e a gente viu que esse é o Melhor formato para você aprender mais para você ter mais resultado aqui no nosso evento Tá certo então a aula de amanhã também será ã gravada liberada 9 horas da manhã tá certo e nessa aula aqui a gente vai criar a tela do restaurante aqui do nosso projeto então turma será essa tela aqui ok então a gente vai fazer

essa tela aqui do restaurante Ok ah e depois a gente vai pra aula 4 dia 20 né então são aulas todos os dias até sexta-feira na aula Quatro Nós faremos a tela do produto que é essa tela aqui Bacana Então essa tela aqui Nós faremos na aula 4 Ok e depois na aula CCO Nós faremos a aula onde Na verdade Nós faremos nessa aula o carrinho de compras da nossa aplicação Então esse carrinho aqui a gente vai criar nessa aula aqui que vai ser dia 21 de Fevereiro também gravada e também Faremos o Deploy do

projeto Ou seja colocaremos a aplicação online vamos dizer assim para que você possa mandar Ela paraos seus amigos postar no seu LinkedIn ghub etc beleza e turma na última aula que vai ser dia 23 de Fevereiro essa aqui também será ao vivo para que a gente possa fechar o evento com chave de ouro tá E galera agora eu quero falar com vocês sobre o sorteio você tá vendo aqui que nessa aula aqui a última aula vai ter um sorteio galera seguinte Nós faremos o sorteio de um notebook Gamer avaliado em imagem R 4.200 Tá certo

e para você participar Desse sorteio você tem que fazer três coisas simples Tá primeiro você tem que entrar na nossa plataforma exclusiva da F quick eu vou mostrar daqui a pouquinho ela para vocês mas para você entrar É só você clicar no primeiro link aqui da descrição colocar o e-mail que você usou para se cadastrar na FC weck e você já estará dentro da plataforma Esse é o primeiro passo segundo passo você vai entrar no nosso grupo do WhatsApp o link para você entrar nesse grupo também está Na plataforma e aqui na descrição do vídeo

também tá certo e o terceiro passo você precisa estar ao vivo conosco nesse dia aqui na última aula porque se você fizer esses dois primeiros passos mas não estiver ao vivo conosco nessa última aula aqui você não vai ganhar o sorteio tá porque a gente só vai validar o ganhador se esse ganhador estiver ao vivo conosco Tá certo então esteja aqui nessa última aula e também nessa aula seis nessa aula seis liberaremos a Última letra do certificado como que vai funcionar esse certificado é o seguinte em toda a aula eu vou falar um código pode

ser uma letra pode ser um número e no final dessas aulas você vai ter um código com seis caracteres porque eu vou falar um caractere né por aula então por exemplo na aula um eu falei ah na dois B na 3c na 4D na 5e e na 6f por exemplo exemplo tá não é esse código aí você vai pegar essa senha a b c d f e vai mandar no meu Direct do Instagram e eu vou Gerar um certificado para você é assim que você vai emitir o seu certificado então participe de todas as aulas

para você pegar todos os códigos e o código eu vou falar de forma aleatória durante a aula beleza e também teremos o momento de tirar dúvidas ou seja esteja ao vivo na última aula é de extrema importância que você esteja lá conosco Tá e agora pra gente finalizar OS avisos aqui que eu tenho para você eu vou falar da nossa plataforma exclusiva tá turma essa aqui É a nossa plataforma aqui da fch Quick Beleza então eu já falei Como que você entra e assim que você estiver aqui dentro você vai ter o nosso mural que

é onde nós fazemos as nossas publicações da fch weck e tudo isso então faremos posts aqui também com conteúdos exclusivos para você então esteja aqui dentro tá certo E aqui nessa plataforma nós temos também um vídeo sobre o ingresso Gold o que que é esse ingresso Gold é basicamente uma forma que você Tem de se tornar um aluno Vip aqui da F quick então os alunos que adquirirem o ingresso Gold eles terão acesso ao conteúdo aqui do evento por mais 7 dias então depois que a f quick terminar você vai ter acesso a todas as

aulas por mais 7 dias então você vai ter mais tempo para assistir para rever Enfim no seu ritmo ali e também Você vai ganhar uma série de aulas sobre LinkedIn currículo e github então você vai aprender como criar um LinkedIn currículo e github Campeões para que você tenha mais resultado no mercado também e terceiro último bônus aqui desse ingresso é que você vai ganhar uma mentoria ao vivo comigo e com os demais alunos que adquirirem o ingresso Golden então se você quer se tornar esse membro Vip aqui da F stack weck vem aqui e clica

nesse link aqui para você adquirir o seu ingresso Gold belezinha segunda coisa galera nós temos um programa de indicação nessa F quick como que Funciona você consegue indicar F quick para outros devs que você conhece então para você fazer isso você vem aqui nessa são indique beleza e aqui você tem o seu link do convite você copia esse link e você manda para quem você quer indicar F quick se essa pessoa acessar esse link e se cadastrar no evento que basicamente esse link aqui ah é o link da nossa página tá então se essa pessoa

se cadastrar na F weck você ganha uma indicação e os cinco que mais indicarem Ganharão prêmios legal isso aqui não é sorteio tá galera se você for o primeiro que mais indicar por exemplo Entre todos os outros alunos da F Week você vai ganhar monor ultrawide o segundo teclado e assim por diante esses aqui são os prêmios tá galera olha que massa então monitor Gamer Curvo cara olha isso aqui até eu vou indicar f porque quero esse monitor aqui Brincadeira Galera galera É só vocês que indicam tá teclado Logitech Mouse Logitech então indique a f

quick Para os seus amigos porque além de ajudá-los né porque eles também vão consumir esse conteúdo aqui que como eu falei tem potencial de transformar sua carreira você também pode ganhar prêmios exclusivos que vão ajudar aí a a turbinar o seu setup tá e se você indicar apenas duas pessoas você também tem um prêmio que é um combo ebooks de JavaScript Ah para você Fechou então turma estejam dentro aqui da nossa plataforma e galera já vamos também ah Criar um compromisso aqui chama seus amigos aí porque você chamando seus amigos você vai ajudá-los você vai

se ajudar também e quando você está com alguém ali quando você tá fazendo a f quick por exemplo junto com alguém fica muito mais fácil porque Pô você consegue se ajudar a ser ajudado ajudar então compartilha F quick com seus amigos beleza E falando em compartilhar nós temos também uma comunidade no discord para você tirar suas dúvidas e fazer Networking temos também uma equipe de suporte dedicada exclusivamente para te ajudar nessa comunidade o link para você entrar também está aqui na nossa plataforma Fechou então turma agora que eu já dei todos os avisos para vocês

vamos começar aqui ah com o conteúdo e turma hoje Nós faremos o setup desse esse projetinho aqui sensacional tá certo e você pode estar se perguntando Felipão Onde tá o link do figma eu quero esse figma aí para mim Está dentro da nossa plataforma então entre na nossa plataforma porque o figma o repositório do projeto todos os materiais complementares estarão dentro da nossa plataforma Ok então turma Primeiro vamos fazer o setup deste projeto aqui vamos fazer toda a configuração do ambiente e depois a gente vai ter essa base necessária pronta para que a gente ã

vá para as próximas aulas aqui então esse projeto aqui é o Projeto Ah que a gente vai Fazer Tá certo um sistema completo de self checkout Então bora lá começar o setup desse carinha aqui turma Bora lá então começar aqui a configuração do nosso projeto Tá eu vou criar uma pasta aqui na minha área de trabalho eu vou chamar essa pasta de full stack Week Donalds que vai ser o apelido aí do nosso projeto eu vou abrir ela com o vs code ou seja usarei o vs code ã como na verdade deixa eu abrir o

projeto aqui beleza eu usaria o vest code como o meu Editor de texto aqui se você quiser usar outro editor de texto você pode mas eu recomendo que você use o vest code para que você tenha a mesma experiência que eu aqui tá galera vamos começar primeiro com algumas extensões que eu quero passar para vocês instalarem aí no vs code de vocês tá primeiro Muita gente me pergunta sobre o meu tema eu uso um tema chamado po andr tá esse tema aqui é bem bacana eu acheo ele bem bonito Então esse aqui é o tema

que eu vou usar aqui Durante as nossas aulas tá certo é o que a galera mais me pergunta segundo eu tenho também um tema de icons de ícones que é o Symbol icons então você pode instalá-lo também e usar aqui no seu vs code beleza e agora turma vamos para outras extensões mais importantes primeiro o preder tá o preder é uma extensão que formata o seu código automaticamente quando você o salva então coloca espaçamento coloca tabs Enfim então instale ele aí para você ter O seu código automaticamente formatado assim como eu volou ter aqui e

depois de você instalar você precisa vir aqui nesse canto inferior esquerdo settings ou configurações e aqui você vai procurar por default formatter ou formatador padrão se o seu vest code estiver em português e você vai colocar o preder aqui depois você vai procurar por Format on save ou formatar ao salvar e você vai marcar isso aqui então basicamente você tá falando pro vest Code formatar o seu código quando você o salva e usar o preder para fazer isso OK segunda extensão é o is lint então o is lint ele vai ajudar a gente a garantir

uma consistência de regras ali no nosso código eu vou mostrar isso na prática para você também então instale essa extensão outra extensão muito importante é o prisma tá a extensão do Prisma a gente vai usar o prisma como ORM já vou explicar o que é isso aqui mas instale essa extensão aqui e outra também é o Post CSS language support instale também essa extensão OK outra extensão é o twind Então a gente vai usar o twind para estilizar o nosso projeto então instale essa extensão é de extrema importância que você instale essa extensão aqui já

vou mostrar na prática também outra bem importante é o Git você vai ver que eu vou usar bastante ela ela basicamente dá super poderes aí pro vest Code em relação a Git eu vou mostrar na prática isso aqui também e a última mais Ou menos importante é a Simple react snippets que vai dar pra gente vários atalhos aí do react então instale também essa extensão aqui Fechou então turma nosso V code tá pronto aqui bora começar e galera nós usaremos o nextjs como Framework aqui para criar o nosso projeto por dois motivos primeiro que a

gente quer fazer um projeto full stack ou seja o nosso projeto vai ter banco de dados Ah então a gente precisa de um backend ali rodando também além do nosso Frontend então o nexts é perfeito para isso porque ele é um Framework full stack beleza e o Next hoje é o Framework react mais popular e demandado pelo mercado então é de extrema importância que você saiba ele a gente vai aprender aqui também neste ah projeto tá então a gente vai usar a última versão dele que é a next 15 é a versão 15 aqui do

Next Então a gente vai fazer o seguinte eu vou abrir aqui meu vs code eu vou abrir aqui um terminal você pode apertar cont Contrl J para abrir ou vir aqui em terminal New terminal e aqui eu vou digitar npx Create next app e galera uma coisa muito importante tá sempre que eu H for instalar uma dependência Ou seja eu for instalar instalar uma biblioteca algo assim eu vou instalar uma versão específica dessa biblioteca tá certo ah e claro galera não deixando também de falar você tem que ter o node instalado na sua máquina para

que você consiga executar o npx o npm Enfim então se você Não tem o node instalado instale e eu estou usando a versão 22 aqui do node tá ã na verdade a versão 20 deixa eu usar a 22 aqui e eu estou usando o nvm para gerenciar essas versões se você estiver usando uma versão diferente da minha não tem problema com tanto que seja pelo menos a versão 20 Ok e se você quiser você pode usar o nvm também vou deixar o link também na nossa plataforma para que você ã consiga ter várias versões do

node na sua máquina isso aqui é bem Bacana também ok então vamos lá galera sempre que eu for instalar uma dependência eu vou colocar uma versão específica então por exemplo creat next app eu vou colocar @ 15.1.6 ou seja vou criar um projeto ã na versão 15.1.6 do Next e sempre que eu fizer isso é de extrema importância que você faça o mesmo para que você use as mesmas versões que eu para que você não tenha nenhum problema de compatibilidade Beleza então aqui eu vou criar Nessa Versão e eu vou colocar um ponto para ele

criar o projeto nessa pasta aqui eu vou instalar aqui ele vai pedir para instalar ã a a gente vai usar o typescript então ele vai fazer umas perguntas pra gente a primeira s a gente vai usar o typ script a gente vai usar então a gente pode mexer aqui com as setas do teclado selecionar com enter ã usar is Lins vou usar es lint ter o ind SS vou usar também você gostaria de colocar o seu código dentro da pasta src Sim gostaria você gostaria de usar o we router Sim vamos usar já vou explicar

o que é isso Turbo pack não vamos usar Import Alliance não vamos modificar vou marcar como Não beleza ele vai começar aqui a instalar as dependências para mim e galera o que que nós faremos aqui primeiro a gente vai fazer o setup do banco de dados Beleza a gente vai modelar os dados ali depois eu volto pro next para mostrar alguns conceitos fundamentais do Next para vocês então Primeiro vamos modelar o banco Vamos pensar ali a nível de tabela e tudo e depois a gente volta aqui ã nos pormenores aqui do Next mas só para

garantir que tudo Tá ok eu vou rodar um npm Run Dev para ele inicializar aqui o meu projeto ele vai inicializar nessa URL aqui Luca host 3000 e tá aqui o meu projeto Fechou tá rodando acabou a f quick Pode fechar o vídeo Brincadeira Galera É só o começo aqui tá Bora para cima e turma como eu falei agora a gente Vai pensar no banco de dados da nossa aplicação Então bora lá ver como que a gente vai traduzir essa aplicação a nível de tabelas quais dados a gente vai salvar então vamos lá e depois

a gente volta nos pormenores aí do Next e turma sempre que você quer começar um projeto é importante que você olhe a nível de dados para ele então quais dados eu vou salvar e como que eu vou estruturar esses dados dentro de um banco e qual banco eu vou utilizar nesse caso galera A gente vai utilizar um banco relacional mas especificamente o postc cle que é um banco de dados relacional Tá certo então a gente vai usar esse banco aqui por quê Porque o nosso projeto ele tem vários relacionamentos se a gente for parar para

pensar Então vamos começar aqui primeiro a gente tem um restaurante Isso é óbvio né então eu quero estruturar a aplicação de forma que a gente possa ter diversos restaurantes então por exemplo tem o f quick Donalds pode ter o f quick BK pode ter o Subway Enfim então nós podemos ter vários restaurantes então o restaurante é uma entidade que a gente vai salvar dentro do nosso banco legal então teremos lá tabela restaurante por exemplo outra coisa nós teremos as categorias aqui desse restaurante ó porque aqui no Mac a gente tem por exemplo Lanches a gente

pode ter aqui lanches né e eu tô sem permissão de editar esse arquivo meu design não me deu permissão permissão Então posso Colocar Lanches aqui por exemplo posso colocar sei lá fritas sei lá então percebam que cada restaurante vai ter as suas categorias Então eu preciso também salvar essas categorias em algum lugar mas essas categorias terão essa relação com o restaurante percebe então um restaurante pode ter várias categorias e uma categoria pode ter apenas um restaurante porque cada restaurante vai ter a sua própria categoria eu não posso usar uma categoria em dois restaurantes Diferentes porque

porque o que acontece se eu editar essa categoria um restaurante o outro vai mudar também e nem sempre é isso que eu quero então já é duas tabelas aí que a gente vai ter percebe restaurante e eu posso chamar de sei lá categoria do restaurante algo assim categoria do cardápio enfim tá certo outra coisa turma e olha como é importante a gente começar a pensar mais a nível de banco antes de colocar a mão na massa porque isso impacta tudo tá Certo outra coisa nós teremos também o produto né então dentro da categoria lançamentos por

exemplo eu tenho estes produtos aqui e olha eu vou lançar um desafio para você eu duvido você terminar essa aula aqui sem fome porque enquanto eu fazia o projeto enfim quanto eu vi as telas eu fiquei com fome com vontade de pedir um Mac então se você tá na dieta aí eu vou te atrapalhar um pouquinho me perdoa mas vamos comigo vamos comigo tá então dentro das Categorias nós temos os produtos Então dentro da categoria lançamento temos esses produtos aqui então já é outra tabela percebe então vou ter a tabela produto essa tabela produto ela

vai ter uma relação com o restaurante porque cada restaurante tem os seus produtos concorda Por exemplo o Mac tem os seus que são totalmente diferentes dos produtos do Subway por exemplo então um produto vai estar dentro de um restaurante e dentro de uma categoria ok Porque dentro de lançamentos eu vou ter os lanches de lançamentos dentro de lanches os lanches e dentro de bebidas por exemplo outros produtos então nós já temos aí essa relação produtos restaurante categoria de restaurante fechou e também galera nós teremos Ah o carrinho de compras esse carrinho você poderia também criá-lo

no banco de dados tá então por exemplo você tem uma entidade carrinho lá uma tabela carrinho e você vai ter um carrinho por usuário Por exemplo E aí você dentro desse carrinho vai ter vários produtos mas nós não faremos isso a gente vai fazer esse carrinho apenas ali ah na nossa aplicação react tá apenas ali no front chend eu não quero persistir esse carrinho no banco tá por qu porque eu não vejo necessidade Por exemplo quando que é pode ser uma boa ideia você fazer isso você colocar o carrinho no banco de dados quando você

quer persistir o carrinho entre Dispositivos por exemplo então por exemplo eu tô aqui no meu celular com usuário tal eu entro no meu tablet eu tenho Aquele carrinho que eu fiz no meu celular a gente não quer fazer isso aqui então para reduzir complexidade também a gente vai fazer esse carrinho apenas a nível do front end tá certo mas uma coisa que a gente precisa armazenar no banco são os pedidos legal os pedidos então teremos out outra tabela Order né de pedido e essa tabela vai ter o qu Galera vai ter uma relação com o

restaurante porque um pedido pertence sempre a um restaurante e ela vai ter também os produtos legal então essas aqui são as nossas tabelas e também teremos essa primeira tela né que eu acabei deixando passar mas basicamente o usuário vai escolher se ele quer comer aqui ou se ele quer levar Por que essa informação é útil Porque pensa que você faz no futuro uma aplicação que O restaurante vai ver ele vai ver os pedidos que estão chegando é importante saber ao nível do restaurante se aquele pedido é para comer aqui ou para levar então essa informação

aqui a gente pode salvar aqui dentro do pedido tá então o pedido vai ter essa informação ele é para levar ou é para comer aqui belezinha então turma Essas são as tabelas que a gente vai ter restaurante para guardar o restaurante obviamente categorias do restaurante produtos que Serão vinculados ao restaurante restaurante e a categoria E emos também os pedidos que serão vinculados ao restaurante e terão vários produtos belezinha fechou turma então agora vamos começar a traduzir isso a nível de código tá e eu fiz também um diagrama aqui para ficar mais fácil para vocês visualizarem

ok então eu vou criar uma tabela restaurants que vai ter algumas informações aqui então ID o nome do restaurante esse Slug galera vai ser uma Espécie de ID Só que mais legível o Slug vai ser o que que o usuário vai colocar na URL da aplicação para acessar aquele restaurante porque ele tem que acessar esse cara aqui de alguma forma certo então o que que eu pensei tá eh a gente colocar por exemplo localhost 3000 bar fsw donals que aí vai ser o restaurante fsw donals Beleza então teremos esse Slug aqui que nesse caso vai

ser fsw donals teremos também a descrição do Restaurante h a foto dele né então esse cara aqui por exemplo ele tem essa foto tá vai ter H também o banner e vai ter algumas informações aqui de quando ele foi criado e quando ele foi atualizado e dentro do restaurante teremos a tabela menu category que vai ser a categoria do restaurante então aqui por exemplo vai ser Lanches bebidas fritas enfim e uma categoria sempre vai ter um restaurante mas um restaurante vai ter várias categorias então eu sinalizei essa Relação de one to many então um restaurante

tem várias categorias one to many dessa forma então um restaurante para várias categorias tá e uma categoria galera pode ter vários produtos Beleza então a gente vai ter dentro do produto ID nome descrição preço teremos também a URL da imagem os ingredientes que a gente também vai salvar a gente vê aqui ó que ah o produto tem a descrição tem o preço e tem também os ingredientes que eu vou Salvar como uma lista ã de string aqui no banco beleza e teremos também o Ed do restaurante ao qual este produto pertence e a categoria ao

qual este produto pertence tá E galera teremos também a tabela de Order que é o pedido então o que que a gente vai ter aqui dentro vamos lá ID do pedido total do pedido e por que esse total é importante galera porque eu tenho que saber o total que usuário pagou quando ele fez o pedido Ok temos também o status do Pedido esse status aqui ele pode ser por exemplo a gente vê aqui na tela ele pode ser em preparo finalizado enfim você pode colocar quantos estatus você quiser tá E também teremos esses E essas

propriedades aqui de data também tá E galera uma coisa muito importante eu vou criar uma tabela chamada prods que basicamente vai fazer essa relação entre produto e pedido Porque pensa comigo vamos supor que eu fiz o pedido hoje do produto ã Sei lá desse Big Mac duplo Aqui e hoje o preço dele é R 40 Então o meu pedido vai dar R 40 Mas vamos supor que eu altere o preço desse produto daqui por exemplo sei lá 20 dias o total desse pedido Ele pode mudar entende o valor do produto desse pedido Ele vai mudar

quando isso não faz sentido porque quando eu fiz o pedido o valor era X R 39,90 se eu no futuro mudar o valor desse produto eu não quero que o valor desse produto nesse pedido seja alterado eu quero que eles Mantenha o valor que Esse produto era quando o usuário fez a compra percebe então por isso eu vou criar essa tabela Order products aqui que basicamente vai falar o seguinte ó eu tenho o produto x que pertence a tal venda e quando essa venda foi criada esse produto tinha esse preço aqui e essa quantidade também

eu tenho que colocar a quantidade Ok então Order products vai ter o produto a quantidade o preço que ele estava quando eu fiz o pedido e também vai ter o Order ID tá Então galera essa aqui é a nossa Ah o nosso banco de dados Tá certo e como que a gente vai traduzir isso aqui para código efetivamente galera vamos usar o prisma para fazer isso que é um ORM o que que é um ORM é uma ferramenta que ajuda a gente na hora de trabalhar com o banco de dados então você não precisa por

exemplo escrever código cel o ORM faz isso para você tá Então como que a gente vai ã começar aqui com o prisma tá a gente vai usar o posts aqui Também e a gente vai rodar esses comandos aqui tá Então vamos lá aqui no nosso projeto e eu vou rodar alguns comandos aqui primeiro eu vou abrir aqui um novo terminal e eu vou instalar o prisma então npm install Prisma na versão 6.2.1 então sempre instale as mesmas versões que eu estou instalando tá então vou instalar essa versão aqui legal show de bola então aqui no

meu package P Jason a gente já tem o prisma aqui e eu também vou instalar o Prisma client na versão 6.2.1 também beleza show de bola galera coisa linda agora turma vamos fazer o seguinte eu vou criar Na verdade eu vou abrir meu terminal novamente eu vou digitar o seguinte npx Prisma inits Esse comando vai inicializar o prisma então o que que ele fez primeiro ele criou essa pasta Prisma tá e dentro dessa pasta Prisma Eu tenho esse esquema pon Prisma dentro desse esquema eu vou colocar as minhas tabelas então primeira tabela que eu Quero

colocar Restaurant que vai armazenar os restaurantes Como que eu faço isso Model Restaurant beleza dessa forma e o que que eu vou ter dentro deste restaurante primeiro eu vou ter o ID esse ID galera vai ser o quê vai ser um string então para você falar que um campo vai ser um string no Prisma você usa essa sintaxe aqui aqui e eu vou falar que ele vai ser um ID primário uma chave primária então para isso eu vou colocar @id e qual que vai ser o padrão Dele @default e o uid dessa forma ou seja

quando eu criar um restaurante o padrão deste ID o valor padrão desse cara vai ser um uu ID legal show que mais galera eu também vou ter um nome no restaurante eu vou ter também o Slug vou ter a description e turma acabei não mencionando mas eu estou usando o Git CoPilot para fazer esses aut complit aqui para mim tá então tô usando essa extensão aqui acabei não mencionando no começo da aula beleza Fechou que mais galera temos também o avatar image url que é o Avatar do restaurante que vai ser uma url tá temos

também o cover image url que é o banner do restaurante que no caso é isso aqui isso aqui beleza show ã e temos também os campos created ats e esse cara vai ser um date time e o default dele vai ser Now então o padrão dele vai ser o tempo atual então quando eu criar esse produto o valor padrão Desse created ads vai ser o momento em que eu criei o produto e temos também o updated ads que vai ser um date time eu vou colocar um @ updated ats então Prisma já vai atualizar esse

campo sempre que eu atualizar esse registro beleza fechou turma agora vamos fazer a próxima tabela que vai ser o menu category que vai ser a categoria do restaurante então vidas lunches etc Primeiro vai ter um ID que vai ser uma string @id o default dele vai ser uid Também que mais eu vou ter um nome vai ser uma string e aqui eu vou ter um Restaurant ID certo porque um menu category pertence a um restaurante então tenho que ter essa relação aqui então esse cara pertence a esse cara OK que mais galera eu vou ter

também o created ats vai ser um date time e o upt ads legal agora galera eu vou fazer o seguinte Olha só dentro deste menu category eu vou colocar o seguinte eu vou colocar Restaurant eu vou falar que Esse cara vai ser uma tabela Restaurant eu vou ditar @ relation e aqui eu vou passar esse Fields e o que eu estou falando aqui para o prisma Olha só este Campo não vai ser salvo no banco ele vai servir apenas internamente para o prisma saber que essa tabela referencia essa aqui beleza e eu estou falando o

seguinte Olha só eu tenho uma relação aqui ó onde este Campo Restaurant ID dessa tabela meno category referencia o campo ID da Tabela restaurante Então esse Restaurant ID referencia este ID aqui então esse reston ID referencia esse ID é basicamente isso que eu estou falando tá E por que deu esse erro aqui porque agora aqui no restaurants eu tenho que falar o seguinte ó esse cara vai ter uma lista de menu categories olha que massa olha que massa esse campo também não será salvo no banco vai ser usado apenas como referência internamente do Prisma Então

estou falando que este restaurante tem vários menu categories tem várias categorias Olha como a sintaxe fica bacana nisso aqui beleza fechou Qual é a próxima tabela Vamos criar ã a tabela de products tá essa tabela de products vai ter um ID que vai ser um string Ah ele também vai ser um default vou colocar um uid aqui como default Ah vai ter um name vai ser string o meu CoPilot já tá completando para mim Aqui então deixa eu só apagar esse menu category aqui para não ficar confuso para vocês então galera Ó vou ter o

ID dele o nome dele a descrição certo e você também poderia colocar um Slug aqui se você quisesse tá tanto no menu category quanto no products mas eu não vejo necessidade Beleza eu vou colocar apenas aqui no Restaurant porque é esse Slug Que o usuário vai usar de fato para acessar ali o restaurante tá eu vou ter a descrição eu vou ter o preço esse Preço você também poderia salvar como décimal beleza mas eu vou salvar como floats aqui porque o decimal ele acaba salvando ah usando o prisma acaba usando uma biblioteca do JavaScript a

decimal.js que dá alguns avisos que são meio chatos no next Então por puro Capricho eu sei que o float tem alguma diferença pro décimo mas no nosso caso aqui tá ok a gente pode usar o float a gente tem aulas no f Club onde a gente fala sobre a diferença entre esses dois Caras com mais detalhes Tá mas eu vou usar o float aqui não vamos entrar muito a fundo nisso aqui beleza então esse float é basicamente um número com pontos flutuantes porque o preço pode ser R 39,90 por exemplo Ok teremos também a image

url que vai ser a URL da imagem do produto e também teremos os campos aqui ah de data né então created ads e updated ads legal também teremos galera os ingredients que vão ser uma lista de string legal beleza turma show de bola o Que mais que tá faltando aqui eu preciso fazer dentro do produto a relação lembra que o produto ele pertence ao restaurante e pertence a uma categoria então primeiro passo Restaurant ID é um string que mais menu category ID é um string então primeiro vamos fazer a relação do restaurante lembra que é

uma relação one to many ou seja um restaurante pode ter vários produtos mas um produto pode ter apenas um restaurante Então como que eu traduzo Isso aqui no figma Olha só acima de Restaurant ID eu vou colocar Restaurant que vai ser um Restaurant Fields Restaurant ID referencia ID ou seja este Restaurant ID referencia o ID da tabela restaurants mesma coisa do menu category e aí aqui dentro do restaurants eu vou ter que fazer o seguinte ó eu vou ter uma lista de produtos olha que massa Olha como isso aqui fica semântico né você consegue bater

o olho nesse arquivo e já saber as Tabelas que você tem no seu banco saber a relação que você tem entre elas o prisma é bem legal ajuda muito a gente tá que mais turma noss teremos também a mesma relação mas no menu category então aqui dentro do menu category eu vou colocar o seguinte Olha só na verdade dentro do Product primeiro eu que eu V ter um menu category que vai ser menu category relation Fields primeiro parâmetro menu category ID referencia o ID da tabela menu category legal show Aqui menu category agora vou colocar

products lista de produtos olha que massa beleza show galera então estamos quase terminando aqui tá quase terminando então fizemos aqui Restaurant menu category e products legal agora turma a gente vai fazer a tabela de Order de pedido legal então vamos lá Model Order o que que essa Order vai ter galera vamos lá vamos lembrar aqui ó deixa eu entrar aqui eu vou deixar esse diagrama Também na nossa plataforma então entre na nossa plataforma Ok para você não perder nenum link nenhum arquivo que a gente tem para mandar para você então nós temos Total status consumption

method que vai ser para levar aqui ou para comer que a gente já falou sobre isso e as as datas aqui então vamos lá primeiro eu vou criar o ID vai ser string vai ser default uid ok que mais esse ID galera eu vou colocar um ao increments e vai ser um in tá é por qu Isso aqui vai ser basicamente um ID Auto incremental né então o primeiro pedido vai ter o ID 1 segundo do terceiro tr e assim por diante eh Por que eu acho isso interessante porque imagina pro restaurante né ele ter

um ID fácil de ler pro pedido é muito bom imagina que ele chama lá no guichê lá né então eu faço lá o pedido no nosso aplicativo na nossa aplicação e o restaurante chama Olha o pedido 10 tá pronto entendeu então eu acho que pode Ser bacana a gente fazer isso claro que isso traz alguns algumas implicações também mas a gente não vai muito a fundo nisso aqui na F que a gente vai mais ah em detalhes quando você deve usar uma Auto incremental quando não quais são os riscos dentro do F Club a gente

vai mais a fundo nisso aqui se você quiser você pode pesquisar mas basicamente a gente traz um problema de segurança né se você for ver para um lado de que agora um pedido é mais facilmente identificável Você tem o ID de qualquer pedido basicamente né então 1 2 3 4 é tudo ID Então esse é um problema mas a gente não vai muito a fundo aqui e não vai ser um problema efetivamente aqui no nosso projeto Tá certo que mais turma eu vou ter o total que também vai ser um float vai ser o total

do pedido Tá certo que mais eu vou ter o status esse status vai ser um enum Então vou criar um enum aqui ó Order status o que que é um enum é basicamente um conjunto de valores então Um pedido Ele pode ser por exemplo pendente e aqui é uma convenção duas coisas primeiro usar letras maiúsculas e segundo usar inglês né a gente tá usando inglês aqui pras tabelas também então é uma convenção a gente usar inglês até para você praticar o seu inglês também tá certo então aqui vai ser p que é p então pedido

acabou de ser feito que mais que eu vou ter galera eu vou ter por exemplo in preparation que vai ser em preparação eu tô fazendo esse pedido Tá preparando esse pedido e eu vou colocar outro também que vai ser finish ou seja finalizado você pode usar outros status também Você pode adicionar outros status e um adendo que eu faço aqui você pode e eu encorajo você a expandir esse projeto como você achar melhor então quer adicionar outra tabela nova funcionalidade Vai fundo beleza OK então agora eu vou falar que esse status vai ser então ele

só vai ter três valores Possíveis que são esses aqui beleza e eu vou ter o consumption method esse consumption difc falar isso consumption method ele vai ser outro en Tá então vamos lá en consumption method que vai ser o que galera ou take que vai ser por exemplo levar para viagem ou vai ser D in que é basicamente comer aqui em inglês então terá esses dois valores possíveis aqui beleza fechou turma então esse aqui basicamente é o nosso módel da Order tá agora vamos Fazer o Order products ele vai ter um ID que vai ser

um string ele vai ter também galera o product ID vai ser uma string ele vai ter o Order ID então a qual produto e Order pedido isso aqui pertence ele vai ter a quantidade que vai ser o inteiro e ele vai ter também ã aqui a gente vai colocar o price pra gente não ter aquele problema que a gente já mencionou do preço do produto mudar Tá certo e teremos também os Campos aqui de data tanto aqui no order products quanto no order aqui beleza fechou turma e dentro aqui do order products a gente vai

fazer as rel então products ID eu vou ter products ã Então vou referenciar né então esse products ID vai se referenciar o ID do produto e a mesma coisa aqui para Order Ok então esse Order ID faz referência ao ID da Order legal show agora aqui na Order galera eu vou falar que ela vai ter vários produtos Então como que eu Faço isso Order products vai ser um Array uma lista de Order products fechou legal vou fazer a mesma coisa aqui no produto né então um produto ele pode ter é vários Order products então aqui

no produto eu vou colocar o seguinte ó Order products Order product uma lista de Order product Ok fechou e eu vou fazer deixa eu ver o erro que tá dando aqui Order products ã Order ID é porque esse Order ID tem que ser o inteiro tem que ser do mesmo Tipo desse ID aqui da Order Fechou então basicamente Order product tem o produto e tem a Order ao qual ele pertence tá e aqui galera na Order faltou o Restaurant ID então uma Order um pedido ele pertence a um restaurante então aqui eu vou colocar restaurants

ID string e aqui eu vou colocar o Restaurant aqui que faz a relação e agora aqui no Restaurant eu vou subir eu vou colocar o seguinte ó um Restaurant pode ter vários pedidos Fechou turma basicamente isso aqui tá então nós temos o restaurante nós temos a categoria nós temos o produto nós temos o pedido e nós temos os produtos deste pedido e temos os enun aqui também Fechou então este aqui é o nosso banco que que eu vou fazer agora primeiro eu vou rodar um npx prisma formats Isso aqui vai fazer com que ele formate

esse arquivo deixa esse arquivo bonitinho aqui pra gente beleza agora galera eu preciso ter um post rodando para que eu Consiga criar essas tabelas em um banco efetivamente para isso galera eu vou usar uma plataforma chamada neon zbi eu vou deixar também aqui o link para você na nossa plataforma tá basicamente com essa plataforma você consegue rodar um postgis no Cloud online sem custo Beleza então se você não tem conta cria aqui é bem tranquilo você pode fazer login com seu github também e aqui turma assim que você fizer login Você vai clicar aqui em

new Project e Aqui eu vou colocar o nome do projeto vou colocar fsw Donalds post Quiz version 17 Vou colocar aqui Cloud provider vou colocar WS Ah você pode escolher a região aqui vou deixar aqui na North Virginia mesmo e aqui galera compute size coloque o mínimo possível para você não ter custo tá então vou criar o projeto e você pode usar também outras ferramentas tá você pode usar por exemplo supabase que também vai rodar um post para você você pode usar exemplo Também o versel post Quiz você pode usar o Planet scale então tem

vários serviços que possibilitam que você tenha um banco de dados relacionar poris rodando no Cloud pode usar o docker também se você quiser mas eu vou usar o new aqui achei ele bem fácil também olha que fácil aqui para usar OK agora ele já me deu uma url aqui ó essa URL a gente vai usar para se conectar com esse banco você vai copiar esses nipps aqui você vai voltar lá no seu projeto e você vai agora no seu Arquivo pon env aqui ó e percebe que o prisma ele já gerou pra gente essa variável

aqui de ambiente ó Database URL e dentro dela você vai colocar o que você acabou de copiar lá do neb Beleza então isso aqui vai fazer com que o prisma consiga se comunicar com esse banco e agora para aplicar isso aqui ao nosso banco porque a gente criou o código mas a gente não criou as tabelas a gente vai fazer uma migration O que que é uma migration em um banco de dados Relacional é um script que você roda que vai levar o seu banco de dados de estado a para estado B Então qual que

é o estado atual do nosso banco ele não tem nada a gente acabou de criar ele certo o estado B vai ser qual ele vai ter essa tabelas aqui Fechou então para fazer isso eu vou aqui no meu terminal rodar um npx prisma migrates Dev ele vai pedir o nome aqui da nossa migration antes ele vai se conectar com o banco tá então isso aqui pode levar um tempinho mas se Der erro aqui Preste Atenção se você não fez nada de errado se tá tudo certo aqui no seu ponto Envy se a senha aqui tá

certa se enfim se tá tudo certinho aqui tá se você continuar tendo erro manda na nossa comunidade que a gente tem uma equipe dedicada para te ajudar beleza aqui turma Vamos colocar o nome dessa migration é uma convenção que a gente use letras minúsculas e que a gente use underline ao invés de espaço tá então eu vou colocar que Essa migration ela vai ser ads initial data tables na verdade at initial tables Beleza então adicionamos as tabelas iniciais ele vai começar a aplicar essa migration no nosso banco de dados então ok fechou verdinho show Ele

criou aqui essa Essa passa migrations e aqui ele tem o script aqui que ele usou então percebe que ele escreve todo o código SQL pra gente e se a gente vi aqui no neon vier aqui em tables nós já temos as nossas tabelas Felipão deu erro verifica Se você não fez nada de errado e se você não continuar conseguir continuar se você travar manda na nossa comunidade ou deixa aqui nos comentários mas não desista tá vamos para cima que esse projeto vai ficar sensacional galera essa aula aqui talvez seja muito pesada porque é muito muita

configuração e tudo mas segue comigo não desiste seja parte de fato do 1% que vai ficar até o final beleza fechou turma então aplicamos aqui a migration agora galera eu vou fazer um Commit vou fazer um commit Tá certo então eu vou dar um Git status eu tenho todos esses arquivos aqui e por que que eu vou fazer um commit porque eu já fiz algo substancial Eu Já criei o nosso banco Já criei as tabelas iniciais então eu vou fazer um commit especificamente para isso tá então vou colocar Git ads Git para colocar tudo em

stage para commit e aqui galera é eu vou usar um padrão de commits chamado conventional commits que dá pra gente um Guideline um guia pra gente escrever commits mais semânticos ele se consiste em a gente colocar um prefixo antes de cada commit Então se o comit for algo novo que a gente tá colocando de funcionalidade a gente usar esse Fit se for uma correção de bug o Fix se for algo de setup usar um Core por exemplo isso aqui ajuda muito a gente ter uma visão dos tipos de commits dos tipos de código que a

gente tá introduzindo no nosso projeto então aqui eu vou colocar Que isso aqui foi uma feit a gente adicionou tabelas novas tá então Fits ads initial Deb tables fez o comit show de bola legal agora galera vamos fazer o seguinte eu preciso colocar dados nesse banco certo porque o banco tá vazio né se eu vier para cá o banco ele tá vazio não tem nada aqui e como que eu vou fazer isso eu vou rodar um script de Sid Ok um script de Cid é um script que a gente vai usar para colocar dados no

nosso banco eu já vou passar para você Dados para que a gente consiga trabalhar e para isso eu vou aqui na pasta Prisma eu vou criar um arquivo chamado Seeds PTS e eu vou copiar um código aqui que eu vou deixar no nosso repositório e o repositório está na nossa plataforma então esteja na nossa plataforma tá link tá na descrição primeiro link colei aqui o código basicamente galera eu vou adicionar vários dados aqui tá certo vários dados Ah aqui para vocês fechou então tem vários produtos várias Categorias Isso aqui vai ser fundamental para que a

gente consiga trabalhar começar a criar as interfaces aqui da nossa aplicação fechou e turma antes da gente rodar esse script aqui eu preciso fazer uma mudança no nosso arquivo de esquema do Prisma porque é o seguinte imagine a situação onde a gente queira deletar um restaurante Então esse script aqui por exemplo ele deleta os restaurantes antes de rodar para a gente basicamente ter um banco sempre Limpo Tá Mas vamos supor que você no futuro cria uma dashboard onde você possa deletar o restaurante aqui galera é a gente precisa deletar o resto também concorda então se

eu deletar um restaurante eu quero deletar também as suas categorias e os seus produtos concorda e os seus pedidos concorda Talvez os pedidos Não mas aí vai de você escolher Mas como que a gente faz isso basicamente aqui no menu category eu vou falar o seguinte ó Nessa relação de Restaurant aqui ó Depois de references eu vou colocar on delete cascades o que isso Vai resultar se eu deletar esse restaurante Eu deleto também esse registro aqui de menu category beleza vou fazer a mesma coisa aqui no products se eu deletar este restaurante aqui que está

vinculado com o meu product Eu deleto products também mesma coisa aqui com o menu category se eu deletar o menu category Eu deleto o meu products beleza fechou basicamente isso tá Ah e aqui Também no order na Order tá se eu deletar o restaurante Eu deleto também esse pedido então por exemplo restaurante McDonald's tem o pedido dois deletei o pedido dois deletei o restaurante McDonald's também na verdade inverso deletei o restaurante McDonald's deletei o pedido dois fazer a mesma coisa aqui no order products se eu deletar o products Eu deleto esse cara também e se

eu deletar aqui o Order Eu deleto também esse Order products beleza Fechou turma agora eu preciso fazer uma migration sempre que você modifica esse arquivo do Prisma você tem que fazer uma migration para você refletir isso no seu banco então vamos lá npx Prisma migrate Dev e o nome dessa migration vamos esperar ele se conectar com o banco também ah o nome vai ser basicamente adicionar on delete cascad por exemplo Então vamos esperar ele se conectar com o banco aqui e aqui eu vou colocar add cascad del Ou seja a gente adicionou Deleção em Cascata

Beleza então ele vai começar a rodar aqui beleza aplicou show e agora turma a gente pode rodar esse script aqui tá Ah e para rodar ele eu preciso instalar o TS nodes que é uma biblioteca que executa código JavaScript typescript na verdade executa arquivos typescript então primeiro eu vou aqui no meu terminal npm install ah TS nodes na versão 10.9.2 por favor estar a mesma versão que eu para você não ter problema de compatibilidade tá e eu coloquei esse Traço D para instalar isso aqui como dependência de desenvolvimento porque a gente só usa esse TS

node em desenvolvimento Beleza então vou dar um enter aqui ele vai instalar para mim e agora eu vou aqui no meu package P Jason e aqui abaixo de scripts eu vou colocar Prisma e eu vou colocar Seeds CS noodes Prisma bar Seeds TS Ou seja eu estou falando para o prisma Olha esse aqui é o script de seid quando eu rodar o seid você vai Executar esse arquivo aqui com test note Beleza então vamos lá rodar esse seed Como que eu faço isso aqui no terminal vou rodar npx Prisma DB Seeds ele vai começar a

rodar e agora vai acontecer uma mágica aqui no nosso banco espero eu tá ok verdinho show de bola Vamos aqui no nosso banco Vamos aqui na tabela de products e olha isso aqui já tenho vários produtos aqui olha que massa galera temos também aqui um restaurante eu queri um restaurante bacana temos Aqui as categorias massa demais e a gente tem os produtos como a gente já viu Então tá tudo pronto pra gente seguir Felipão deu erro Felipão aconteceu alguma coisa não deu certo cara como precaução vai no repositório do projeto copia esse meu arquivo do

Prisma inteiro copia tudo cont control a cont control c copia cola aqui e roda o seed novamente tá para você ter o mesmo arquivo que eu porque às vezes você colocou algum Campo errado aqui colocou Caracter errado e para ficar mais fácil só copia o meu e cola aí beleza fechou turma Olha como a gente tá avançando hein vamos para cima daqui a pouco a gente começa a criar a nossa primeira tela também tá então vou fazer outro comit tá galera porque o ideal quando você trabalha como deve e guarda isso pra sua carreira tá

sempre Faça comits Ah bem empacotados bem bem específicos então ao invés de fazer um commit com 10 arquivos com 20 Arquivos faça dois commits com 10 arquivos cada por exemplo ou três commits com três arquivos quatro arquivos cada tá Porque assim fica mais fácil da gente transitar entre as mudanças feitas no código então aqui eu vou dar um Git status eu basicamente vou adicionar tudo aqui ao commit então Git ads Git commit eu vou colocar fits at DB seed script a gente adicionou o scp scpt de Seeds ao nosso banco de dados legal fechou turma

então agora nós Estamos com o banco de dados pronto talvez tenha sido confuso para você se você nunca mexeu com Prisma mas no final a gente dá uma recapitulada nisso aqui se você não entendeu tudo não desiste segue comigo porque tudo vai se encaixando conforme as aulas passam tá É como se eu f quick turma fosse um quebra-cabeça e cada aula vai se encaixando para no final tudo fazer mais sentido belezinha então não desiste vamos comigo tá seguinte turma agora eu Preciso ah falar um pouco mais para vocês sobre o Next lembra que eu falei

no começo Pô depois a gente volta aqui para ver os pormenores do Next Então vamos fazer isso agora tá seguinte turma nós temos aqui dentro da pasta src essa pasta app essa pasta app ela é mágica ela usa aquele app router que a gente marcou lá no setup do Next O que que é ess app router toda a pasta que você colocar dentro dessa pasta app guarda isso aqui Em algum lugar grava isso em algum lugar tá toda a pasta que você colocar dentro dessa pasta app e dentro dessa pasta que você colocou dentro da

pasta app tiver esse arquivo page tsx essa pasta será tratada como uma rota vou mostrar você aqui dentro do app Eu tenho esse page tsx eu apagar tudo eitar sfc Felipão Como que você teve esse atalho aquela exão que eu falei Simple react snips beleza que eu falei vocês instalarem Tá ok eu chamar esse cara de homepage e Aqui eu vou renderizar um H1 isso aqui é um componente react convencional tá vou rodar aqui o Dev já tô rodando bacana e olha o que eu tenho aqui na minha página inicial hello world Então o que

eu coloquei aqui é a minha página inicial O que acontece se aqui em app eu criar por exemplo uma pasta chamada products e dentro dela um arquivo chamado page PSX Então você consegue criar um arquivo dentro de uma pasta no vs code assim você vem aqui no App New file se você colocar sei lá ah oi barfs bar page.six ele vai criar a pasta Oi fsc page.six um atalho Zinho bem legal para vocês tá E aqui dentro galera de products page eu vou colocar products page products page e agora eu vou acessar o qu galera

localhost 3000 bar products se eu escrever certo né barra products olha que massa product page então o we router dentro do Next tem esse comportamento tá galera tem esse Comportamento quando você cria uma pasta e dentro dessa pasta tem esse arquivo page ptsx o nome da pasta vai para o nome da Rota e ele usa esse Page ptsx para renderizar o conteúdo da página Beleza a gente vai ver isso mais paraa frente também tá com mais detalhes a gente vai criando o projeto como eu falei tudo se encaixa melhor no final tá show show galera

ã outra coisa que eu quero mostrar para vocês H essa aula é mais uma aula de introdução as Ferramentas e tudo então calma tá calma segura anciedade aí tá a gente vai usar o twind e tem esse arquivo de configuração aqui do Twi Felipão não tô entendendo nada disso aqui calma o que que é o Twi Vamos pesquisar é um Framework que estiliza os nossos elementos HTML por meio de classes eles até tem um exemplo aqui ó você coloca classe Flex você aplica tal estilo a esse elemento tá E você tem aqui uma documentação muito

bacana Também se você vir aqui ó Desc Desc Desc você tem por exemplo eu quero achar o pading aqui não tô achando pading Vou colocar qualquer um aqui vai esse aqui overflow então percebe que essa classe overflow alto ela corresponde a esse estilo e assim por diante e nós temos várias e várias classes Então você tem também Deixa eu procurar aqui pading ó PX tal você tem tal coisa PL tal você tem um pading left por exemplo PR pading PT na verdade pading Top e assim por diante tá E galera Deixa eu só ver a

versão do T que a gente tá usando eu acho que é a TR então aqui na documentação porque a qu acabou de sair tá então vamos A TR por enquanto beleza e A4 também teve não teve mudanças muito grandes na forma que a gente escreve o código o Core ali o principal do te então fica tranquilo Beleza então vamos usar o três aqui beleza então mudei aqui em cima tá galera aqui em cima Então galera o Next Ele já vem com tudo configurado pra gente e como que eu posso usar o t cara vem aqui

na product page e aqui no H1 eu vou colocar um Class name e aqui galera olha que interessante eu posso colocar exemplo uma classe do tewi text Red 500 e aqui galera como eu tenho a extensão do te já instalada Felipão não tá aparecendo esse autoc complete para mim cara vem aqui na extensão do T instala essa parada tá Deixa eu aproveitar e aumentar um pouquinho a fonte aqui para Vocês show então se você passar o mouse em cima você vê o estilo que ela aplica eu posso colocar também por exemplo uma div em volta

disso aqui aqui eu vou colocar um Class name Ah vou colocar H1 aqui e aqui eu posso colocar por exemplo P5 que é pading de 20 pixels e perceba que todos os valores já estão em Ram tornando a sua aplicação mais expansiva eu posso colocar também um border Border Red 500 rounded XL Felipão não tô entendendo nada Calma Olha só olha aqui e você vai pegando as classes com o tempo tá então por exemplo border ele coloca um border Rift um pixel border 500 ele coloca essa cor aqui na border color rounded XL ele coloca

um border radius então conforme a gente vai fazendo o projeto você vai entendendo essas classes tá e você pode também ver a documentação aqui mas eu recomendo que você não veja muito da documentação Ainda porque é muita propriedade e a gente vai usando com o tempo aqui tá então fica tranquilo então twind é essencialmente ã isso aqui beleza galera e agora eu preciso mostrar para vocês também outra ferramenta que a gente usa em conjunto com twind que a gente vai usar no projeto que é o shad CN o shad CN galera é uma ferramenta que

dá pra gente vários componentes já prontos então por exemplo dá esse Card dá esse chart né que são gráfico Dá um dialog também componentes muito bonitos e eles são muito compatíveis com o tailwind eles são feitos de uma forma excepcional vou mostrar para você daqui a pouco mas você tem vários componentes aqui você tem ah Card que eu já mostrei Você tem o buron também que a gente vai usar bastante você tem um input você tem Label você tem cara coisa para caramba isso aqui você pode fuçar à vontade tá esse componente aqui a gente

vai usar para fazer o carrinho Tá então vamos Instalar também o shad cen aqui beleza então vamos lá turma Primeiro vamos aqui em installation vamos aqui em next Yes e aqui eu vou rodar esse init aqui tá então vamos aqui no nosso vs code e aqui galera eu vou fazer o seguinte eu vou usar uma versão específica é do shad CN aqui tá então é muito importante que você use a mesma versão do shad CN que eu estou usando também então vamos lá galera vou abrir aqui o terminal eu vou digitar aqui ó npx shcn

na versão 2.3.0 Init ele vai instalar essa versão para mim Yes ele vai fazer algumas perguntas para mim tá então vamos esperar um pouquinho beleza primeira pergunta qual estilo você quer usar vou colocar default então mexo aqui com as setas do teclado seleciono com enter qual cor você quer usar isso aqui não vai fazer muita diferença mas eu vou marcar primeira enter você quer usar CSS verbals para o tema sim e aqui galera ele deu um anúncio importante ele falou Parece que você está usando react 19 algumas bibliotecas podem falhar para instalar porque elas não

estão adas ao react 19 mas galera grande parte aqui das bibliotecas já estão adaptadas tá se você vem aqui na documentação deles nexts 15+ R 19 você vê aqui ó várias ferramentas já estão Ok menos essa aqui ó Mas a gente não vai usar essa tá E na verdade essa aqui acho que já tá porque esse pro request já foi mergado ó tá Ah então a gente pode instalar tranquilo e Deu erro ao vivo aqui no Chad cen Olha isso aqui beleza então então aqui galera eu vou usar o Legacy Legacy per daps tá então

essa Flag vai permitir com que a gente instale uma versão do de uma biblioteca que não está compatível com outra biblioteca do nosso projeto mas como a gente viu isso não tem problema porque as bibliotecas já foram atualizadas para o react 19 tá então vou marcar isso aqui tá começando a instalar Fechou instalou agora turma percebam que ele criou dentro de src esse arquivo Lib dentro esse arquivo utils TS não precisa se preocupar com isso aqui tá certo ele criou também ah esse arquivo components P json que tem algumas informações a respeito do shad CN

também não precisa se preocupar muito com isso agora por enquanto eu quero usar um componente aqui deles pra gente ver funcionando então eu vou usar este buron e para você usar um componente deles você tem que Instalar esse componente esse é outro ponto muito interessante do shads também porque quando você usa outras bibliotecas de ã componentes como por exemplo ui eh sei lá se tem várias tem o an design também você instala biblioteca com todos os componentes e nem sempre você vai usar todos o sheren não você instala apenas os que você quer usar então

para você instalar o bon você roda Esse comando aqui então vamos lá npx shaden @ 2.3.0 Sempre use as mesmas versões que eu tô sendo repetivel porque galera eem muitas fch quicks a turma teve problema com isso então use sempre as mesmas que eu tá e aqui eu vou colocar show vou marcar o leg perps Ok show Ele criou galera dentro do src aa components e o bon Olha o componente Bon aqui e perceba perceba que ele usa as classes do Twi Olha aqui que massa olha que massa ou seja se eu quiser customizar esse

componente eu posso vir aqui Customizar ISO aqui é sensacional porque se você já Us ou outra biblioteca como a y enfim você sabe que para customizar um componente muitas vezes é muito difícil é muito ruim muito chato aqui no shad cen Não beleza Felipão Mas como que eu uso esse componente cara vem aqui ó no seu na sua página por exemplo na minha product page e aqui eu vou importar buton da pasta components ui bar Button eu vou colocar aqui sei lá fsw 7.0 olha Aqui olha que coisa linda beleza eu posso também adicionar outros

componentes por exemplo ads inputs beleza coloco input aqui ó importo sempre da pasta de componentes tá galera sempre dessa pasta aqui tá tá aqui o input ó estilos tudo certinho eu posso usar input aqui colocar um placeholder de Bora fechar esse projeto tô escrevendo tudo errado hein galera olha esse projeto bora olha aqui ó tudo Estilizar instalado bora fazer um cominho galera vamos fazer um comit bora então vamos lá Git que a gente configurou o SH tá Git commit e isso aqui cara eu vejo que foi mais uma questão de setup na verdade a gente

adicionou alguns componentes novos né do shn e eles sempre ficarão galera nessa pasta components y e aqui ficar os componentes do shad CN Então vou colocar um feits add shad CN initial setup and components Ou seja eu adicionei o setup Inicial do shad CN e os componentes iniciais também dei enter show coisa linda beleza turma agora eu preciso fazer uma última mudança no shcn com vocês e a gente daqui a pouco fecha a nossa aula tá Qual que é a primeira mudança lembra que ele perguntou se a gente queria usar variáveis do CSS para o

nosso tema a gente marcou que sim se a gente V aqui em src App globals.css a gente tem várias variáveis que eles criaram pra gente e essas variáveis Serão as cores usadas pelos componentes deles então por exemplo esse Card é a cor usada no card no no fundo do cards Esse foreground é a cor usada no texto Então eles têm esse padrão por exemplo background é a cor do fundo e o foreground é a cor do texto cards é a cor do fundo do cards e o Card foreground é a cor do texto que vai

no card e assim por diante você pode dar uma olhada na documentação deles também eles têm essa sessão aqui de fing que Eles explicam tudo também sobre essas variáveis Tá mas galera eu vou disponibilizar para vocês um tema já certo aqui tá então você vem aqui no seu global.css e você basicamente cola o que você vai copiar do meu projeto que está no nosso repositório que está na nossa plataforma da F quick Beleza então cola tudo isso aqui e bora Fechou então basicamente eu alterei aqui as cores aqui as variáveis tá então se eu voltar

aqui na minha aplicação percebe que o Meu botão já tá amarelo e tudo mais que são as cores que a gente vai usar no nosso projeto Fechou então vou fazer outro comit aqui disso então Git Git commit feits isso aqui não foi uma feature né Foi mais uma questão de setup mesmo não adicionei nada de novo nenhum comportamento novo então Core updates Então esse Core é mais para essas questões de setup enfim de configuração tá esse prefixo Core updates CSS Variables fechou coisa linda ok agora turma a gente fechou banco de dados a gente fechou

tnd a gente viu um pouquinho do Next vamos ver mais também tá e a gente ã agora vai dar uma olhada nesse arquivo layout esse arquivo layout galera é bem tranquilo também de você entender é o seguinte eh dentro aqui do app Eu tenho esse layout esse layout vai ser aplicado em todas as minhas páginas Tá acabei esquecendo de falar sobre ele mas esse cara vai ser aplicado a todas As minhas páginas belezinha então esse Children é basicamente a minha página inicial e a minha página de produtos por exemplo se eu vier aqui no layout

e aqui ó no Body colocar H1 layout vi aqui ó na minha página inicial Eu tenho um layout aqui tanto na minha página de products quanto na página inicial Beleza então todo código que você quer que seja Global entre as páginas você coloca nesse layout beleza E aqui galera nós temos a fonte né percebe que nós temos essa fonte aqui e nós vamos usar a fonte ah Poppins no nosso projeto então eu vou fazer o seguinte eu vou apagar esses caras aqui eu vou criar uma constante vou chamar de Poppins que vai ser um Poppins

e esse popins eu vou importar do Next barf bar Gooogle porque o nextjs ele tem uma integração com o Google Fontes que a gente consegue usar fontes do Google Ó beleza e aqui galera eu vou fazer o seguinte aqui no Poppins eu vou vou especificar aqui ó vou passar um objeto weights eu vou colocar todas as weights que eu quero né então por exemplo 100 eu vou colocar todas aqui tá deixa eu copiar colar aqui para ser mais rápido então isso aqui é extra Lights isso aqui é Enfim nem sei o nome disso aqui mas

por exemplo a weights 400 é regular a 600 eu acho a semi bolds a 800 é a bolds e assim por diante subsets Latim fechou agora galera aqui no Body no Class name ó eu vou passar Poppins P classname basicamente ISS e agora as nossas Fontes já as nossas tipografias já usam a fonte popins Ok então vamos lá fazer mais um commit Git Git comit isso aqui foi mais uma questão de core também não foi uma feature nova uma funcionalidade nova um comportamento novo então Core updates app Font legal e aqui galera você pode alterar

o título também e a descrição Então posso colocar fsw Donalds e aqui eu vou colocar Bora finalizar esse projeto lindo então agora o título aqui da minha aplicação mudou olha que massa tá show a gente vai vendo mais detalhes do Next também conforme a gente vai avançando aqui no nosso projeto Fica tranquilo Ok coisa linda galera e agora turma ã Vamos fazer uma última modificação aqui que é o seguinte nós temos aqui o is lint e nós temos o preder também né que a gente Já configurou o is lint galera ele basicamente garante um conjunto

de regras dentro do nosso código tá então você consegue por exemplo criar uma regra que você não pode declarar uma variável e não utilizá-la de fato essa regra já tá aplicada aqui porque o Next já aplica algumas regras pra gente então se eu vier aqui na minha página criar uma variável aqui e não usá-la percebe que ela fica com esse errinho vermelho aqui se não tá aparecendo para você Instale a extensão do es link fechou beleza nós temos algumas regras que ajudam bastante a gente tá aqui no s lint a primeira que eu quero passar

para vocês é uma regra de importação porque é muito comum você ter vários importes aqui no seu arquivo tipo vários mesmo tá E é legal que a gente tenha uma padronização desses imports então que a gente ordena esses imports então por exemplo criar uma regra que os importes de biblioteca sempre viram primeiro e os De arquivos vir viram depois então se eu colocar o arquivo aqui em cima ele vai dar erro por exemplo para eu colocar ele aqui embaixo Como que eu faço isso dentro aqui do es link seguinte eu vou instalar um plugin chamado

npm install traço d e ex lent plugin Simple Import sorts na versão 12.1.1 vou instalar como dependência de desenvolvimento porque a gente só vai usar ele em desenvolvimento ess link é Só para desenvolvimento instalei Beleza agora vou vir aqui no arquivo de configuração do eslint e para abrir esse menuzinho aqui galera com os arquivos eu apertei cont control P tá eu consigo navegar Assim entre os arquivos e aqui turma eu vou colocar o seguinte Ah eu vou importar esse plugin aqui em cima dessa forma e eu vou colar aqui dentro desse S lent config esse

objeto plugins eu vou colocar esse cara e rules eu vou colocar essas regras aqui Tá E agora olha que interessante ó se eu colocar isso aqui para cima percebe que eu já tenho erro ó e apareceu Run autofix to sort this imports ou seja se eu apertar control ponto eu tenho aqui as opções e uma das opções é corrigir esse problema se eu apertar ele ordena para mim olha que massa olha que massa se eu vi aqui no layout a mesma coisa ó salvei na verdade control ponto apertei aqui ele corrigiu para mim isso aqui

ajudar muito galera e a gente Também pode fazer com que sempre que eu salvar o meu arquivo ele já corrigir esses erros para mim automaticamente para não ser necessário toda hora eu vir aqui apertar control ponto e corrigir para isso eu vou fazer o seguinte eu vou criar uma pasta vest code pon vest code e dentro dela um arquivo settings.js e aqui dentro eu vou colocar esse código aqui tá você pode também pegar aí do repositório então basicamente eu vou validar estes Arquivos com es lint e quando eu salvá-los eu vou corrigi-los com o es

lint também então agora se eu vi para cá ó salvei corrigiu coisa linda esse aqui é lindo demais tá fechou e agora turma outra coisa também pra gente fechar também essa parte de S link prer setup é o seguinte no twind é muito comum a gente ter várias classes tá várias classes aqui e a gente também não consegue ter um padrão de ordem das classes por exemplo aqui nessa div a Classe que aplica pading tá em primeiro e aqui no H1 ela tá em último isso aqui não é muito legal é legal a gente ter

uma padronização aqui e a gente também consegue fazer isso tá como que a gente faz isso galera tem um plugin chamado deixa eu ver aqui na verdade o nome direitinho esse aqui ó plugin plug enf tem ISS tá então para eu usar esse cara eu vou primeiro instal então npm install traço deer plugin CSS eu vou instalar na Versão 0.6.5 então inst essa versão aqui tá beleza e agora eu vou criar um arquivo aqui na ra do rcj fechou e galera essa pasta vs code também é na raiz do projeto tá então PPR rcj e

aqui galera eu vou basicamente colocar isso aqui ó isso aqui deixa eu ver aqui ele colocou só a versão JavaScript do arquivo vou colocar isso aqui Ó um objeto fechou e aqui esses plugins aqui então basicamente isso aqui tá usando esse plugin aqui e agora se eu salvar percebe que ele já ordenou para mim ó tá vendo olha que massa isso aqui é bem bacana também então vamos lá fazer o commit Git AD Git commit Core que foi mais uma mudança de setup ads e excelente sorts plugin and prer T plug então a gente adicionou

tanto O plugin de ordenar com is lent quanto O plugin do prer do twind Fechou coisa linda galera e turma para finalizar aqui a nossa aula eu quero dar uma rápida passada em tudo que a gente fez Especialmente na questão do banco de D porque eu sei que talvez esse aqui tenha sido o ponto que você tenha ficado com um pouco de dúvida Tá certo então galera como a gente já discutiu anteriormente vou dar uma rápida recapitulada aqui tá a gente criou aqui a nossa tabela de restaurante Beleza então ok tem o restaurante ele tem

os Campos dele beleza e a gente começou a criar as relações então nós vimos que um restaurante vai ter várias categorias então a gente criou a tabela menu category ela vai ter o nome dela e ela vai pertencer a um restaurante então a gente colocou Restaurant ID Felipão Por que que você tá repetindo isso porque muitos alunos TM dificuldade com isso aqui então estou sendo repetitivo para que você entenda tá Depois a gente criou o produto mesma coisa um produto ele Pertence a um restaurante então ele tem esse Restaurant id e ele também pertence a

uma categoria ok tá então restaurante categoria produto eles estão ligados fechou que mais galera a gente também colocou aqui no menu category que ele vai ter vários produtos Então como a gente viu uma relação de one to M então uma categoria é pode ter vários produtos e um produto pode ter apenas é uma categoria Na verdade uma relação de Man one né então uma categoria tem vários Produtos e um produto tem uma categoria é isso que a gente tá transcrevendo aqui tá certo certo depois tivemos o pedido que basicamente ele vai ter um restaurante também

né então o pedido Ele sempre vai ter sempre vai pertencer a um restaurante ele tem também os seus produtos né então o pedido tem vários produtos dentro dele e a gente criou uma tabela separada para esses produtos porque a gente tem que salvar tanto o preço é que o produto tinha quando o Pedido foi criado quanto a quantidade desse produto então um produto pode ter por exemplo dois três produtos e um pedido só tá e um Order products ele tem aqui uma relação com o produto né com o produto original e com o pedido também

porque ele pertence a um pedido Fechou então turma essencialmente é isso que fizemos aqui a gente fez também a configuração Aqui é do Sher cen do tnd a gente vai ver também nas próximas aulas Isso mais em prática para ficar mais fácil para você entender fizemos também a configuração do is link que a gente acabou de fazer então a gente adicionou esse plugin aqui que é bem bacana que ordena os imports e a gente também é fez aqui a configuração do Plugin do tnd n né ah no prer tá Então cadê o arquivo que eu

tô cego aqui não tô enxergando aqui então nós também adicionamos esse Plugin do twind que ordena as classes automaticamente e para fechar com chave De ouro galera vamos subir isso aqui para um repositório no github tá então abri aqui o meu github vim aqui para criar um novo repositório Eu Vou Chamar esse cara de full stack wake donals tá e a descrição vou colocar projeto realizado durante a sétima e melhor edição da full stack wake show eu vou deixar como privado ainda porque eu tô gravando essa aula Antes do evento começar então não quero que

a galera veja o código ainda tá mas o seu você pode deixar como público vou criar aqui o repositório e agora eu vou executar esses comandos aqui então vou pegar esse Git remote add Origin e aqui no meu repositório local eu vou adicionar esse Origin aqui como repositório remoto para que eu consiga fazer um push aqui então primeiro eu vou renomear o brin aqui para Amém e agora eu vou fazer um push Para cá show galera então o código já está aqui se você tá com algum problema dúvida quer ajuda no seu código vá lá

na comunidade Manda lá sua dúvida para que a gente consiga te ajudar e sempre mande o repositório também no seu projeto para que a nossa equipe e Outros alunos também consigam te ajudar vendo o seu código e turma Chegamos aqui ao final da aula de hoje eu quero te parabenizar porque eu sei que pode ter sido muito Conteúdo Mas você ficou até o final eu quero que agora você comente aqui embaixo #sp para eu saber que você faz parte dessa pequena parcela que ficou até o final e que eu tenho certeza eu confio em você

cara que você vai ficar até a última aula da fcia Quick porque eu sei o quão esse projeto aqui pode agregar valor pro seu portfólio fazer você crescer como deve o tanto de coisa que você vai aprender junto comigo aqui é algo excepcional Então vamos comigo Segue comigo e eu vi ontem turma já na Live de ontem que muitas pessoas já estão perguntando a respeito do fu Club se você não sabe o fu Club é a nossa escola de programação o nosso ecossistema completo de programação que hoje já conta com mais de 800 aulas mais

de 1000 alunos mais de 75 módulos cara coisa para caramba tem muita coisa legal que eu quero falar com você a respeito do fus Club Então esteja na aula de amanhã porque na aula de amanhã eu vou Revelar todos os detalhes a respeito deste nosso ecossistema e Como que você pode fazer de 2025 melhor ano da sua carreira como deve beleza e se você tá curtindo também a f quick se você gostou gostou dessa aula deixe seu joinha aqui embaixo também para que esse evento chegue a mais pessoas para que esse conteúdo chegue a mais

deves e ajude mais deves também e não esquece de entrar na nossa plataforma oficial do evento e começar a indicar F quick pros Seus amigos fechou se você curtiu esse conteúdo vamos vamos começar a indicar porque além de você ajudar outros deves né aos seus amigos amigas que querem aprender querem crescer também como Dev né você se você for um dos cinco que mais indicarem você vai ganhar prêmios especiais também Fechou então turma Bora para cima veja você amanhã na aula de 9 horas da manhã que a gente vai liberar aqui e se você ainda

não deixou aí embaixo deixa aqui agora #sp e bora para Cima Te vejo amanhã pra nossa terceira aula