Criar o Orkut no Gemini: recriamos a lenda em um único HTML
Quem cresceu na internet dos anos 2000 sabe bem o peso da palavra “Scrap”. O Orkut foi uma verdadeira febre no Brasil, ensinando toda uma geração o que era participar de comunidades bizarras (“Eu odeio acordar cedo”), caçar depoimentos no topo da página dos amigos e organizar fotos em álbuns super limitados.
Recriar essa experiência nostálgica do zero, usando a arquitetura web moderna, já é um baita projeto. Mas e se a gente colocar uma regra insana: o Gemini Pro tem que programar a rede social inteira num único arquivo HTML, sem banco de dados real?
No episódio de hoje do nosso laboratório “Desafiando a IA”, resolvemos brincar com fogo. Forçamos o Gemini a construir um clone do Orkut, gerenciar perfis e até simular interações entre “bots” para a rede não parecer um deserto. Spoiler: as coisas saíram do controle e o código quebrou feio, mas a gente deu a volta por cima. Cola comigo para ver os 4 mega prompts que usamos e baixe o código final!
A loucura do “banco de dados” no navegador:
Para uma rede social funcionar (comunidades, fóruns, fotos, amigos), ela precisa de um banco de dados relacional parrudo no backend. Exigir que a IA faça tudo num arquivo `.html` local significa que ela tem que construir uma matriz complexa usando apenas o localStorage do seu navegador (o cache). É um teste absurdo de lógica para a máquina.
Neste guia: veja a anatomia de uma Single Page Application relacional, copie os 4 comandos limpos e baixe a nossa “Nostalgia Network” para brincar offline.
Resposta curta (TL;DR):
O Gemini Pro manda muito bem na criação do layout e da lógica básica relacional de amigos e comunidades em HTML/JS puro. O problema surge quando tentamos colocar “loops” de automação (bots postando sozinhos): isso sobrecarrega a aba do navegador e dá crash no sistema. A solução genial foi usar dados demonstrativos pré-carregados em vez de automação ativa. O resultado final é um Orkutzinho incrivelmente fiel e divertido.
Índice
- Os 4 Mega Prompts: do sucesso ao crash e a salvação
- Baixe a Rede Social Nostalgia (Código HTML)
- Amanda Aconselha: Cuidado com os loops de IA
Os 4 Mega Prompts do Projeto Orkut 📌
Aqui estão os comandos exatos que usamos para domar o Gemini. Limpei todo aquele lixo de tags ocultas que atrapalham quando a gente copia, então estão perfeitos para você jogar direto no seu ChatGPT ou Gemini e testar por conta própria.
👾 Laboratório dev — O projeto Nostalgia Network
📸 Prompt 01 — A base de dados relacional simulada
Este foi o comando massivo inicial. Aqui a gente define a “alma” do Orkut: scraps, depoimentos, fotos e, o mais importante, as amadas comunidades.
Quero que você crie um projeto web inspirado no Orkut, recriando a experiência clássica da antiga rede social como um desafio de desenvolvimento. Este projeto faz parte da série: Desafiando a IA Quero descobrir até onde você consegue chegar criando uma rede social completa usando apenas HTML, CSS e JavaScript em um único arquivo HTML, sem backend. IDENTIDADE Inspirado no Orkut: interface simples, perfil pessoal, comunidades, depoimentos, amigos, scraps, fotos. Crie uma identidade própria (tons de azul, roxo, branco, cinza). PERFIL E AMIGOS Mostrar: foto, nome, cidade, relacionamento, interesses, etc. Seções: "Quem sou eu" e "O que eu procuro". Área de amigos fictícios. Clicar num amigo abre o perfil dele. DEPOIMENTOS E SCRAPS Permitir escrever e publicar depoimentos e recados (scraps). Salvar tudo no localStorage. COMUNIDADES Mostrar várias comunidades fictícias (Eu amo música, Nostalgia 2000, etc). Página da comunidade: membros, tópicos, criar tópico e responder. BUSCA E NOTIFICAÇÕES Busca global (pessoas, comunidades, tópicos). Notificações simples (novo depoimento, scrap). NAVEGAÇÃO SPA E MOBILE Single Page Application (SPA). Não recarregar a página ao clicar. Responsivo para mobile (menu adaptado, cards em coluna). DADOS DEMONSTRATIVOS E ARQUITETURA Use localStorage para salvar o perfil e interações. Crie 1 usuário principal, 8 amigos, 10 comunidades e tópicos de demonstração logo no início. Organize o estado (currentUser, friends, communities) de forma clara. Não faça uma landing page, quero o sistema funcionando. Entregue o HTML completo.
O que aconteceu: Um golaço de primeira! A IA gerou um layout limpíssimo, com aquele azul bebê característico. Os “Scraps” funcionavam, as comunidades estavam lá e a navegação SPA (Single Page Application) rodou lisa. Faltava só a gente poder criar a nossa própria conta e dar um pouco mais de “vida” a esse lugar deserto.
👉 Deslize. A base do Orkut feita puramente em HTML. Simples, nostálgica e funcional.
📸 Prompt 02 — O desastre dos bots automáticos
Foi aqui que fomos com muita sede ao pote. Pedimos para a IA criar o fluxo de “Criar Conta” e, ao mesmo tempo, injetar “Bots” que postavam e interagiam sozinhos usando timers do JavaScript para a rede não parecer vazia.
O resultado inicial ficou muito bom. Agora adicione sem quebrar nada: 1. CRIAR CONTA Na tela de login, adicione "Criar minha conta". Campos: Nome, Username, Email, Senha, Cidade, Foto. Use localStorage. Fazer login automático após criar. 2. COMUNIDADES VIVAS (BOTS) Quero bots fictícios (Lucas Gamer, Mariana, Rafael) que publiquem conteúdos nas comunidades automaticamente. Eles devem ter interesses específicos. Eles devem interagir: publicar, comentar, curtir. SIMULAR ATIVIDADE: Use setTimeout ou algo similar para simular a atividade ocorrendo enquanto o usuário navega, sem recarregar a página. Misture os posts dos bots com os do usuário de forma natural. Não quebre a arquitetura atual, entregue o HTML atualizado.
O que aconteceu (deu ruim!): A ambição cobrou o preço. Ao tentar criar rotinas de repetição (setInterval/setTimeout) num HTML estático para simular bots conversando, a memória do navegador foi para o espaço. O layout “bugou” inteiro, menus desapareceram e a tela ficou presa em erros de console.
👉 O caos. A tentativa de forçar o navegador a pensar como um backend de rede social destruiu a interface.
📸 Prompt 03 — Isolando os problemas (recuo estratégico)
Quando um código gerado por IA quebra, a pior coisa que você pode fazer é pedir para ela arrumar tudo de uma vez. Mandei um prompt de “rollback”, pedindo para focar APENAS na criação de conta, ignorando os bots.
A última alteração deu errado e quebrou o projeto. Vamos voltar para uma abordagem muito mais simples. REGRA PRINCIPAL: Não mexa no que já funcionava. Adicione APENAS UMA FUNCIONALIDADE: CRIAÇÃO DE CONTA. Bots estão FORA desta alteração. Nenhuma simulação ou feed automático. CRIAÇÃO DE CONTA: Tela de login com "Criar conta". Formulário: Nome, Username, Email, Senha, Cidade, Foto. Usar localStorage. Ao criar, fazer login e ir para Home. Implementar botão Sair (logout). Faça a menor alteração possível. Entregue o HTML corrigido e atualizado.
A recuperação: Funcionou! Ao isolar o escopo, o Gemini devolveu o nosso Orkut estável. Conseguimos criar a conta no formulário, fazer logout, e o `localStorage` segurou perfeitamente os nossos dados.
👉 Deslize. A interface limpa de login e o formulário de cadastro salvando no cache.
📸 Prompt 04 — A gambiarra genial (fake bots)
Nós ainda precisávamos de uma rede “viva”. A sacada foi mudar a lógica: em vez de scripts rodando em tempo real (que causam lag), pedimos à IA para gerar um grande “Banco de Dados Falso” carregado logo que o site abre, cheio de postagens pré-fabricadas.
A criação de conta está funcionando perfeitamente. Agora vamos resolver o problema da rede vazia, mas SEM usar bots automáticos ou timers. NÃO use setInterval, setTimeout, ou geração automática de posts enquanto o usuário navega. Solução: USUÁRIOS E POSTS PRÉ-CARREGADOS (Mocados). 1. Crie constantes em JS com vários perfis demonstrativos (Lucas, Mariana, etc) com interesses, avatares fictícios, cidades. 2. Crie uma grande array de "posts iniciais" e "comentários" dentro das comunidades, associados a esses perfis fictícios. Exemplo: Lucas pergunta em "Jogos": "Qual jogo marcou sua infância?". Mariana responde: "Super Mario!". 3. Esses dados demonstrativos devem ser carregados no estado inicial da aplicação se o localStorage estiver vazio. O usuário real (eu) deve conseguir curtir, responder e interagir normalmente com essas postagens pré-carregadas. As interações do usuário real são salvas no localStorage. Além disso, limpe pequenos trechos de código/comentários de debug que ficaram visíveis no HTML. Entregue o código completo atualizado.
A vitória: Essa é a verdadeira engenharia de prompts! O Orkut ganhou vida sem travar o navegador. Agora temos fóruns com discussões nerd das antigas (tipo “PlayStation 2 vs Xbox”) pré-carregadas. Você pode entrar lá, responder ao bot, e a sua resposta fica salva. Nostalgia pura, 100% funcional!
👉 Deslize. A rede social povoada por usuários fictícios pré-carregados nas comunidades.
Baixe a Nostalgia Network (clone Orkut) 🕹️
Faltou o detalhezinho do mini-jogo de Fazendinha ou da Máfia? Faltou. Mas conseguir estruturar todo o esquema de amigos, scraps, depoimentos e fóruns de comunidades usando apenas as memórias do seu navegador é de tirar o chapéu para a capacidade do Gemini.
Se quiser matar a saudade e interagir com as nossas “comunidades fake” num ambiente seguro e offline, é só baixar o HTML abaixo:
NOSTALGIA NETWORK: O arquivo final
Reviva os dias de glória dos Scraps. Clique abaixo para abrir o documento gerado no nosso laboratório no seu próprio navegador.
👉 Amanda Aconselha: Cuidado com os loops de IA
- O perigo do
setInterval: No Prompt 2, a gente quase matou o projeto pedindo para a IA ficar checando e postando conteúdos automaticamente. Num ambiente real, isso é feito pelo Backend/Servidor. Forçar o Javascript do navegador (frontend) a fazer esse papel pesado num arquivo único gera um loop de renderização que trava tudo. Se for simular, use Mock Data (dados estáticos) como fizemos no Prompt final. - Limites do LocalStorage: Este projeto é incrível para portfólio e estudos, mas lembre-se: o
localStorageguarda no máximo cerca de 5MB de texto. Você não consegue “subir fotos” de verdade aqui, as imagens são salvas em formato Base64 (texto gigante), o que enche a memória rapidinho. Em um projeto real de Orkut, você usaria React no front-end e Firebase/Supabase para guardar as fotos. - A arte de recuar o Prompt: Quando a IA vomitar um código todo torto, não peça para ela “arrumar a interface”. Peça para ela dar um “Rollback” (reverter) para a função anterior e isolar o problema. IAs textuais têm dificuldade espacial, se você encher de ordens, elas esquecem a fundação do código.
Ei, dev, antes de ir: se você curte dissecar a mente das IAs de código, dá uma olhada no que a gente separou nestas categorias. É curso de nível pago entregue de graça na sua tela:
ps: obrigada por chegar até aqui, é super importante para mim.
