← Projetos

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.

Referência visual 1 de 6
Referência visual 2 de 6
Referência visual 3 de 6
Referência visual 4 de 6
Referência visual 5 de 6
Referência visual 6 de 6

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.

Captura de tela da aba Jogando

Jogando

Os jogos que estou jogando agora, limitado a 5 entradas pra eu não ficar com muita coisa inacabada.

Captura de tela da aba Salvos

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.

Captura de tela da aba Backlog

Backlog

O que eu quero jogar, limitado a 10 entradas pra não acumular jogos que eu não vou começar de fato.

Captura de tela da aba Coleções

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.

Arrastar a capa pra reordenar.
Ícone low-poly rotacionando em 3D.
Entrar no modo in-focus.
Ajustar presets de CRT.
Adicionar um jogo pela busca do IGDB.
Excluir um jogo.

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.

Captura do código do aplicativo no editor
Próximo projeto Chuvisco →