Evolução do framework: clone do Twitter | guia prático
Após meses sem vídeo: avanços do framework próprio e por que clonar o Twitter é o exercício escolhido para mostrar o que mudou na DX e na arquitetura
Resposta direta
Clone famoso não é vaidade: é banco de provas com features conhecidas para medir evolução do framework. Você vai ter uma documentação para sua API com um playground em real time para que você possa testar toda a sua API antes mesmo de construir o front, tá? E não deixa entrar aqui na pasta certo entra aqui vamos lá então vou criar aqui passar o comando não precisa nem me preocupar com.
Por que sumir quatro meses e voltar assim
Basicamente, o que a gente vai fazer nesse vídeo é criar um clone do Twitter, tá? Mas a grande sacada é, eu vou te mostrar como que você vai fazer o front e o back, como eles vão se conectar. Você vai ter uma documentação para sua API com um playground em real time para que você possa testar toda a sua API antes mesmo de construir o front, tá? A gente vai criar todo esse projeto aqui na prática e talvez, se der tempo, eu te mostro até como que você vai fazer deploy lá na Verso, tá?
Eu não sei se você me segue lá no Instagram, mas se você ainda não segue, eu vou deixar o link aqui no card, porque é no Instagram onde eu tô compartilhando toda a minha jornada. Todo dia eu posto stories, praticamente toda hora, compartilhando tudo que eu tô fazendo, dos meus produtos, do Igniter, tudo do meu dia a dia e sempre trazendo muito insight. Sem precisar fazer tudo do zero, sem precisar fazer autenticação, sem ter toda aquela dor de cabeça de criar landing page. Cara, eu tenho aqui o meu boilerplate de SaaS, que eu estou disponibilizando um desconto maior durante esta semana, exatamente porque está no meio do lançamento do Igniter.
Você roda-se a live e você já tem tudo isso daqui pronto pra você só vir colocando as telas que você precisa pro seu SaaS. Já tem o treinamento pra IA, se você quiser usar no cursor, no lovable, ele já conhece todo o SaaS pra poder gerenciar pra você. Então, olha só, aqui tem a documentação ensinando como que a gente inicia um projeto em Ignite, qual o comando que a gente roda no terminal, tudo certinho, passo a passo, para que vocês possam aprender como fazer, tá? Sobre o conteúdo desse vídeo, onde você pode aprender também como criar um chat em tempo real, que você pode aqui tirar de referência, tá bom?
O que mudou no framework
Então assim, está bem completo, naveguem, testem, que eu tenho certeza que vocês vão gostar. Então você põe aqui qual que é o nome do seu projeto, Aqui a gente quer trabalhar, sim, com o history, que a gente vai usar o real time. Então, eu tenho esse builder aqui de aplicação, que no final, ele já me entrega aqui, tá? Inclusive, se vocês puderem, pra colaborar na divulgação do Igniter, depois que vocês testarem, ou antes mesmo, cara, pode vir aqui, ó, já deixo uma base aqui de um tweet que você pode fazer, como que você pode, com todas as redes sociais aqui, pra que você possa compartilhar, que ajuda demais a divulgar tudo que eu tô construindo ao longo desses meses, pra gente crescer a nossa comunidade.
E não deixa entrar aqui na pasta certo entra aqui vamos lá então vou criar aqui passar o comando não precisa nem me preocupar com o nome do projeto ou coisa do tipo que ele já se vira tá vamos ver aqui ele já me perguntou se eu quero criar um clone Twitter sim tô passando aqui eu quero que tem o docker ele já configura o docker para gente ele já inicializa o repositório ele também já instalar dependências então ele tá fazendo aqui todo o processo de instalação vamos aguardar um pouquinho tá para vocês saberem também a gente tem uma parte de template está que eu tô trazendo novos projetos constantemente o projeto do vídeo de hoje inclusive vai estar aqui também para quem quiser clonar e testar ele tá então todos os projetos que a gente fizer no canal Eu vou estar disponibilizando aqui de graça como um template para vocês, tá? E aqui também, se vocês quiserem ver, também tem o boilerplate que eu falei para vocês, tá bom? E pronto tá já estamos aqui com nosso projeto inicializado inclusive se eu rodar ele aqui deixou para um outra aplicação que eu devo tá com ela rodando não acho que não vamos lá deixa eu ver se tá tudo bem já pode executar antes de mais nada que que a gente faz deixa eu aproveito aqui corrigir a renomear né para gente ter a nossa variável ambiente Você pode ver que ele já traz aqui todas as variáveis que a aplicação precisa para funcionar. Porque como eu disse, ele já cria um Docker Composer aqui com o Redis e o Postgres que a gente utiliza pro Igniter.
Configurar o nosso banco de dados tá no caso aqui não tem nada ainda mas é só para a gente gerar o o client do prisma para não dar nenhum problema e agora eu vou executar o projeto vamos lá executou deixou abrir no navegador e pronto aqui a gente já tem a tela de inicialização do igniter dgs a nova tela de inicialização Só que aqui a gente tem uma coisa a mais, a gente tem um atalho que nos permite abrir o Igniter Studio. Esse é o Playground onde você pode testar toda a sua API antes mesmo de você já conectar no seu front. Então, em vez de você ter que criar lá, usar o Postman ou o Insomnia, você pode utilizar o Igniter Studio para fazer esses testes. Então você consegue vir aqui e testar toda a sua API, definir cookies, header, carry parents, tudo isso daqui você consegue fazer sem nenhum problema, tudo bem?
Leitura útil
Clone famoso não é vaidade: é banco de provas com features conhecidas para medir evolução do framework. Use o trecho acima como restrição, não como citação ornamental.
Por que o clone do Twitter como demo
Então basicamente o que a gente vai ter na nossa aplicação é um pequeno sistema, um feed, né? Eu vou colocar aqui a modelagem inicial certo deixa eu colocar aqui string quero que seja o id um o a ed não precisa de um título preciso do conteúdo não precisa do public chad e é isso tá nossa modelagem é bem simples por enquanto bom que que eu vou fazer agora vamos configurar a nossa nosso banco de dados né então vem aqui ó ele não me great Vou rodar o comando de inicialização e pronto. Posts e vamos ver quanto tempo a gente gasta pra criar isso com o igniter.js, tá bom? E se eu não me engano tá aqui Docs o generate provider dois pontos e o modo e aí eu vou por exatamente o mesmo nome do meu modo tá vou rodar o comando partir do momento que eu fiz isso olha o que vai acontecer vamos aguardar um pouquinho olha só quem já viu os últimos vídeos já conhece isso né mas basicamente a se a live o J.S.
Então a gente tem a rota de listar posts, pegar um post por ID, criar um post, atualizar e deletar. Inclusive, a gente já tem aqui os esquemas, os ODs, a gente já tem todas as interfaces para usar na nossa aplicação. Pode ver que a gente está usando o repositório aqui para ter uma abstração de código, para que a gente possa reaproveitar em outros endpoints. Rodando o npm run dev, eu vou fazer o seguinte, eu vou rodar a CLI e vou passar um dev-docs.
Quando eu faço isso, ele vai inicializar o Next.js, mas junto com o servidor do Igniter. A partir desse momento, qualquer alteração que eu faço nos meus controllers, ele já vai atualizar o quê? Tanto é que se eu vim aqui, ó Olha só, ele já apareceu aqui todas as rotas lá do meu controller do Posh, tá bom? Se eu abrir agora o meu navegador e voltar lá para o Igniter Studio, olha só, todas as nossas rotas aqui, tudo bem documentado e olha que legal.
O que observar além do feed bonito
Ele não precisa ser passado na criação do post que eu já vi ali, então vamos esperar um pouquinho daqui a pouco ele já vai atualizar vamos esperar só um tempinho, e vamos por enquanto vamos testando as rotas, se eu listar post já está listando post, está vendo um array vazio porque a gente não criou nada por enquanto deixa eu ver aqui se ele já atualizou se não, se você ver que não atualizou Pode rodar de novo a CLI com aquele mesmo comando do devdocs, tá? Criar a não que eu tô no atualizar tem que ser no criar create new post mesmo esquema vamos colocar aqui o nome prontinho post criado criado tá vamos vir aqui pegar por um ID deixa eu pegar esse mesmo ideia aqui que a gente já criou deixa eu ver Você pode ver que ele já identifica, né? É só para gente testar vou pegar esse post-feeds agora e eu vou entornar importar lá dentro do meu peixe tá deixa eu tirar só essa dívida toda post-feeds vamos voltar atualizar a página e agora a gente já vai ver que a gente já tem aqui ó o feed funcionando tá deixou eu pedi aqui uma coisa que eu parar isso aqui e aí só vamos aproveitar a gente já tirar que o use cliente na que a gente tem um só pônei um deixar assim por enquanto vamos dar um bom andava está tudo certo Beleza? Feito isso, vamos vir aqui, deixa eu só colocar uma interrogação, porque isso aqui começa como nulo.
Vou dar um teste 1, já criou o teste 1 ali embaixo, como vocês podem ver. Teste 2, deixa eu aproveitar, dar uma arrumadinha aqui na fonte, só para a gente ver melhor. Mas vocês podem ver que o nosso real time já está funcionando, a gente não precisou fazer nenhuma configuração adicional. Aí só para a gente ter uma visibilidade, deixa eu tirar aqui que ele pôs uma cor e eu nem cheguei a ver.
A capacidade 160 vão voltar aqui ó Prontinho E aí como você pode ver a aplicação já tá funcionando com real-time aqui eu tô mostrando uma listagem tá pessoal mas você podia colocar esse daqui em qualquer rota de carry tá então se você quer fazer uma dashboard em tempo real que atualiza os dados em tempo real o seu trabalho é basicamente mudar aqui para stream E depois fazer o revalidate. Em pouquíssimo tempo, acho que uns 15, 20 minutos, a gente criou aqui uma aplicação com vários endpoints, com uma documentação real, que inclusive você pode pegar esse OpenAPI e usar em qualquer outro lugar que vai funcionar. A gente tem aqui a parte do real time, que explica como funciona o stream, como funciona o Revalidate, como você pode mandar eventos personalizados, porque a gente também tem essa opção. E, se quem tiver dúvida, pode me chamar também lá no Telegram, que eu tiro a dúvida do pessoal, tá?
Lições para quem mantém lib própria
Nesse vídeo, eu vou mostrar todos os avanços que o meu framework teve nos últimos meses. Vou explicar o motivo de eu ter ficado ausente todos esses tempos, né? Desde que já são quatro meses sem vídeo no canal. E toda a evolução que a gente teve até aqui, tá?
Basicamente, o que a gente vai fazer nesse vídeo é criar um clone do Twitter, tá? Mas a grande sacada é, eu vou te mostrar como que você vai fazer o front e o back, como eles vão se conectar. Você vai ter uma documentação para sua API com um playground em real time para que você possa testar toda a sua API antes mesmo de construir o front, tá? E como que você vai fazer isso em pouquíssimo tempo sem depender de inteligência artificial, tá?
A gente vai criar todo esse projeto aqui na prática e talvez, se der tempo, eu te mostro até como que você vai fazer deploy lá na Verso, tá? Então vamos lá, vamos começar o vídeo, mas antes de mais nada, eu quero passar alguns recados. Eu não sei se você me segue lá no Instagram, mas se você ainda não segue, eu vou deixar o link aqui no card, porque é no Instagram onde eu tô compartilhando toda a minha jornada. Todo dia eu posto stories, praticamente toda hora, compartilhando tudo que eu tô fazendo, dos meus produtos, do Igniter, tudo do meu dia a dia e sempre trazendo muito insight.
Próximo passo
Escolha uma métrica (tempo, retries, conversão ou qualidade aceita) e rode 7 dias antes de escalar o padrão.