Voltar aos projetos
CASE 02 / Achei Fotos / COMÉRCIO DE FOTOS · WEB

Da imagem enviada
à foto entregue.

Concebi a arquitetura do Achei Fotos e fui o principal responsável pela implementação do núcleo do sistema: backend, processamento de mídia e integrações de pagamento. Também atuei no frontend e nos ajustes visuais dos fluxos do produto.

Minha atuação
Arquitetura e implementação do núcleo
Contexto
Loopino
Produto
Achei Fotos

O case em três pontos

Achei Fotos / VISÃO GERAL
O desafio
Processar fotografias e conectar compra, pagamento e acesso.Entender o contexto
Uma decisão central
Separar a API HTTP dos jobs e do processamento pesado.Explorar as decisões
Minha contribuição
Autoria da arquitetura e implementação principal de mídia, pagamentos e integrações.Ver minha contribuição

Encontrar a foto.
Concluir a compra.

Exibir fotos é só uma parte do produto. As imagens precisam ser enviadas, processadas e armazenadas. Os clientes precisam encontrá-las, comprá-las e acessar os arquivos corretos.

O processamento acontece em segundo plano enquanto a loja atende à navegação e à compra. Eventos de pagamento e estado do pedido determinam o acesso aos arquivos comprados.

A restrição de projetoO fluxo da imagem e o fluxo de compra precisam se conectar, mas não são a mesma responsabilidade.

Conectar a imagem,
a compra e a entrega.

Minha responsabilidade abrangeu o fluxo de mídia, as integrações de pagamento e os produtos associados a cada foto, com atuação também no frontend.

O que assumi no projeto

  • Upload, filas, jobs, marca d’água e integração com processador de mídia e armazenamento.
  • Pix, cartão e pagamento presencial; checkout, webhooks e reconciliação dos pedidos.
  • Arquitetura de produtos associados a cada foto.
  • Integração entre loja, painel administrativo e Core API.

A estrutura por trás
do produto.

O mapa mostra as principais responsabilidades e conexões. Amplie para explorar o fluxo ou escolha uma camada para entender seu papel no sistema.

Achei Fotos / MAPA DO SISTEMA
Achei Fotos / A arquitetura por trás de uma foto A loja e a administração Next.js chamam a Core API Hono. O Core acessa PostgreSQL por Drizzle e Hyperdrive, integra pagamentos Mercado Pago e publica jobs nas Cloudflare Queues. Um Jobs Worker separado consome filas e agendamentos, chama o processador Fastify e Sharp, indexa rostos com Rekognition, envia e-mails via Resend e persiste o estado dos jobs. O processador lê e grava objetos no R2. Esta visão seletiva omite detalhes de autenticação, a entrega direta de imagens e alguns caminhos de leitura. Achei Fotos / A arquitetura por trás de uma foto Requisições HTTP e processamento assíncrono separados Linha contínua: chamada / dependência · Tracejado: entrega por fila HTTP SQL Checkout Webhook Enfileirar Consumir HTTP Indexar Notificar Ler / gravar Persistir estado Loja e administração Next.js · OpenNext Galeria · uploads · checkout Core API Cloudflare Workers · Hono HTTP · auth · pedidos · uploads PostgreSQL / Supabase Drizzle · Hyperdrive Dados de negócio e estado dos jobs Mercado Pago Integração de pagamentos Checkout e webhooks assinados Cloudflare Queues Entrega assíncrona de jobs Retentativas e encaminhamento Jobs Worker Consumidor da fila · cron Mídia · indexação · notificações Processador de mídia Node.js · Fastify · Sharp Derivados de imagem fora de Workers AWS Rekognition Reconhecimento facial Indexação pelo fluxo de jobs Resend E-mail transacional Notificações de pedido pago Cloudflare R2 Mídia pública + privada Prévias / originais e derivados Prévias públicas saem direto do R2. Originais usam acesso assinado controlado pelo Core. MARCOS COSTA / VISÃO TÉCNICA SIMPLIFICADA / 06.10.2026
Arquitetura simplificada · repositórios consultados em 6 out 2026
Ler o diagrama em texto

A loja e a administração Next.js chamam a Core API Hono. O Core acessa PostgreSQL por Drizzle e Hyperdrive, integra pagamentos Mercado Pago e publica jobs nas Cloudflare Queues. Um Jobs Worker separado consome filas e agendamentos, chama o processador Fastify e Sharp, indexa rostos com Rekognition, envia e-mails via Resend e persiste o estado dos jobs. O processador lê e grava objetos no R2. Esta visão seletiva omite detalhes de autenticação, a entrega direta de imagens e alguns caminhos de leitura.

Next.js · Hono · Supabase Auth

Dar à interface um contrato claro com o backend.

Loja e administração usam a Core API para galeria, uploads, carrinho, checkout, pagamentos e downloads. O acesso aos dados usa Drizzle e Hyperdrive no deploy. O isolamento entre empresas é aplicado no backend, não por filtros da interface.

Cloudflare Queues · Jobs Worker

Separar requisições de trabalho em segundo plano.

O Core enfileira o trabalho. Um Jobs Worker dedicado consome mensagens e agendamentos para derivados, reconhecimento, e-mails e limpeza. Jobs precisam de estado explícito e comportamento idempotente em retentativas.

Fastify · Sharp · Cloudflare R2

Dar um runtime próprio ao processamento pesado.

O Jobs Worker chama o processador Node.js/Fastify/Sharp, em vez de executar o processamento pesado no Core. Prévias com marca d’água são públicas; originais e derivados limpos de reconhecimento permanecem privados. Bytes públicos são entregues diretamente, sem proxy pelo Core.

Mercado Pago · webhooks · pedidos

Usar eventos de pagamento para definir o acesso ao pedido.

O Core integra checkout e eventos de pagamento. Webhooks exigem validação de assinatura e reserva do evento antes do processamento. Estado do pedido e acesso precisam refletir o fluxo de pagamento, com e-mail encaminhado de forma assíncrona.

Visão simplificada das principais fronteiras e integrações.

O que escolhi.
Os compromissos envolvidos.

01Tirar o processamento pesado do caminho da requisição.HTTP, fila e processamento têm responsabilidades distintas.

Escolha de arquitetura

Usar Core para HTTP, Queues para entrega dos jobs e um Jobs Worker separado para chamar o processador Fastify/Sharp. Em produção, o processador não recebe chamadas diretas da loja.

A contrapartida

O produto precisa apresentar os estados de processamento com clareza. Filas, retentativas, processamento externo e estado no banco precisam funcionar em conjunto.

02Separar prévias públicas de originais privados.Exibir a prévia sem publicar o arquivo original.

Escolha de arquitetura

Entregar prévias com marca d’água pelo R2 público e manter originais e derivados limpos de reconhecimento em armazenamento privado, com acesso controlado.

A contrapartida

Uma imagem não é só uma URL. Caminhos, tipos de derivados e regras de acesso precisam permanecer coerentes para não publicar o arquivo errado.

03Preparar eventos de pagamento para repetição.Uma notificação repetida não deve gerar efeitos duplicados.

Escolha de arquitetura

Validar assinaturas dos webhooks e reservar eventos antes de processá-los; modelar explicitamente as mudanças de estado de pedidos e pagamentos.

A contrapartida

Entrega pela rede não garante execução única. O tratamento dos eventos e os jobs seguintes precisam evitar efeitos duplicados e pedidos inconsistentes.

Da decisão
à implementação.

Fluxo de processamento

Upload, filas, jobs, marca d’água e integração com armazenamento.

Integrações de pagamento

Pix, cartão e presencial, com webhooks e reconciliação.

Produtos por foto

Arquitetura de produtos conectada às APIs, dados e interface.

Interface e fluxos do produto

Frontend e ajustes visuais, conectados às integrações de upload, produtos e compra.

A entrega conecta o upload do fotógrafo à compra e ao acesso do cliente aos arquivos, com caminhos separados para processamento e pagamentos.

Conversar sobre este case
Continue por outro contextoALP

No ALP, as decisões começam no aparelho do motorista e nas condições da operação em campo.

Vamos conversar sobre
o próximo desafio?

Está contratando para sua equipe ou planejando um sistema? Envie o contexto da vaga ou do projeto e o que precisa construir ou evoluir.

Conversar por e-mail
viniciustatuta@gmail.com

Diagrama de arquitetura

100%

Use o zoom e a rolagem para explorar a imagem. Escape fecha esta visualização.