Painel Pessoal
Trabalho por turnos que mudam todas as semanas e tinha as despesas espalhadas por várias apps. Criei uma app onde, ao abrir, vejo logo os meus turnos, os próximos pagamentos e quanto já gastei.
Uma app feita para mim, a partir de um problema real.
Junta numa só app tudo o que eu precisava de ver no dia a dia: o horário de trabalho, as despesas fixas e quando saem, os gastos do mês, as tarefas, as listas de compras, os desejos e os planos de viagem.
Não houve Figma nem wireframes: desenhei diretamente em código com IA, por iterações. Eu decidia o que mostrar e como; a IA construía.
- Papel
- Design + direção
- Código
- Gerado com IA
- Frontend
- React · Vite · PWA
- Dados
- Supabase
- Alojamento
- Vercel
- Ano
- 2026
A minha semana estava espalhada.
Turnos que mudam, despesas que fogem.
O horário muda todas as semanas, com folgas em dias diferentes e postos diferentes. As despesas fixas saem em dias diferentes do mês. E cada coisa vivia numa app ou num papel diferente.
Antes
- Horário numa foto ou numa mensagem
- Sem saber quando sai cada despesa fixa
- Gastos do mês difíceis de acompanhar
- Listas e planos espalhados
O objetivo
- Ver a semana de trabalho num relance
- Saber o que vai sair da conta e quando
- Controlo total sobre os gastos
- Tudo num só sítio, no telemóvel e no PC
Desenhar diretamente em código.
Pedir, ver, ajustar, repetir.
Em vez de desenhar ecrãs no Figma, trabalhei com o Claude Code: descrevia o que queria, via o resultado a funcionar com dados reais e ajustava. O design foi nascendo do uso: o que não usava saía, o que usava muito subia de lugar.
React + Vite (PWA)
Instala-se como app no telemóvel e no computador, a partir do browser, com ícone próprio.
Supabase
Login e base de dados, com regras de segurança que garantem que só a minha conta vê os meus dados.
Vercel
Alojamento gratuito, com cada alteração publicada em minutos.
Honestidade
O código foi gerado com IA. As decisões sobre o que mostrar, em que ordem e de que forma foram minhas, e são essas que estão neste estudo de caso.
O mais importante primeiro.
Um painel ordenado pelo dia a dia.
Ao abrir a app, a primeira coisa é a semana de trabalho, porque é o que consulto mais vezes. Depois, a próxima viagem e os próximos pagamentos. Os resumos de tarefas, compras e gastos ficam por baixo. E como as prioridades mudam, o botão "Organizar" deixa arrastar os cartões para outra ordem e esconder os que não interessam.
Turnos que se leem pela cor.
Cada posto tem uma cor (Balcão a azul, Caixas a laranja, Folga a cinzento) e a hora de entrada aparece em grande. Num relance percebo a semana sem abrir nada. O mês inteiro também se lê pela cor, com uma legenda por baixo.
Registar um turno em três toques.
Os horários repetem-se, por isso guardei-os como "horas rápidas": toca-se na hora, no posto e, se quiser, em quem trabalha comigo. Escrever horas à mão fica só para exceções.
- Horas rápidas guardadas
- Tipo de posto com cor
- Colegas de turno
Despesas fixas: o que falta pagar.
A lista separa "por pagar" de "pagas este mês", e o que está atrasado aparece a vermelho. No topo, o total comprometido e uma barra de progresso mostram quanto do mês já está tratado.
Pensada para usar com uma mão.
O layout muda, não só encolhe.
No telemóvel, o painel mostra só os próximos três dias, o calendário do mês passa a lista (mais fácil de ler e de tocar) e a navegação vai para baixo, ao alcance do polegar. No computador, a navegação fica em cima e as Finanças ganham uma barra lateral.
Rápido a testar, exigente a decidir.
Usar é o melhor teste
Com a app a funcionar desde o primeiro dia, percebi depressa o que era útil e o que só ocupava espaço.
A IA constrói, eu decido
Gerar ecrãs é fácil; o trabalho de design está em escolher o que entra, em que ordem e com que destaque.
Da próxima vez, esboçar antes
Muitos ecrãs foram refeitos várias vezes até ficarem certos. Uns esboços rápidos no início teriam poupado várias dessas voltas.
Uma app que uso todos os dias.
Instalada no telemóvel e no computador, com os meus dados protegidos. As capturas desta página usam dados de exemplo.