Coloquei minha esposa para criar um SaaS só usando o ChatGPT

Olá aí pessoal tudo certo então trazendo um vídeo um pouquinho diferente aqui hoje eu tô aqui com a minha esposa Carol Oi galera tudo bem então a gente viu nas redes sociais aí que um cara falou que em duas horas com chat ept a pessoa consegue criar um Sao ou micrar sozinho então a gente decidiu trazer aqui a prova eu trouxe aqui minha esposa quanto você sabe de programação zero zero zero o André me ensinou poucas coisas mas já tem bastante tempo que você aprendeu qu ensinei era sobre uma soma automática tipo X com X

dá y era só isso mas tem M tempo eu não lembro de nada seo ai deu para entender o quanto que ela sabe então as regras você pode usar o chat PT aqui à vontade OK Tá você também pode usar o Google Se você quiser e o objetivo é você construir um tju list bem simples e o mais longe que você puder tá você vai criar um tju list se der tempo que eu acho pouco provável colocar meio de pagamento login de usuário e tudo mais mas a gente vai colocar o limite aqui de tempo

e uma ou duas horas e a gente vai ver conforme for andando Eh vamos sentindo aí como tá sendo tá e se caso você ficar muito muito muito travada eu posso te ajudar para te destravar Ok ok Você vai usar o nextjs tá para construir o produto que é o Framework que eu uso então quando você for usar o chat PT especifica que é no nextjs OK OK agora é contigo eu vou est aqui só observando Tá bom boa sorte e vai lá com a dar Ok vamos lá então vou começar aqui com o chat

PT vou explicar a minha situação e vamos ver Olá quero criar um micras um t list porém não tenho nenhuma familiaridade com programação preciso que você me auxilie no processo de criação do mesmo passo a passo com nextjs criar o micras como uma T list é um ótimo projeto e eu Ficarei feliz em guiá-lo passo a passo Vou Assumir que você está começando do zero então começaremos pela configuração do ambiente até o desenvolvimento da aplicação vamos lá configurando o ambiente antes de começar a programar Precisamos configurar algumas ferramentas no seu computador instale o nodejs é

isso nodejs ã o nodejs é necessário para executar o nextjs baixe e instale o node S aqui escolha a versão LTS mais estável instale um editor de código o mais usado é o visual Studio code eu sei que esse aqui tem aqui do seu computador tem mas você vai usar outro eu tenho que baixar esse né Essa parte aí você pode pular aí já tem instalado Eu sou programador eu tenho tudo isso aí po instale o Git Você precisará do Git Mas é porque quem tá começando tipo conseguiria construir do zero ninguém tem isso né

então a pessoa teria que ir baixando tudo certo tá mas você já então precisar tá passo dois criando o projeto com nextjs agora vamos criar o projeto Abra o terminal promp de comando Power Shell ou terminal no Mac e Execute Ok onde eu abro o terminal Deixa eu só ver OK obrigada no passo um você tá rindo de mim por velho travou no passo um eu não sei onde no Passo dois onde eu abro o terminal no Windows promp de comando pressione é macos OK Command Space terminal Ok Navegue até a pasta onde deseja criar

o projeto usando o comando CD Ah é mais fácil isso aqui né terminar integrado no vs code porque você já tem então deixa eu tirar isso usar o pulso aqui é o code é isso um programinha diferente não é aqui você tá mostrando todos os meus projetos a para todo mundo ah tá achei Ok vou botar aqui Carol não ti de lix aí ao terminal Não sei então não não é aqui você tá vendo bem Vai abre o terminal lá ess daí não é o terminal tá eu não posso fazer do jeito que tá falando

aqui por esse primeiro jeito é mais fácil mas é porque não sei porque eu não sei o passo a passo aqui tá o passo a passo precis Abrir do jeito preferir tá Por que que você fechou aqui porque eu achei que não era isso que era para fazer el falava vs code é esse cursor aí a mesma coisa Ah tá eu posso perguntar né E se for e se for no curso Ah tá Então pronto acho que agora tá certo né vou guardar no H documentos pode ser documentos tem o terminal aí não sei o

que é terminal você já sabe você já abriu o terminal terminal é esse Uhum mas não dá para criar nenhum novo quando eu clico aqui aqui não dá para criar nenhum novo u é tudo pelo terminal volta no início vai lá no início do chat GPT e começa tudo zero instale o no JS instale um editor de código instale o Git Abra o terminal e Execute abre o terminal e Execute nada aconteceu e agora ah foi pra segunda pergunta você vai usar o ty script no projeto como é que eu digito no tenta usar a

set Esso aqui não tá escrito aqui terminal me fez essa pergunta por último passo doisa pergunta sobre usar o router router router router uma nova funcionalidade recomendada pois simplifica a estrutura de rotas e oferece mais flexibilidade se você é iniciante Eu recomendo responder Yes que o app router é a forma moderna de trabalhar e será o padrão no futuro Ok então vou Yes né Recebi uma nova pergunta essa pergunta é sobre usar o turbo PC uma ferramenta experimental de compilação mais rápida para projetos nextjs minha recomendação para iniciantes escolha no vou escolher no já porque

ele falou que é a recomendação dele mais uma pergunta não foi concluído ainda porque eu acabei de receber mais uma pergunta fiz a pergunta aqui e recebi Ah o chpt falar que a recomendação É Não então não dois ok aqui já tá esse aqui já foi entre na pasta do projeto não sei se eu copio isso aqui para ele eu acho que eu vou colar o que ele pediu para colar aqui passou 20 minutos hein Ok ã entre na pasta do projeto recebi Esse comando perfeito né TS configurou o projeto com sucesso ok ok ok

navegar até a pasta do projeto caso ainda não tenha feito isso entre na pasta do seu projeto Ok como eu entro na pasta do meu projeto Abra o terminal use o comando CD para navegar até a pasta do seu projeto mas fiz isso já essa já é a minha pasta responde verifique se está dentro da pasta correta para listar os arquivos e pastas dentro da pasta seu projeto você virá os arquivos do seu projeto Não eu ainda não tô não né você quer que responde sim qu você tá ali ó T list eu tô dentro

da minha pasta então uhum a chama terminal de comando você dá comandos para ele você deu o comando e e não fez nada depois ficou repetindo o mesmo comando várias vezes certo então aqui então já tá já tá certo mas aqui tá falando que aparece isso que não apareceu PR mim ol direitinho o chat GPT não vai servir muito se você não não lei que tá falando não passo três ali ó não leu Então isso que eu tô lendo você pode usar o comando ali para listar os arquivos e passas dentro da pasta do seu

projet já comando LS não então comando LS Não é isso não né é isso não ah eu acho que foi foi digitei LS apareceu tudo isso aqui depois disso você estará pronto para rodar o servidor de desenvolvimento com o comando npm Run Dev eu di tudo isso npm Run Dev passo três estrutura básica da tulice vamos criar uma lista simples onde você pode repetindo aqui ó no som vamos criar uma lista simples onde Você pode adicionar e remover tarefas abra o arquivo index JS no editor de código Ok vou mandar isso aqui porque eu não

sei onde eu clico mais meia hora ou 1 hora me dependendo aí de como camin lançar o seuu lixo tem que lançar rápido lançar rápido Isso significa que NS criou o seu projeto com est Inicial Ele está te orientando a começar a edição no arquivo abrir o arquivo para editar dentro da pasta do seu projeto encontrará o arquivo Você pode abrir em qualquer editor de código onde eu encontro esse arquivo a pasta app então o arquivo que você procura não será mas app bage JS PJS achei tá certo fou para entrar na página PJS entrei

que era PJS entrei é isso aqui tá então acho que é isso vamos ver então substitua o conteúdo por isso aqui então vou copiar ah salve o arquivo salvar o arquivo Talvez seja isso você deve salvar o arquivo dentro da pasta app como fazer isso ok Edit Ok ou Command s para salvar Então tá não deu não olhe para o terminal para entender qual é a causa do erro beleza erro no erro mesmo erro erro erro erro erro aqui vou colocar para ele que tá aparecendo isso aqui o erro não erro é esse não conseguiu

encontrar o diretório app eu tô muito errada mais ou menos mais ou menos errado você quer que eu te coloca no caminho para ver se prog sim sim por favor você abriu só o arquivo você não abriu o projeto todo você tinha que vir aqui abrir a pasta vim onde você criou que foi aqui o t list abr tá vazio Por que que tá vazio Você apagou alguma coisa não acho que você apagou alguma coisa sem querer porque não tem nada aqui né no negócio então Teria que começar de novo tá aí no caso agora

você entra na você entra em documentos que é o que ele tinha falado para você fazer is você não leu post tamb onde eu salvo aí você vai rodar [Música] mesmo aí você consegue abrir o terminal por aqui mesmo e rodar o npm aqui é o seu terminal agora Uhum agora você tá no caminho certo mas eu eu não entendi nada por que deu errado inicialmente Qual foi o problema Inicial problema é que você fez tudo errado você não você não seguiu os comandos corretos né Eu sei que sim olha aqui eu fiz tudo que

tinha pedido ó eu pedi usar é porque ele ele explica o básico aí mas você tá antes do básico então ele deixou de explicar o que que é terminar não falou o que que é você tinha que melhorar no caso seu prompt entendi falar que você não não sabe literalmente nada nem de sistema operacional por exemplo que é o questão do terminal e tal eu entendi assumiu que você sabia sobre o que é terminal Como navegar no terminal e também ele assumiu que você sabia o que é o editor de código Uhum Então tá então

essa parte foi né precisei da ajuda do André porque eu não tava entendendo nada ok então aqui acho que agora é isso né vamos estrutura básica do ti list vamos criar uma lista simples problema é que como empinou desde o início agora eu t toda perdida e embananado mas falta mais 15 minutos para dar 1 hora B não tá esquecendo de nada al não comando ess não aqui dentro Hum era só isso que tinha que fazer agora deu Ah já que escolhemos usar ti Wi podemos estilizar Nossa lista para que fique mais bonita abra o

arquivo Ok ok Você tem mais qu minutos ah não ah o arquivo Global CSS vou precisar de um de uma confirmação sua ISS aqui tá certo falando que tem que est assim você tá indo pelo caminho totalmente errado teu já tá configurar tá funcionando você quarto passo era melhorando o design Você precisa melhorar o design agora não que que você precisa agora eu não sei eu tô Seguindo os passos eu não faço isso Qual seu objetivo criar o o t list tá faltando Não faço ideia o que que tá faltando aqui fazer a lista funcional

Ué então por que que você tá querendo melhorar o design Uai porque eu achei que era isso já deu morora preciso que você me ajude mas eu tem que dar uma colher de chá porque agora já tá já tá feito o negócio agora preciso fazer funcionar s mas tá criado criar um componente de tarefa Vamos criar umaa de tarefas onde o usuário Pode adicionar novas tarefas marcar como concluídas e deletar comprar laranja ou eu posso deletar Ok então tá tá pronto aí quais suas conclusões finais dá para construir um micras com chat PT Ah eu

não sei tipo isso aqui venderia eu não sei eu acho que falta muita coisa aqui mas eu acho que de uma forma geral se fizer uns reparos fizer algo legal acho que é ok né Dá para colocar eu tô até orgulhosa porque eu nunca tinha criado nada então vamos colocar aqui comprar produtos de skinc coreano tcharam que que você mudaria aí agora Eu mudaria a estrutura o layout colocaria isso aqui ok Gostei do azul mas eu colocaria aqui em cima isso aqui talvez eu colocaria mais para cá colocaria Talvez uma margem colocaria talvez tipo uma

um layout de caderno aqui assim criativa qu fundamental você acha que foi o chat APT e qu fundamental foi eu você o chat APT foi muito fundamental porque eu não sei o código então se ele não tivesse eu não saberia absolutamente nada mas ao mesmo tempo talvez eu dei o comando errado para ele porque eu talvez deveria ter falado que eu tô começando do zero que eu nunca fiz nenhum tipo de código nunca fiz nada nessa área então precisava desde do princípio o Babá porque igual você falou ele já começou me dando a partir de

uma suposição que eu já sabia o que que eu tava fazendo pelo menos basicamente e eu não sabia nada então se você não tivesse aqui e eu não acho que eu não teria conseguido fazer porque tava dando erro erro erro erro e eu não ia conseguir concluir mas talvez eu acho que o erro maior foi meu se eu tivesse dado o comando correto teria dado certo ok então com uma hora aí você conseguiu fazer um um tud list é e é isso Parabéns Obrigada ob você também não tinha fo o chat GPT aí gente então

as conclusões que vocês vão tirar é com vocês tá a gente só aqui gravou ficamos aqui uma hora gravando foi difícil aí o resultado aí agora vocês tirem suas próprias conclusões se vocês quiserem parte dois comenta aí que a gente grava a gente tentar fazer algo mais elaborado que vai ter um aí que vai comentar Ah tiul é muito fácil é mas vocês quiserem algo mais complexo a gente faz beleza enfim a gente pode atualizando talvez a gente faz uma live também se for interessante uma live aí vendo a gente sofrer eu sofrer né E

a Carol também gente me desculpa eu sei que fui muito lenta que teve coisas que eu nem sabia que eu tava fazendo mas é porque eu não nunca fiz isso antes então TR M ótimo tá ótimo tá ótimo pedido precisa pedir desculpa não mas é isso aí Espero que tenha sido produtivo esse vídeo para quem tá assistindo não sei mas aí é um conteúdo diferente aqui pro Canal se você gostou deixa aí o like Compartilha aí com seus amigos comenta aí pra gente ir conversando também e se ainda não for inscrito se inscreve aí eu

falei que para se inscrever eu acho que não eu nunca sei mas deixa o like aí se inscreve comenta e compartilha É isso aí e envia pros seus amigos que não sabem codar para eles conseguirem codar através do chat IPT desafia eles aí para ver que que rola isso aí então é isso aí e até a próxima falou