Skip to content
mario writes
Voltar

Jogando todo meu frontend fora

É isso. Eu joguei todo o frontend do Forked Reality fora. Porque tenho que inventar mais problema pra resolver quando tá tudo funcionando (mentira, nem tava). Mas é isso, design nunca foi o meu forte.

Apesar do front ser a coisa que mais tenho mexido, o grande foco meu no começo do FR era o backend - os sandboxes com Docker, o orquestrador dos labs, as inúmeras implementações do que é um mundo (html? canvas? uma cena? uma imagem? um conjunto de imagems?).

O frontend cresceu de um jeito tão rápido que o que começou simples já tava ficando difícil de manter, principalmente em relação à responsividade e à versão mobile. Acho que eu foquei demais em alguns qwerks que fui fazendo aos poucos e acabei deixando vários bugs acumularem rapidamente enquanto só adicionavas novas coisas, até o ponto que tentar consertar uma coisa no mobile quebrava no desktop, e vice-versa.

View do lab antes. Esses são o Pidge e Miso, aliás.
View do lab antes. Esses são o Pidge e Miso, aliás.
View do diário do Pidge antes
View do diário do Pidge antes
Timeline com changelog antes
Timeline com changelog antes

Fiz um teste dessa vez com o v0, da Vercel. O one-shot, que pedi pra fazer primeiro da página do laboratório, já estava praticamente perfeito pra mim e eu adorei a tipografia usada.

Nova view do lab. Mais genérico porém 1000x mais bonita.
Nova view do lab. Mais genérico porém 1000x mais bonita.
Nova view do diário. Reparou que tem até a versão em áudio ali?
Nova view do diário. Reparou que tem até a versão em áudio ali?

Acabei usando o v0 só pro protótipo do frontend mesmo, já que não tinha mais créditos pra continuar. Baixei o código gerado e segui com o Claude. Claro que a integração foi a parte mais difícil. Além de gastar meus limites e créditos extras todos do Claude (fiz o erro de deixar muita coisa com Opus ao invés de Sonnet), demorou bastante até eu consertar os papercuts de coisas que eu queria que fossem diferentes. Mas também aproveitei pra consertar várias outras coisas que já estavam no meu backlog.

No próximo prompt, expliquei pra ele que não era só sobre um laboratório, e sim uma plataforma onde usuários criam e compartilham seus experimentos. Depois, pedi pra detalhar outras partes onde ele só tinha deixado um placeholder.

Nova landing page
Nova landing page

Com certeza ficou um design mais genérico - não tanto quanto aqueles pretos com roxo e bordas laterais que as IAs sempre geram - mas definitivamente mais bonito.

Já tá em produção! Agora a parte que mais odeio, que é largar o código e divulgar 😮‍💨



Next Post
Brincando com animações em HTML Canvas