Maria Babo
Maria Babo — Portfólio e plataforma de loja e fotos
O portfólio de uma fotógrafa, arquiteta e web designer: três campos, IMAGE, SPACE e WEB, num site que se lê como um arquivo, com tipografia grande e sem enfeite. No mesmo repositório existe uma plataforma própria com loja de cerâmica, encomendas, pagamento e entrega de fotos de sessão por área paga.
- 4
- 12
- 15
Problema.
Uma profissional que atua em três áreas precisa de um portfólio que as junte sem parecer três sites. Fora a vitrine, ela também tinha dois negócios possíveis, vender cerâmica e entregar fotos de sessão a clientes, que pedem catálogo, pedido, pagamento confirmado e proteção do arquivo original.
Solução.
Monorepo com quatro aplicações: a landing do portfólio (Next.js 14), a loja de cerâmica com carrinho e encomendas, o site de sessões de fotografia com área paga e uma API em Express com Prisma e Postgres. A API cuida de pagamento no Mercado Pago com webhooks, login por JWT, e-mail, armazenamento no Cloudflare R2 e marca d'água nas fotos. Um design system compartilhado dá a base visual dos apps.
Resultado.
A landing está no ar em www.mariababo.com.br, com 12 projetos publicados e 15 URLs no sitemap. A loja, o site de sessões e a API também respondem em subdomínios próprios, mas ainda com dados de exemplo, sem produtos nem sessões reais cadastrados.
A parte difícil.
Todo projeto tem um ponto em que a solução óbvia não serve. Aqui foram estes.
Vender uma foto sem entregar o original
Quem vê a sessão precisa enxergar o suficiente para querer comprar, mas não pode levar o arquivo de graça. As fotos bloqueadas viram um preview borrado com marca d'água repetida, que vai para um bucket público. Os originais ficam em um bucket privado do R2 que nunca é servido direto: toda leitura passa por uma URL assinada de curta duração, gerada só depois de o servidor conferir se a foto foi desbloqueada ou paga.
Confirmar pagamento sem confiar no navegador
O valor nunca vem do cliente: o servidor calcula a partir do preço configurado. A confirmação chega por webhook do Mercado Pago, que a API valida recalculando a assinatura HMAC-SHA256 sobre o id, o request-id e o timestamp, com comparação em tempo constante. Só então a API consulta o pagamento na própria API do Mercado Pago, em vez de aceitar o status do corpo da notificação, e o liga ao pedido da loja ou ao pagamento da sessão pelo external_reference.
Um site que se comporta como arquivo, vindo de um design
A referência é um export de design, não o site anterior. Scripts normalizam cada export em um snapshot versionado e geram um relatório de diferenças entre versões antes de qualquer código. Imagens viram WebP e as páginas em grade são geradas de arquivos que não se editam à mão. O conteúdo de cada projeto é dado, e a pipeline roda tipos, lint, build e testes de ponta a ponta a cada mudança na landing.
Quatro deploys num repositório só
Os frontends vão para o Vercel a cada push na master. A API só é reimplantada quando mudam seus caminhos ou os pacotes de banco e storage: a Action entra na VPS por SSH, reconstrói a imagem, aplica as migrations do Prisma e sobe o container. O limite de requisições da API é em memória, por IP, suficiente para um único processo, e o código registra que precisaria virar algo compartilhado se a API escalasse.
O que eu fiz.
- Monorepo com npm workspaces, apps em Next.js 14, API em Express e pacotes compartilhados de banco, armazenamento e design system
- Landing do portfólio construída a partir de um export de design fornecido pela Maria, com o conteúdo de cada projeto escrito como dado
- Loja de cerâmica com carrinho, pedidos, encomendas e painel de administração
- Site de sessões de fotografia com código de acesso, fotos bloqueadas e desbloqueadas, pagamento e painel de administração
- API com Mercado Pago e webhooks, JWT, envio de e-mail, Cloudflare R2, limite de requisições e marca d'água nas fotos
- Deploy da API em VPS com Docker e GitHub Actions por SSH, e dos apps no Vercel
- Testes de fumaça com Playwright na pipeline da landing, SEO, sitemap e imagem de compartilhamento por projeto
Stack.
Quer algo parecido?
Este projeto é do tipo criação de sites no rio de janeiro. A partir de R$ 2.490 + R$ 189/mês. Me conta o que você precisa e respondo pessoalmente. Se preferir escrever, use o formulário.