Pitch: Fiz um mapa de viagens que descobre onde você já esteve lendo a localização das suas fotos

Eu gosto de viajar e sempre quis saber quantos estados do Brasil já conheço. Os apps que encontrei cobravam para marcar os estados ou só funcionavam no iPhone. Então resolvi fazer o meu: o Mapa de Viagens, onde você marca cidades, estados e países, e cada estado acende com as cores da própria bandeira.

Está no ar em https://mapa.seujunio.com.br/?utm_source=tabnews&utm_medium=post e é grátis. Abaixo conto como foi construído e o que deu trabalho.

Stack

• TanStack Start com React 19 e roteamento por arquivos
• Tailwind CSS 4 e componentes do shadcn/ui
• Supabase (via Lovable Cloud) para login com Google e e-mail, banco Postgres e tempo real
• Drizzle para as migrations do banco
• O projeto foi construído no Lovable, com eu revisando e testando cada etapa

1. Descobrir os lugares pelas fotos

A parte que eu mais queria: em vez de marcar cidade por cidade, você aponta para as suas fotos e o app descobre onde você esteve.

• A leitura da localização gravada nas fotos (EXIF) é feita no próprio navegador com a biblioteca exifr. As fotos não são enviadas para nenhum servidor; só as coordenadas são usadas.
• Dá para escolher fotos soltas (JPG, HEIC) ou a pasta inteira do Google Takeout, usando um input com webkitdirectory.
• Cada coordenada é comparada com uma base de lugares do Brasil e do mundo para achar a cidade mais próxima. Os pontos vão em lotes de até 2.000 para não travar a página.
• As fotos são agrupadas por cidade, com a quantidade de fotos e o período da viagem. Você revisa a lista e escolhe o que entra no mapa.

O que aprendi: no celular, o Android e o iPhone costumam apagar a localização quando a foto é enviada pelo navegador. Por isso o app explica como usar o Google Takeout no computador, que mantém a localização.

2. Estados com as cores da bandeira

Cada um dos 27 estados tem a bandeira em SVG. Quando você marca uma cidade, o estado dela é preenchido com a própria bandeira. É um detalhe visual, mas é o que faz a pessoa querer completar o mapa.

3. Amigos com privacidade por seção

Mandar o link do seu mapa para alguém transforma a pessoa em amiga automaticamente. Cada usuário escolhe o que cada amigo pode ver: mapa, cidades, álbuns, estatísticas, restaurantes e passeios. Também tem chat 1 a 1 em tempo real.

O maior aprendizado aqui foi com as regras de segurança por linha (RLS) do Postgres. O envio de mensagens falhava até a regra conferir, no próprio banco, se a amizade estava ativa. Deixar essa checagem no banco, e não só na tela, foi o que resolveu.

O que vem agora

• Uma página aberta "Quantos estados do Brasil você já visitou?", sem precisar criar conta, que gera uma imagem para os Stories
• Páginas de destino com roteiro, tábua de marés para praias com piscinas naturais e comparação de custo entre ir de carro ou de avião

Queria a opinião de vocês

1. A importação pelas fotos funcionou com as suas fotos? Encontrou os lugares certos?
2. O que faria você voltar ao site depois de marcar seus lugares?
3. Alguma ideia de como deixar a busca da cidade mais próxima mais rápida no navegador?