Backlog Pessoal
Aplicativo pessoal para organizar minha prateleira de jogos, inspirado em menus de sistema de consoles antigos e produzido com auxílio do Claude Code.
Contexto
Parecido com o que cinéfilos fazem com o Letterboxd, eu usava um tracker de jogos (Backloggd) mas, tendo uma biblioteca de mais de 850 jogos, funções como deixar nota e review, anotar horas jogadas e catalogar sessão por sessão ficavam pesadas demais pro que eu precisava.
Queria algo mais simples e com uma estética retrô que eu não encontrava nos sites existentes, então aproveitei a vontade de estudar o Claude Code e montei o app do zero, sob medida pras minhas necessidades e usando uma base de dados (IGDB).
Referências
Antes de desenhar o app, separei referências diversas de menus antigos, texturas e telas que queria puxar pra ele.
Estética
A referência principal é dos menus do PS1: o filtro CRT por cima de tudo, texto em pixel art, ícones 3D low-poly com os artefatos visuais do console. O cursor também é customizado, bem maior que o padrão do sistema, e cada ação tem um som retrô de menu: clicar, mover jogo, entrar no modo in-focus, trocar de aba, adicionar ou excluir jogo, entre outros.
A escolha também foi estratégica: eu já sabia que ia usar um filtro CRT parecido aqui no portfolio, então o Backlog Pessoal virou também um teste de como esse efeito se comporta na prática, antes de trazer a experiência pro site de verdade.
Abas
Quatro abas, cada uma com uma função clara.
Jogando
Os jogos que estou jogando agora, limitado a 5 entradas pra eu não ficar com muita coisa inacabada.
Salvos
Todo jogo que já joguei (jogado, zerado, 100%), em grade com miniaturas, busca por nome, contador total e ordenação: A-Z, Z-A, ano de lançamento ou aleatório.
Backlog
O que eu quero jogar, limitado a 10 entradas pra não acumular jogos que eu não vou começar de fato.
Coleções
Pastas que eu mesmo crio, como "melhor jogo de cada ano". Cada uma pode ser ranqueada ou sem hierarquia nenhuma entre os jogos.
Interações
Um recorte de algumas interações do app em movimento.
Processo
Da IGDB entram só três informações: nome, ano e capa. O resto (organização, filtros, coleções, som, cursor) é tudo construído em cima disso.
Cowork com IA
Primeiro fiz o planejamento: referências, as dores que eu queria resolver, as funções, a arquitetura, tudo conversado com a IA antes de qualquer linha de código. Depois fiz o handoff pro Claude Code, que gerou o app do zero mas com meus inputs de UX, sempre explicando a lógica por trás de cada passo. Foi, literalmente, a mesma forma como este portfolio foi construído.