[{"data":1,"prerenderedAt":2078},["ShallowReactive",2],{"portfolio-works-br":3},[4,1379,1839],{"id":5,"title":6,"body":7,"description":1354,"extension":1355,"meta":1356,"navigation":1372,"path":1373,"seo":1374,"stem":1375,"__hash__":1376,"baseSlug":13,"localeTag":1377,"image":1358,"category":1357,"stack":1359,"tags":1378,"date":1371,"featured":1372},"portfolio/portfolio/urbee.pt-BR.md","URBEE",{"type":8,"value":9,"toc":1306},"minimark",[10,14,19,32,35,42,73,88,92,95,124,128,190,194,197,202,205,222,225,229,234,237,264,267,284,288,294,297,317,320,334,338,344,347,379,382,399,402,406,411,414,437,440,451,454,458,461,464,481,486,500,503,507,510,513,542,545,565,569,573,582,599,602,606,609,632,635,639,642,645,662,665,669,672,692,695,699,702,705,719,722,726,729,732,749,752,756,760,763,766,805,808,812,815,865,868,872,875,895,898,902,908,912,915,935,938,942,945,965,968,972,975,978,989,992,996,1003,1006,1020,1024,1027,1064,1067,1071,1074,1109,1112,1116,1119,1122,1142,1145,1149,1153,1156,1160,1163,1167,1170,1174,1177,1181,1184,1203,1206,1210,1213,1251,1257,1261,1296,1299],[11,12,6],"h1",{"id":13},"urbee",[15,16,18],"h2",{"id":17},"visão-geral-do-projeto","Visão Geral do Projeto",[20,21,22,23,27,28,31],"p",{},"URBEE é uma ",[24,25,26],"strong",{},"plataforma mobile-first de descoberta de eventos"," que idealizei e desenvolvi como um produto multiaplicação cobrindo ",[24,29,30],{},"descoberta para consumidores, planejamento social leve e operações de backend orientadas à ingestão",".",[20,33,34],{},"A ideia central era tornar a descoberta urbana mais limpa, rápida e confiável do que as plataformas tradicionais de eventos. Em vez de tratar eventos como um feed barulhento de classificados, a URBEE os trata como experiências curadas com contexto mais forte: categoria, bairro, horário, preço, identidade do organizador, prova social e proximidade no mapa.",[20,36,37,38,41],{},"O produto é estruturado como um ",[24,39,40],{},"monorepo com pnpm + Turborepo"," com:",[43,44,45,53,60,66],"ul",{},[46,47,48,49,52],"li",{},"um ",[24,50,51],{},"app mobile"," focado em descoberta e planejamento,",[46,54,55,56,59],{},"uma ",[24,57,58],{},"API em NestJS"," para catálogo, autenticação, social, gestão de fontes, ingestão, fluxos de revisão e callbacks de automação,",[46,61,55,62,65],{},[24,63,64],{},"base de app web"," para futura expansão em múltiplas superfícies,",[46,67,68,69,72],{},"e ",[24,70,71],{},"pacotes compartilhados"," para tipos e UI entre aplicações.",[20,74,75,76,79,80,83,84,87],{},"Este projeto é importante porque combina ",[24,77,78],{},"UX de produto para consumidor",", ",[24,81,82],{},"design de interação baseado em localização"," e ",[24,85,86],{},"pensamento de pipeline backend"," dentro do mesmo sistema. Não é apenas um conceito de frontend. É uma arquitetura de produto pensada para manter dados de eventos utilizáveis, atualizados e acionáveis socialmente.",[15,89,91],{"id":90},"meu-papel","Meu Papel",[20,93,94],{},"Eu construí a URBEE como um projeto completo de produto e engenharia, incluindo:",[43,96,97,100,103,106,109,112,115,118,121],{},[46,98,99],{},"Definição de produto e arquitetura da informação",[46,101,102],{},"UX mobile para descoberta, detalhe do evento, feed social, listas e fluxos de perfil",[46,104,105],{},"Arquitetura de monorepo com pacotes compartilhados",[46,107,108],{},"Design de API com NestJS + Fastify",[46,110,111],{},"Modelagem de domínio para usuários, organizadores, locais, eventos, listas, posts, follows, fontes, jobs de ingestão e itens da fila de revisão",[46,113,114],{},"Desenho de persistência com Prisma e estratégia de seed",[46,116,117],{},"Geração de contratos OpenAPI/Swagger",[46,119,120],{},"Desenho do workflow de ingestão com revisão e hooks de automação",[46,122,123],{},"Padrões de integração frontend/backend com React Query e requisições autenticadas",[15,125,127],{"id":126},"stack","Stack",[43,129,130,136,142,148,154,160,166,172,178,184],{},[46,131,132,135],{},[24,133,134],{},"Monorepo:"," pnpm, Turborepo",[46,137,138,141],{},[24,139,140],{},"Mobile:"," Expo, React Native, Expo Router, TypeScript",[46,143,144,147],{},[24,145,146],{},"Data Fetching:"," TanStack React Query",[46,149,150,153],{},[24,151,152],{},"UI/UX:"," Expo Image, Expo Haptics, Expo Location, React Native Maps, efeitos de Blur/Glass",[46,155,156,159],{},[24,157,158],{},"API:"," NestJS, Fastify, TypeScript",[46,161,162,165],{},[24,163,164],{},"Persistência:"," Prisma, PostgreSQL",[46,167,168,171],{},[24,169,170],{},"Serviços de Infra:"," Redis, Docker Compose",[46,173,174,177],{},[24,175,176],{},"Contratos:"," Swagger / OpenAPI",[46,179,180,183],{},[24,181,182],{},"Automação:"," integração de callback com n8n",[46,185,186,189],{},[24,187,188],{},"Pacotes Compartilhados:"," tipos e UI de workspace",[15,191,193],{"id":192},"visão-de-produto","Visão de Produto",[20,195,196],{},"URBEE foi desenhada em torno de um objetivo simples:",[20,198,199],{},[24,200,201],{},"Ajudar pessoas a descobrir o que está acontecendo na cidade e transformar essa descoberta em um plano real.",[20,203,204],{},"Isso significa que o app precisa resolver mais do que busca. Ele precisa suportar:",[43,206,207,210,213,216,219],{},[46,208,209],{},"navegação rápida quando o usuário ainda não sabe o que quer,",[46,211,212],{},"filtros por momento, categoria, preço e distância,",[46,214,215],{},"confiança nos detalhes do evento,",[46,217,218],{},"um fluxo de decisão orientado por mapa,",[46,220,221],{},"e mecânicas sociais leves para que descoberta possa virar coordenação.",[20,223,224],{},"A direção do produto é especialmente forte para grandes ambientes urbanos como São Paulo, onde a oferta de eventos é ampla, fragmentada e muitas vezes mal organizada entre sites-fonte e posts sociais.",[15,226,228],{"id":227},"o-que-eu-construí","O Que Eu Construí",[230,231,233],"h3",{"id":232},"_1-experiência-mobile-first-de-descoberta","1) Experiência Mobile-First de Descoberta",[20,235,236],{},"O app mobile é organizado em torno de cinco áreas principais de navegação:",[43,238,239,244,249,254,259],{},[46,240,241],{},[24,242,243],{},"Hoje",[46,245,246],{},[24,247,248],{},"Explorar",[46,250,251],{},[24,252,253],{},"Mapa",[46,255,256],{},[24,257,258],{},"Social",[46,260,261],{},[24,262,263],{},"Perfil",[20,265,266],{},"Essa estrutura espelha a forma como usuários reais exploram planos na cidade:",[43,268,269,272,275,278,281],{},[46,270,271],{},"começam por um feed diário,",[46,273,274],{},"seguem para exploração por categoria,",[46,276,277],{},"mudam para o modo mapa quando proximidade importa,",[46,279,280],{},"checam o que amigos ou organizadores seguidos estão fazendo,",[46,282,283],{},"e salvam ou revisitam planos a partir de perfil/listas.",[230,285,287],{"id":286},"_2-feed-inicial-projetado-para-descoberta-rápida","2) Feed Inicial Projetado para Descoberta Rápida",[20,289,290,291,293],{},"A aba ",[24,292,243],{}," foi construída como um feed em camadas de descoberta, e não como uma lista plana.",[20,295,296],{},"Ela inclui:",[43,298,299,302,305,308,311,314],{},[46,300,301],{},"um campo de busca para procura direta,",[46,303,304],{},"chips rápidos para atalhos por data e tags,",[46,306,307],{},"uma seção de tendências com cards visuais,",[46,309,310],{},"cards de eventos com imagem, data, bairro, tags e preço,",[46,312,313],{},"ações de salvar e compartilhar diretamente no card,",[46,315,316],{},"e uma seção de feed social mostrando atividade em torno de eventos.",[20,318,319],{},"Isso oferece ao usuário múltiplos pontos de entrada para a descoberta:",[43,321,322,325,328,331],{},[46,323,324],{},"navegar por momento,",[46,326,327],{},"navegar por tema,",[46,329,330],{},"navegar por contexto social,",[46,332,333],{},"ou ir direto para um evento específico.",[230,335,337],{"id":336},"_3-exploração-por-categorias","3) Exploração por Categorias",[20,339,340,341,343],{},"A área ",[24,342,248],{}," transforma descoberta ampla em um fluxo de navegação mais intencional.",[20,345,346],{},"Os usuários podem entrar em categorias como:",[43,348,349,352,355,358,361,364,367,370,373,376],{},[46,350,351],{},"Musica",[46,353,354],{},"Arte",[46,356,357],{},"Cinema",[46,359,360],{},"Teatro",[46,362,363],{},"Gastronomia",[46,365,366],{},"Cursos",[46,368,369],{},"Bem-estar",[46,371,372],{},"Esportes",[46,374,375],{},"Infantil",[46,377,378],{},"Festa",[20,380,381],{},"Dentro de cada categoria, a experiência suporta:",[43,383,384,387,390,393,396],{},[46,385,386],{},"filtros temporais como hoje, amanhã e fim de semana,",[46,388,389],{},"filtros de preço de gratuito até faixas econômicas,",[46,391,392],{},"modos de ordenação como tendência, mais próximos e mais baratos,",[46,394,395],{},"scroll infinito,",[46,397,398],{},"e controles de filtro em modal que mantêm a experiência mobile limpa.",[20,400,401],{},"Isso é importante porque apps de descoberta falham quando forçam o mesmo layout para todo mundo. A URBEE oferece tanto navegação rápida quanto refinamento estruturado.",[230,403,405],{"id":404},"_4-descoberta-de-eventos-baseada-em-mapa","4) Descoberta de Eventos Baseada em Mapa",[20,407,408,409,31],{},"Uma das funcionalidades de usabilidade mais fortes é a aba ",[24,410,253],{},[20,412,413],{},"Em dispositivos mobile nativos, implementei:",[43,415,416,419,422,425,428,431,434],{},[46,417,418],{},"fluxo de permissão de localização em tempo real,",[46,420,421],{},"mapa centralizado no usuário ou em uma região padrão de São Paulo,",[46,423,424],{},"marcadores de eventos com preço visível,",[46,426,427],{},"seleção de marcador conectada a uma bottom sheet colapsável,",[46,429,430],{},"filtros por data e raio,",[46,432,433],{},"interação de “buscar nesta área” após mover a região,",[46,435,436],{},"e uma visualização em lista de eventos próximos abaixo do mapa.",[20,438,439],{},"Isso atende a comportamentos muito práticos do usuário:",[43,441,442,445,448],{},[46,443,444],{},"“me mostra o que está acontecendo perto de mim”,",[46,446,447],{},"“me mostra o que está acontecendo neste bairro hoje à noite”,",[46,449,450],{},"ou “vou para outra parte da cidade, o que existe por lá?”",[20,452,453],{},"O valor de usabilidade aqui é alto porque decisões sobre eventos muitas vezes são geográficas antes de serem temáticas.",[230,455,457],{"id":456},"_5-camada-social-de-planejamento","5) Camada Social de Planejamento",[20,459,460],{},"A URBEE não é uma rede social completa. Ela usa recursos sociais onde eles realmente adicionam utilidade ao planejamento.",[20,462,463],{},"A estrutura atual suporta:",[43,465,466,469,472,475,478],{},[46,467,468],{},"listas pessoais salvas,",[46,470,471],{},"atividade de feed relacionada a eventos,",[46,473,474],{},"seguir organizadores,",[46,476,477],{},"posts e atualizações de eventos no feed,",[46,479,480],{},"e estatísticas em nível de perfil que tornam visível o comportamento de salvar/planejar.",[20,482,290,483,485],{},[24,484,258],{}," exibe atividade de usuários vinculada a eventos, incluindo:",[43,487,488,491,494,497],{},[46,489,490],{},"quem quer ir,",[46,492,493],{},"a qual evento a pessoa está se referindo,",[46,495,496],{},"um comentário curto,",[46,498,499],{},"e ações rápidas como curtir, comentar intenção e compartilhar.",[20,501,502],{},"Essa é uma escolha deliberada de produto. A camada social existe para reduzir atrito no planejamento e aumentar confiança por meio da descoberta compartilhada, não para sobrecarregar o produto com mecânicas genéricas de engajamento.",[230,504,506],{"id":505},"_6-detalhe-do-evento-como-tela-de-conversão","6) Detalhe do Evento como Tela de Conversão",[20,508,509],{},"A tela de detalhe do evento é onde navegação vira intenção.",[20,511,512],{},"Eu a construí para consolidar as informações mais críticas para a decisão:",[43,514,515,518,521,524,527,530,533,536,539],{},[46,516,517],{},"mídia principal,",[46,519,520],{},"título e tags,",[46,522,523],{},"apresentação completa de data/hora,",[46,525,526],{},"contexto de local e bairro,",[46,528,529],{},"estado de ingresso ou entrada gratuita,",[46,531,532],{},"contagem de participantes/prova social,",[46,534,535],{},"descrição completa,",[46,537,538],{},"ações de salvar e compartilhar,",[46,540,541],{},"e um CTA principal que alterna entre “Confirmar presenca” e “Comprar ingresso”.",[20,543,544],{},"Essa tela foi estruturada para responder rapidamente às perguntas práticas:",[43,546,547,550,553,556,559,562],{},[46,548,549],{},"O que é isso?",[46,551,552],{},"Quando é?",[46,554,555],{},"Onde é?",[46,557,558],{},"É gratuito ou pago?",[46,560,561],{},"Outras pessoas estão interessadas?",[46,563,564],{},"Quero salvar, compartilhar ou ir agora?",[15,566,568],{"id":567},"usabilidade-detalhada-e-fluxos-de-usuário","Usabilidade Detalhada e Fluxos de Usuário",[230,570,572],{"id":571},"onboarding-e-acesso","Onboarding e Acesso",[20,574,575,576,83,579,41],{},"O app inclui fluxos dedicados de ",[24,577,578],{},"login",[24,580,581],{},"cadastro",[43,583,584,587,590,593,596],{},[46,585,586],{},"campos claros de credenciais,",[46,588,589],{},"validação para dados ausentes,",[46,591,592],{},"alternância de visibilidade de senha,",[46,594,595],{},"estados de carregamento,",[46,597,598],{},"e navegação protegida para que usuários não autenticados sejam redirecionados antes de acessar as abas principais.",[20,600,601],{},"Isso cria um caminho direto da criação de conta até o produto, sem fricção desnecessária.",[230,603,605],{"id":604},"escaneamento-rápido-e-tomada-de-decisão","Escaneamento Rápido e Tomada de Decisão",[20,607,608],{},"Ao longo da experiência mobile, a UI foi otimizada para leitura rápida:",[43,610,611,614,617,620,623,626,629],{},[46,612,613],{},"cards visuais fortes,",[46,615,616],{},"linhas curtas de metadados,",[46,618,619],{},"uso persistente de bairro e preço,",[46,621,622],{},"pills compactas de tags,",[46,624,625],{},"skeletons de carregamento,",[46,627,628],{},"empty states,",[46,630,631],{},"e feedback háptico em interações-chave.",[20,633,634],{},"O resultado é um produto que ajuda usuários a tomar uma decisão em segundos, em vez de forçá-los a interpretar listas densas de eventos.",[230,636,638],{"id":637},"filtros-sem-complicação","Filtros Sem Complicação",[20,640,641],{},"Os filtros são tratados como uma ferramenta leve de decisão, não como um formulário pesado de busca.",[20,643,644],{},"A abordagem de usabilidade é:",[43,646,647,650,653,656,659],{},[46,648,649],{},"mostrar primeiro os filtros mais comuns,",[46,651,652],{},"manter a tela de categoria focada em resultados,",[46,654,655],{},"mover escolhas avançadas para uma bottom sheet/modal,",[46,657,658],{},"tornar filtros ativos visíveis,",[46,660,661],{},"e manter a ordenação fácil de alterar durante a navegação.",[20,663,664],{},"Isso equilibra velocidade e controle, o que é essencial em um produto de descoberta.",[230,666,668],{"id":667},"exploração-guiada-por-proximidade","Exploração Guiada por Proximidade",[20,670,671],{},"O fluxo do mapa foi desenhado em torno do comportamento real em mobile:",[43,673,674,677,680,683,686,689],{},[46,675,676],{},"o usuário concede localização,",[46,678,679],{},"vê eventos distribuídos espacialmente,",[46,681,682],{},"ajusta o raio,",[46,684,685],{},"move o mapa para outra região,",[46,687,688],{},"toca em “buscar aqui”,",[46,690,691],{},"e abre o evento diretamente pela sheet ou pelo contexto do marcador.",[20,693,694],{},"Isso é mais útil do que um mapa passivo embutido. Vira uma superfície real de descoberta.",[230,696,698],{"id":697},"conteúdo-salvo-e-retorno-ao-app","Conteúdo Salvo e Retorno ao App",[20,700,701],{},"Eventos salvos e listas são um mecanismo importante de retenção.",[20,703,704],{},"O design atual do produto suporta:",[43,706,707,710,713,716],{},[46,708,709],{},"salvar a partir do feed,",[46,711,712],{},"salvar a partir do detalhe do evento,",[46,714,715],{},"lógica automática/padrão de lista salva no backend,",[46,717,718],{},"e exibição de totais de listas na área de perfil.",[20,720,721],{},"Isso faz a URBEE ser útil tanto para decisões imediatas quanto para planejamento mais lento ao longo da semana.",[230,723,725],{"id":724},"prova-social-sem-ruído","Prova Social Sem Ruído",[20,727,728],{},"A experiência social é intencionalmente contida.",[20,730,731],{},"Em vez de tentar virar um feed genérico de conteúdo, a URBEE conecta atividade à intenção de evento:",[43,733,734,737,740,743,746],{},[46,735,736],{},"pessoas querendo participar,",[46,738,739],{},"comentários curtos,",[46,741,742],{},"curtidas,",[46,744,745],{},"relações de follow com organizadores,",[46,747,748],{},"e atualizações ligadas aos organizadores.",[20,750,751],{},"Isso melhora relevância e mantém o feed alinhado com o propósito do produto.",[15,753,755],{"id":754},"arquitetura-de-backend-e-produto","Arquitetura de Backend e Produto",[230,757,759],{"id":758},"estrutura-de-monorepo","Estrutura de Monorepo",[20,761,762],{},"Organizei a base de código em um monorepo compartilhado para que contratos de produto não fossem duplicados entre superfícies.",[20,764,765],{},"As áreas principais são:",[43,767,768,775,781,787,793,799],{},[46,769,770,774],{},[771,772,773],"code",{},"apps/mobile"," para o app em Expo",[46,776,777,780],{},[771,778,779],{},"apps/api"," para a API em NestJS",[46,782,783,786],{},[771,784,785],{},"apps/web"," para a base da superfície web",[46,788,789,792],{},[771,790,791],{},"packages/types"," para contratos de domínio compartilhados",[46,794,795,798],{},[771,796,797],{},"packages/ui"," para UI web compartilhada",[46,800,801,804],{},[771,802,803],{},"packages/config"," para padrões de lint, formatação e TypeScript",[20,806,807],{},"Esse setup melhora consistência e facilita evoluir o produto entre mobile e web sem desalinhar modelos.",[230,809,811],{"id":810},"módulos-da-api","Módulos da API",[20,813,814],{},"A API é dividida em módulos focados:",[43,816,817,823,829,835,841,847,853,859],{},[46,818,819,822],{},[24,820,821],{},"identity"," para autenticação e acesso ao usuário atual",[46,824,825,828],{},[24,826,827],{},"catalog"," para recuperação de eventos e organizadores",[46,830,831,834],{},[24,832,833],{},"social"," para listas, follows e composição do feed",[46,836,837,840],{},[24,838,839],{},"sources"," para configuração de fontes",[46,842,843,846],{},[24,844,845],{},"ingestion"," para execuções de pipeline e auditoria de jobs",[46,848,849,852],{},[24,850,851],{},"review"," para aprovação/rejeição humana de itens extraídos com baixa confiança",[46,854,855,858],{},[24,856,857],{},"automation"," para callbacks seguros do n8n",[46,860,861,864],{},[24,862,863],{},"system"," para health checks",[20,866,867],{},"Isso dá à API uma forma clara orientada a produto, em vez de uma estrutura genérica de CRUD.",[230,869,871],{"id":870},"fluxos-autenticados-do-produto","Fluxos Autenticados do Produto",[20,873,874],{},"O backend suporta:",[43,876,877,880,883,886,889,892],{},[46,878,879],{},"endpoints de cadastro e login,",[46,881,882],{},"acesso autenticado baseado em JWT,",[46,884,885],{},"recuperação do usuário atual,",[46,887,888],{},"acesso autenticado a listas,",[46,890,891],{},"ações autenticadas de follow,",[46,893,894],{},"e operações autenticadas de ingestão/revisão.",[20,896,897],{},"Essa separação importa porque a URBEE inclui tanto funcionalidades voltadas ao consumidor quanto ferramentas operacionais.",[15,899,901],{"id":900},"dados-de-eventos-confiança-e-ingestão","Dados de Eventos, Confiança e Ingestão",[20,903,904,905,31],{},"Uma das partes mais fortes da URBEE como projeto de portfólio é que ela enfrenta o lado difícil de produtos de eventos: ",[24,906,907],{},"qualidade de dados",[230,909,911],{"id":910},"gestão-de-fontes","Gestão de Fontes",[20,913,914],{},"O backend inclui definições de fonte com configurações como:",[43,916,917,920,923,926,929,932],{},[46,918,919],{},"nome da fonte,",[46,921,922],{},"URL base,",[46,924,925],{},"cidade,",[46,927,928],{},"tipo da fonte,",[46,930,931],{},"peso de confiança,",[46,933,934],{},"e configuração de rate limit.",[20,936,937],{},"Essa é a base para tratar ingestão de eventos como um sistema gerenciado, e não como um problema manual de planilha.",[230,939,941],{"id":940},"pensamento-de-pipeline-de-ingestão","Pensamento de Pipeline de Ingestão",[20,943,944],{},"O módulo de ingestão suporta:",[43,946,947,950,953,956,959,962],{},[46,948,949],{},"disparar ingestão por fonte ou cidade,",[46,951,952],{},"criação de jobs de ingestão,",[46,954,955],{},"registro de tentativas de extração,",[46,957,958],{},"armazenamento de execuções,",[46,960,961],{},"acompanhamento de níveis de confiança,",[46,963,964],{},"e exigência de revisão quando a confiança da extração fica abaixo do limite.",[20,966,967],{},"Isso é valioso porque plataformas de eventos só são úteis na medida em que seus dados permanecem frescos e confiáveis.",[230,969,971],{"id":970},"revisão-com-humano-no-loop","Revisão com Humano no Loop",[20,973,974],{},"A URBEE inclui um modelo de fila de revisão para resultados de extração com baixa confiança.",[20,976,977],{},"Isso significa que a plataforma foi desenhada para um fluxo híbrido prático:",[43,979,980,983,986],{},[46,981,982],{},"automação quando a confiança é alta,",[46,984,985],{},"aprovação humana quando a confiança é menor,",[46,987,988],{},"e transições auditáveis de estado para itens em revisão.",[20,990,991],{},"Essa é uma abordagem mais próxima de produção do que simplesmente raspar páginas e confiar cegamente em tudo.",[230,993,995],{"id":994},"hooks-de-automação","Hooks de Automação",[20,997,998,999,1002],{},"Também construí um endpoint seguro de ",[24,1000,1001],{},"callback para n8n"," para que workflows externos possam reportar o status de execução dos jobs de volta para a plataforma.",[20,1004,1005],{},"Isso permite que a URBEE evolua para padrões operacionais mais robustos, como:",[43,1007,1008,1011,1014,1017],{},[46,1009,1010],{},"ingestão agendada,",[46,1012,1013],{},"tratamento de falhas,",[46,1015,1016],{},"enriquecimento assíncrono,",[46,1018,1019],{},"e fluxos de automação com múltiplas etapas.",[15,1021,1023],{"id":1022},"modelagem-de-dados","Modelagem de Dados",[20,1025,1026],{},"O modelo de domínio cobre as entidades centrais necessárias para esse tipo de plataforma:",[43,1028,1029,1032,1035,1038,1041,1044,1047,1050,1052,1055,1058,1061],{},[46,1030,1031],{},"users",[46,1033,1034],{},"organizer profiles",[46,1036,1037],{},"venues",[46,1039,1040],{},"events",[46,1042,1043],{},"lists and list items",[46,1045,1046],{},"follows",[46,1048,1049],{},"posts",[46,1051,839],{},[46,1053,1054],{},"ingestion jobs",[46,1056,1057],{},"extraction attempts",[46,1059,1060],{},"ingestion executions",[46,1062,1063],{},"review queue items",[20,1065,1066],{},"Isso é importante em termos de portfólio porque mostra pensamento de sistema de produto, não apenas construção de telas.",[15,1068,1070],{"id":1069},"contexto-de-produto-com-seed","Contexto de Produto com Seed",[20,1072,1073],{},"Para tornar o sistema utilizável em desenvolvimento, eu populei a base com entidades realistas inspiradas em São Paulo, incluindo:",[43,1075,1076,1088,1103,1106],{},[46,1077,1078,1079,79,1082,83,1085],{},"organizadores como ",[24,1080,1081],{},"Mamba Negra",[24,1083,1084],{},"Gop Tun",[24,1086,1087],{},"Casa Natura",[46,1089,1090,1091,79,1094,79,1097,83,1100],{},"locais como ",[24,1092,1093],{},"Audio Club",[24,1095,1096],{},"MIS",[24,1098,1099],{},"SESC Pompeia",[24,1101,1102],{},"Parque Ibirapuera",[46,1104,1105],{},"múltiplos eventos públicos com categorias, tags, preços, URLs de origem e scores de confiança",[46,1107,1108],{},"e posts associados a organizadores e membros",[20,1110,1111],{},"Isso ajudou a validar os fluxos de descoberta, social e ingestão sobre um contexto urbano crível.",[15,1113,1115],{"id":1114},"direção-de-design-e-frontend","Direção de Design e Frontend",[20,1117,1118],{},"A interface mobile foi intencionalmente desenhada para não parecer um app utilitário genérico.",[20,1120,1121],{},"A direção de design foca em:",[43,1123,1124,1127,1130,1133,1136,1139],{},[46,1125,1126],{},"tratamento visual escuro e adequado à vida noturna,",[46,1128,1129],{},"cards grandes com mídia,",[46,1131,1132],{},"apresentação de metadados com forte contraste,",[46,1134,1135],{},"interações táteis via feedback háptico,",[46,1137,1138],{},"descoberta orientada por mapa em dispositivos nativos,",[46,1140,1141],{},"e padrões de motion/feedback que fazem o app parecer ativo e moderno.",[20,1143,1144],{},"Tratei a experiência como um produto de lifestyle/descoberta, e não como um diretório simples de eventos.",[15,1146,1148],{"id":1147},"decisões-de-engenharia-que-importam","Decisões de Engenharia Que Importam",[230,1150,1152],{"id":1151},"_1-arquitetura-de-produto-mobile-first","1) Arquitetura de Produto Mobile-First",[20,1154,1155],{},"Eu priorizei a experiência nativa mobile porque descoberta de eventos, contexto de localização e planejamento de última hora são comportamentos naturalmente mobile.",[230,1157,1159],{"id":1158},"_2-contratos-compartilhados-entre-apps","2) Contratos Compartilhados Entre Apps",[20,1161,1162],{},"A estrutura de monorepo e a estratégia de pacotes compartilhados reduzem duplicação e criam um caminho mais limpo para escalar o produto entre superfícies.",[230,1164,1166],{"id":1165},"_3-pensamento-de-backoffice-operacional","3) Pensamento de Backoffice Operacional",[20,1168,1169],{},"A API faz mais do que servir listas de eventos. Ela também modela jobs de ingestão, estados de revisão, gestão de fontes e callbacks de automação. Isso torna o projeto muito mais realista como sistema de produto.",[230,1171,1173],{"id":1172},"_4-separação-clara-entre-ux-de-descoberta-e-infraestrutura-operacional","4) Separação Clara Entre UX de Descoberta e Infraestrutura Operacional",[20,1175,1176],{},"Os usuários veem um produto polido de descoberta, enquanto o backend está preparado para orquestração de fontes e fluxos de confiança. Essa separação é uma escolha forte de engenharia para manutenção de longo prazo.",[15,1178,1180],{"id":1179},"estado-atual-do-produto","Estado Atual do Produto",[20,1182,1183],{},"Hoje, a URBEE pode ser descrita da melhor forma como:",[43,1185,1186,1192,1197],{},[46,1187,48,1188,1191],{},[24,1189,1190],{},"produto mobile de descoberta substancialmente construído",",",[46,1193,55,1194,1191],{},[24,1195,1196],{},"base backend bem estruturada para fluxos de catálogo/social/ingestão",[46,1198,1199,1200,31],{},"e uma ",[24,1201,1202],{},"superfície web pronta para expansão, mas ainda não concluída em termos de funcionalidades",[20,1204,1205],{},"Essa distinção importa. Prefiro apresentar o produto com honestidade como um sistema sério de mobile + API com uma camada web em crescimento, em vez de inflar artificialmente o que o app web já faz hoje.",[15,1207,1209],{"id":1208},"por-que-este-projeto-importa-no-meu-portfólio","Por Que Este Projeto Importa no Meu Portfólio",[20,1211,1212],{},"A URBEE demonstra que eu consigo entregar:",[43,1214,1215,1220,1226,1231,1236,1241,1246],{},[46,1216,1217,1219],{},[24,1218,78],{},", não apenas landing pages",[46,1221,1222,1225],{},[24,1223,1224],{},"arquitetura de app mobile"," com navegação real e fluxos de estado",[46,1227,1228],{},[24,1229,1230],{},"interfaces de descoberta sensíveis à localização",[46,1232,1233],{},[24,1234,1235],{},"funcionalidades sociais com utilidade ligada ao propósito do produto",[46,1237,1238],{},[24,1239,1240],{},"sistemas backend para confiabilidade operacional",[46,1242,1243],{},[24,1244,1245],{},"modelagem de dados para plataformas com múltiplas entidades",[46,1247,1248],{},[24,1249,1250],{},"design de API e automação além de CRUD simples",[20,1252,1253,1254,31],{},"Ela mostra minha capacidade de atuar em toda a stack de um produto onde ",[24,1255,1256],{},"qualidade do conteúdo, confiança, usabilidade e arquitetura importam ao mesmo tempo",[15,1258,1260],{"id":1259},"palavras-chave-serviços-para-freelancing","Palavras-chave / Serviços para Freelancing",[43,1262,1263,1266,1269,1272,1275,1278,1281,1284,1287,1290,1293],{},[46,1264,1265],{},"Desenvolvimento mobile com Expo e React Native",[46,1267,1268],{},"Desenvolvimento de plataforma de descoberta de eventos",[46,1270,1271],{},"Design de produto baseado em localização",[46,1273,1274],{},"Funcionalidades sociais de planejamento e conteúdo salvo",[46,1276,1277],{},"Arquitetura de API com NestJS",[46,1279,1280],{},"Sistemas backend com Prisma + PostgreSQL",[46,1282,1283],{},"OpenAPI e design de contratos de API",[46,1285,1286],{},"Arquitetura de workflow de ingestão",[46,1288,1289],{},"Sistemas de revisão com humano no loop",[46,1291,1292],{},"Arquitetura de monorepo com contratos TypeScript compartilhados",[46,1294,1295],{},"Desenvolvimento full-stack orientado a produto",[1297,1298],"hr",{},[20,1300,1301,1302,1305],{},"Se você precisa de um ",[24,1303,1304],{},"produto mobile-first"," que combine UX forte, estrutura backend real e modelagem de domínio cuidadosa, a URBEE representa o tipo de sistema que eu construo.",{"title":1307,"searchDepth":1308,"depth":1308,"links":1309},"",2,[1310,1311,1312,1313,1314,1323,1331,1336,1342,1343,1344,1345,1351,1352,1353],{"id":17,"depth":1308,"text":18},{"id":90,"depth":1308,"text":91},{"id":126,"depth":1308,"text":127},{"id":192,"depth":1308,"text":193},{"id":227,"depth":1308,"text":228,"children":1315},[1316,1318,1319,1320,1321,1322],{"id":232,"depth":1317,"text":233},3,{"id":286,"depth":1317,"text":287},{"id":336,"depth":1317,"text":337},{"id":404,"depth":1317,"text":405},{"id":456,"depth":1317,"text":457},{"id":505,"depth":1317,"text":506},{"id":567,"depth":1308,"text":568,"children":1324},[1325,1326,1327,1328,1329,1330],{"id":571,"depth":1317,"text":572},{"id":604,"depth":1317,"text":605},{"id":637,"depth":1317,"text":638},{"id":667,"depth":1317,"text":668},{"id":697,"depth":1317,"text":698},{"id":724,"depth":1317,"text":725},{"id":754,"depth":1308,"text":755,"children":1332},[1333,1334,1335],{"id":758,"depth":1317,"text":759},{"id":810,"depth":1317,"text":811},{"id":870,"depth":1317,"text":871},{"id":900,"depth":1308,"text":901,"children":1337},[1338,1339,1340,1341],{"id":910,"depth":1317,"text":911},{"id":940,"depth":1317,"text":941},{"id":970,"depth":1317,"text":971},{"id":994,"depth":1317,"text":995},{"id":1022,"depth":1308,"text":1023},{"id":1069,"depth":1308,"text":1070},{"id":1114,"depth":1308,"text":1115},{"id":1147,"depth":1308,"text":1148,"children":1346},[1347,1348,1349,1350],{"id":1151,"depth":1317,"text":1152},{"id":1158,"depth":1317,"text":1159},{"id":1165,"depth":1317,"text":1166},{"id":1172,"depth":1317,"text":1173},{"id":1179,"depth":1308,"text":1180},{"id":1208,"depth":1308,"text":1209},{"id":1259,"depth":1308,"text":1260},"Uma plataforma mobile-first de descoberta de eventos com planejamento social, exploração por mapa e arquitetura backend orientada à ingestão.","md",{"category":1357,"image":1358,"stack":1359,"tags":1360,"date":1371,"featured":1372},"Produto Mobile","/images/works/urbee.png","Expo, React Native, NestJS, Fastify, Prisma, PostgreSQL, Turborepo",[1361,1362,1363,1364,1365,1366,1367,1368,1369,1370],"Expo","React Native","NestJS","Fastify","Prisma","PostgreSQL","Product Design","Geolocalizacao","Descoberta de Eventos","Monorepo","2026-03-09",true,"/portfolio/urbee",{"title":6,"description":1354},"portfolio/urbee.pt-BR","EdIiJJenzryhCC3YeicqNY-P6RyVVVVsgbN7xhjUIrA","pt-br",[1361,1362,1363,1364,1365,1366,1367,1368,1369,1370],{"id":1380,"title":1381,"body":1382,"description":1819,"extension":1355,"meta":1820,"navigation":1372,"path":1833,"seo":1834,"stem":1835,"__hash__":1836,"baseSlug":1837,"localeTag":1377,"image":1822,"category":1821,"stack":1824,"tags":1838,"projectUrl":1823,"date":1832,"featured":1372},"portfolio/portfolio/cenas-nitrogen.pt-BR.md","CENAS x NITROGEN",{"type":8,"value":1383,"toc":1799},[1384,1387,1389,1404,1407,1414,1416,1419,1448,1450,1500,1504,1508,1531,1535,1557,1560,1564,1568,1579,1583,1598,1601,1605,1619,1623,1644,1648,1662,1666,1669,1696,1699,1701,1704,1718,1721,1725,1728,1753,1755,1790,1792],[11,1385,1381],{"id":1386},"cenas-x-nitrogen",[15,1388,18],{"id":17},[20,1390,1391,1392,1395,1396,1399,1400,1403],{},"A CENAS é uma ",[24,1393,1394],{},"storefront headless na Shopify"," que eu idealizei e desenvolvi de ponta a ponta com ",[24,1397,1398],{},"Nuxt 4"," e a arquitetura ",[24,1401,1402],{},"Nitrogen"," (uma abordagem em Nuxt inspirada no Shopify Hydrogen).",[20,1405,1406],{},"O projeto começou como um conceito visual forte e evoluiu para uma plataforma de e-commerce pronta para produção, com jornada completa de compra: descoberta de catálogo, páginas de produto, carrinho, redirecionamento para checkout, área de conta, gestão de endereços, busca, localização, newsletter e fluxo de back-in-stock.",[20,1408,1409,1410,1413],{},"O objetivo não era só construir uma loja bonita, mas sim uma aplicação de e-commerce ",[24,1411,1412],{},"estável, escalável e sustentável"," para operar com segurança em produção.",[15,1415,91],{"id":90},[20,1417,1418],{},"Eu construí esse projeto sozinho e assumi todo o ciclo de entrega:",[43,1420,1421,1424,1427,1430,1433,1436,1439,1442,1445],{},[46,1422,1423],{},"Estratégia de produto e direção de UX",[46,1425,1426],{},"Arquitetura de frontend e sistema de componentes",[46,1428,1429],{},"Integração com Shopify Storefront API",[46,1431,1432],{},"Modelagem de dados com GraphQL (fragments e operations)",[46,1434,1435],{},"Gerenciamento de estado com Pinia",[46,1437,1438],{},"Otimização de performance e SEO",[46,1440,1441],{},"Hardening de APIs (validação, limite de payload e rate limiting)",[46,1443,1444],{},"Qualidade com testes e automações de CI",[46,1446,1447],{},"Refatoração contínua para manutenção de longo prazo",[15,1449,127],{"id":126},[43,1451,1452,1458,1464,1470,1476,1482,1488,1494],{},[46,1453,1454,1457],{},[24,1455,1456],{},"Framework:"," Nuxt 4, Vue 3, TypeScript",[46,1459,1460,1463],{},[24,1461,1462],{},"E-commerce:"," Shopify Storefront API (GraphQL)",[46,1465,1466,1469],{},[24,1467,1468],{},"Arquitetura:"," composables estilo Nitrogen + proxy server-side + operações tipadas",[46,1471,1472,1475],{},[24,1473,1474],{},"Estado:"," Pinia + persisted state plugin",[46,1477,1478,1481],{},[24,1479,1480],{},"Estilo/UI:"," Tailwind CSS v4 + sistema tipográfico customizado",[46,1483,1484,1487],{},[24,1485,1486],{},"Mídia/UX:"," Nuxt Image, Embla Carousel, GSAP, OGL, Lenis",[46,1489,1490,1493],{},[24,1491,1492],{},"Marketing/Tracking:"," Klaviyo, Google Analytics/gtag, Vercel Analytics e Speed Insights",[46,1495,1496,1499],{},[24,1497,1498],{},"Tooling:"," GraphQL Code Generator, ESLint, Vitest, GitHub Actions CI",[15,1501,1503],{"id":1502},"o-que-eu-entreguei","O Que Eu Entreguei",[230,1505,1507],{"id":1506},"experiência-completa-de-headless-commerce","Experiência Completa de Headless Commerce",[43,1509,1510,1513,1516,1519,1522,1525,1528],{},[46,1511,1512],{},"Páginas dinâmicas de coleções/categorias com filtros, ordenação e paginação",[46,1514,1515],{},"Páginas de produto com galeria de mídia, variantes, guia de tamanho, recomendações e conteúdo rico",[46,1517,1518],{},"Carrinho lateral e gestão completa de itens (adicionar/atualizar/remover)",[46,1520,1521],{},"Fluxos de autenticação: cadastro, login, recuperação e redefinição de senha",[46,1523,1524],{},"Área de conta: contexto do cliente, pedidos, endereços salvos (adicionar/editar/excluir + endereço padrão)",[46,1526,1527],{},"Busca preditiva e busca completa",[46,1529,1530],{},"Comportamento de storefront orientado por localização (país/idioma/moeda)",[230,1532,1534],{"id":1533},"camada-de-servidor-modular-para-shopify","Camada de Servidor Modular para Shopify",[20,1536,1537,1538,79,1541,79,1544,79,1547,79,1550,79,1553,1556],{},"Eu implementei um proxy server-side e organizei as operações por domínio (",[771,1539,1540],{},"cart",[771,1542,1543],{},"customer",[771,1545,1546],{},"product",[771,1548,1549],{},"collection",[771,1551,1552],{},"search",[771,1554,1555],{},"localization","), com operações GraphQL tipadas e fragments reutilizáveis.",[20,1558,1559],{},"Essa estrutura mantém o frontend limpo, protege credenciais e acelera desenvolvimento com menos risco.",[15,1561,1563],{"id":1562},"soluções-de-engenharia-que-deram-estabilidade","Soluções de Engenharia Que Deram Estabilidade",[230,1565,1567],{"id":1566},"_1-fluxo-graphql-tipado","1) Fluxo GraphQL Tipado",[43,1569,1570,1573,1576],{},[46,1571,1572],{},"Tipos TypeScript gerados por codegen para queries e mutations",[46,1574,1575],{},"Wrappers de operações tipadas por domínio de negócio",[46,1577,1578],{},"Refactors mais seguros e menos surpresas em runtime",[230,1580,1582],{"id":1581},"_2-hardening-das-apis-de-integração","2) Hardening das APIs de Integração",[43,1584,1585,1588,1595],{},[46,1586,1587],{},"Validação de payload no backend",[46,1589,1590,1591,1594],{},"Limite de tamanho de requisição (",[771,1592,1593],{},"content-length",")",[46,1596,1597],{},"Rate limiting em memória por namespace/IP",[20,1599,1600],{},"Com isso, reduzi risco nas integrações externas (Shopify/Klaviyo) e aumentei resiliência contra tráfego inválido ou abusivo.",[230,1602,1604],{"id":1603},"_3-decisões-orientadas-à-performance","3) Decisões Orientadas à Performance",[43,1606,1607,1610,1613,1616],{},[46,1608,1609],{},"Otimização de imagens com Nuxt Image e formatos modernos",[46,1611,1612],{},"Bootstrap do app sem bloqueio da renderização inicial",[46,1614,1615],{},"Cache GraphQL com estratégia limitada (TTL + comportamento LRU)",[46,1617,1618],{},"Inicialização adiada de analytics/lenis para não competir com o caminho crítico de render",[230,1620,1622],{"id":1621},"_4-base-de-seo-para-e-commerce","4) Base de SEO para E-commerce",[43,1624,1625,1628,1631,1641],{},[46,1626,1627],{},"URLs canônicas",[46,1629,1630],{},"Metadados Open Graph e Twitter nas páginas-chave",[46,1632,1633,1636,1637,1640],{},[771,1634,1635],{},"runtimeConfig"," para ",[771,1638,1639],{},"siteUrl"," por ambiente",[46,1642,1643],{},"Melhor indexação para páginas de produto, coleção e busca",[230,1645,1647],{"id":1646},"_5-qualidade-e-manutenibilidade","5) Qualidade e Manutenibilidade",[43,1649,1650,1653,1659],{},[46,1651,1652],{},"Lint, type-check do Nuxt e testes unitários como gates de qualidade (incluindo workflow de CI)",[46,1654,1655,1656],{},"Helpers de erro tipados em vez de tratamento amplo com ",[771,1657,1658],{},"any",[46,1660,1661],{},"Roadmap técnico executado em commits incrementais",[15,1663,1665],{"id":1664},"história-de-entrega-do-visual-ao-hardening-de-produção","História de Entrega (Do Visual ao Hardening de Produção)",[20,1667,1668],{},"Uma parte importante desse projeto foi a evolução por etapas:",[1670,1671,1672,1678,1684,1690],"ol",{},[46,1673,1674,1677],{},[24,1675,1676],{},"Construção visual e UX"," (nova interface, melhorias mobile, experiência mais rica em produto/coleção)",[46,1679,1680,1683],{},[24,1681,1682],{},"Core de e-commerce"," (carrinho, auth, conta, filtros, busca, localização, Klaviyo)",[46,1685,1686,1689],{},[24,1687,1688],{},"Hardening técnico"," (unificação de analytics, segurança de proxy, testes + CI, tipagem, cache, SEO, runtime config)",[46,1691,1692,1695],{},[24,1693,1694],{},"Estabilização final"," (limpeza de lint/typecheck e consistência operacional)",[20,1697,1698],{},"Esse é exatamente o modelo que eu aplico em projetos freelance de e-commerce: velocidade na iteração inicial e, em seguida, hardening sistemático até a aplicação ficar confiável.",[15,1700,1115],{"id":1114},[20,1702,1703],{},"A CENAS foi construída com linguagem visual intencional:",[43,1705,1706,1709,1712,1715],{},[46,1707,1708],{},"Tipografia editorial marcante",[46,1710,1711],{},"Interações customizadas no hero e nas categorias",[46,1713,1714],{},"Motion/transições a favor da marca sem prejudicar clareza de UX",[46,1716,1717],{},"Responsividade pensada para jornada de compra em mobile e desktop",[20,1719,1720],{},"Resultado: uma storefront com identidade forte e, ao mesmo tempo, prática e orientada à conversão.",[15,1722,1724],{"id":1723},"por-que-esse-projeto-é-relevante-no-meu-portfólio","Por Que Esse Projeto é Relevante no Meu Portfólio",[20,1726,1727],{},"Este case comprova que eu entrego:",[43,1729,1730,1735,1741,1747],{},[46,1731,1732],{},[24,1733,1734],{},"Implementação completa de headless commerce",[46,1736,1737,1740],{},[24,1738,1739],{},"Arquitetura Nuxt + Shopify"," pronta para produção",[46,1742,1743,1746],{},[24,1744,1745],{},"Performance, SEO e hardening de integrações"," além da camada visual",[46,1748,1749,1752],{},[24,1750,1751],{},"Sustentação de longo prazo"," com tipagem forte e padrões de engenharia",[15,1754,1260],{"id":1259},[43,1756,1757,1760,1763,1766,1769,1772,1775,1778,1781,1784,1787],{},[46,1758,1759],{},"Desenvolvimento Headless Shopify",[46,1761,1762],{},"Desenvolvimento de e-commerce com Nuxt.js",[46,1764,1765],{},"Integração Shopify Storefront API",[46,1767,1768],{},"Arquitetura de storefront customizada",[46,1770,1771],{},"Builds inspiradas em Shopify Hydrogen com Nuxt",[46,1773,1774],{},"Otimização de performance para e-commerce",[46,1776,1777],{},"SEO técnico para storefront headless",[46,1779,1780],{},"Engenharia de frontend orientada à conversão",[46,1782,1783],{},"Arquitetura GraphQL + TypeScript para e-commerce",[46,1785,1786],{},"Integração Klaviyo (newsletter / back-in-stock)",[46,1788,1789],{},"Setup de qualidade com CI/CD para times de frontend",[1297,1791],{},[20,1793,1794,1795,1798],{},"Se você precisa de uma ",[24,1796,1797],{},"storefront Shopify headless"," com identidade de marca forte e engenharia sólida, esse é o tipo de projeto que eu entrego.",{"title":1307,"searchDepth":1308,"depth":1308,"links":1800},[1801,1802,1803,1804,1808,1815,1816,1817,1818],{"id":17,"depth":1308,"text":18},{"id":90,"depth":1308,"text":91},{"id":126,"depth":1308,"text":127},{"id":1502,"depth":1308,"text":1503,"children":1805},[1806,1807],{"id":1506,"depth":1317,"text":1507},{"id":1533,"depth":1317,"text":1534},{"id":1562,"depth":1308,"text":1563,"children":1809},[1810,1811,1812,1813,1814],{"id":1566,"depth":1317,"text":1567},{"id":1581,"depth":1317,"text":1582},{"id":1603,"depth":1317,"text":1604},{"id":1621,"depth":1317,"text":1622},{"id":1646,"depth":1317,"text":1647},{"id":1664,"depth":1308,"text":1665},{"id":1114,"depth":1308,"text":1115},{"id":1723,"depth":1308,"text":1724},{"id":1259,"depth":1308,"text":1260},"Headless Shopify storefront em Nuxt 4 com arquitetura Nitrogen, foco em performance, SEO técnico e engenharia escalável.",{"category":1821,"image":1822,"projectUrl":1823,"stack":1824,"tags":1825,"date":1832,"featured":1372},"Code","/images/works/cenas.png","https://cenas.com.br/","Nuxt 4 + Shopify Storefront API + TypeScript + GraphQL",[1398,1826,1827,1828,1829,1830,1831],"Shopify","Headless Commerce","GraphQL","TypeScript","SEO","Performance","2026-03-01","/portfolio/cenas-nitrogen",{"title":1381,"description":1819},"portfolio/cenas-nitrogen.pt-BR","SnTvEVoACvntdm5hO0xGPbu0oVWI0KP8ISSllNMj3lQ","cenas-nitrogen",[1398,1826,1827,1828,1829,1830,1831],{"id":1840,"title":1841,"body":1842,"description":2056,"extension":1355,"meta":2057,"navigation":1372,"path":2072,"seo":2073,"stem":2074,"__hash__":2075,"baseSlug":2076,"localeTag":1377,"image":2059,"category":2058,"stack":2061,"tags":2077,"projectUrl":2060,"date":2009,"featured":1372},"portfolio/portfolio/email-platform-lab.pt-BR.md","E-mail Platform Lab",{"type":8,"value":1843,"toc":2041},[1844,1848,1855,1859,1865,1879,1883,1890,1914,1921,1942,1949,1966,1970,1987,1991,2011,2015,2018],[15,1845,1847],{"id":1846},"resumo-do-projeto","Resumo do Projeto",[20,1849,1850,1851,1854],{},"Email Platform Lab é uma plataforma de e-mail em estilo de produção que construí de ponta a ponta para demonstrar templating avançado e operações de campanhas.",[1852,1853],"br",{},"\nO projeto evoluiu de um exercício de template estático para um sistema completo de workflow, com proteções de renderização, checkpoints de QA e ferramentas internas para aprovação de campanhas.",[15,1856,1858],{"id":1857},"por-que-eu-construí","Por Que Eu Construí",[20,1860,1861,1862,1864],{},"Eu queria um projeto de portfólio que comprovasse entrega prática, não apenas acabamento visual.",[1852,1863],{},"\nE-mail é um canal de alta fricção, no qual pequenos erros de HTML/CSS podem quebrar comunicações críticas para o negócio, então construí este laboratório para demonstrar:",[43,1866,1867,1870,1873,1876],{},[46,1868,1869],{},"desenvolvimento robusto de templates responsivos para e-mail;",[46,1871,1872],{},"engenharia de compatibilidade entre clientes de e-mail;",[46,1874,1875],{},"automação de fluxo para operações de marketing;",[46,1877,1878],{},"arquitetura sustentável para iteração rápida.",[15,1880,1882],{"id":1881},"estrutura-da-plataforma","Estrutura da Plataforma",[230,1884,1886,1887,1594],{"id":1885},"_1-email-lab-appsemail-lab","1) Email Lab (",[771,1888,1889],{},"apps/email-lab",[43,1891,1892,1895,1908,1911],{},[46,1893,1894],{},"Templates HTML artesanais para casos de uso de newsletter, promoções e transacionais.",[46,1896,1897,1898,79,1901,79,1904,1907],{},"Partials em estilo de componentes (",[771,1899,1900],{},"header",[771,1902,1903],{},"button",[771,1905,1906],{},"footer",") com hidratação de tokens.",[46,1909,1910],{},"Pipeline de build que sanitiza a saída, compila templates e gera um índice de preview.",[46,1912,1913],{},"Monitoramento de tamanho de payload para evitar clipping no Gmail e melhorar a prontidão de entregabilidade.",[230,1915,1917,1918,1594],{"id":1916},"_2-portal-growth-admin-appsadmin-portal","2) Portal Growth Admin (",[771,1919,1920],{},"apps/admin-portal",[43,1922,1923,1926,1936,1939],{},[46,1924,1925],{},"Interface em React + TypeScript para gerenciar status de campanhas e fluxo de revisão.",[46,1927,1928,1929],{},"Modelo de estado com Zustand e transições protegidas:\n",[43,1930,1931],{},[46,1932,1933],{},[771,1934,1935],{},"Draft -> In Review -> Approved/Rejected",[46,1937,1938],{},"Permissões por papel e eventos de auditoria para rastreabilidade.",[46,1940,1941],{},"Validação de QA e conteúdo antes da aprovação para reduzir erros de publicação.",[230,1943,1945,1946,1594],{"id":1944},"_3-construtor-visual-de-e-mail-appsemail-builder","3) Construtor Visual de E-mail (",[771,1947,1948],{},"apps/email-builder",[43,1950,1951,1957,1960,1963],{},[46,1952,1953,1954,31],{},"Editor drag-and-drop em Next.js + React com ",[771,1955,1956],{},"@dnd-kit",[46,1958,1959],{},"Composição baseada em blocos para seções reutilizáveis de e-mail.",[46,1961,1962],{},"Controles de inspeção para espaçamento, tipografia e sobrescritas de conteúdo.",[46,1964,1965],{},"Importação/exportação em JSON para conectar prototipação visual e templates de produção.",[15,1967,1969],{"id":1968},"decisões-técnicas-e-soluções","Decisões Técnicas e Soluções",[43,1971,1972,1975,1978,1981,1984],{},[46,1973,1974],{},"Implementei comportamento bulletproof para CTAs com fallback em VML para Outlook e links padrão para clientes modernos.",[46,1976,1977],{},"Adicionei regras de sanitização para normalizar padrões problemáticos de markup e reduzir regressões de renderização.",[46,1979,1980],{},"Incluí padrões de resiliência para dark mode, lidando com inversão forçada e troca de logotipo com segurança.",[46,1982,1983],{},"Criei templates de teste de acessibilidade/localização para validar textos longos, RTL e estrutura semântica.",[46,1985,1986],{},"Montei um checklist de QA realista considerando comportamento em Apple Mail, Gmail, Outlook e Yahoo.",[15,1988,1990],{"id":1989},"linha-do-tempo-de-build-a-partir-do-git-history","Linha do Tempo de Build (a partir do Git History)",[1670,1992,1993,1999,2005],{},[46,1994,1995,1998],{},[771,1996,1997],{},"2026-02-09",": scaffold inicial do email lab orientado por curso e workflow de administração.",[46,2000,2001,2004],{},[771,2002,2003],{},"2026-02-22",": lançamento do construtor visual de e-mail e expansão da documentação.",[46,2006,2007,2010],{},[771,2008,2009],{},"2026-02-23",": refinamentos de nomenclatura e estrutura após estabilização.",[15,2012,2014],{"id":2013},"resultados-relevantes-para-freelance","Resultados Relevantes para Freelance",[20,2016,2017],{},"Este projeto demonstra as capacidades exatas necessárias para engenharia moderna de e-mail em contexto freelance:",[43,2019,2020,2023,2026,2029,2032,2035,2038],{},[46,2021,2022],{},"codificação de e-mails HTML responsivos;",[46,2024,2025],{},"sistemas de templates para newsletters;",[46,2027,2028],{},"implementação de e-mails transacionais;",[46,2030,2031],{},"correções de compatibilidade para Outlook/Gmail;",[46,2033,2034],{},"desenho de processo de QA de e-mail;",[46,2036,2037],{},"ferramentas internas para times de marketing e CRM;",[46,2039,2040],{},"ownership full-stack do produto, da arquitetura à qualidade de entrega.",{"title":1307,"searchDepth":1308,"depth":1308,"links":2042},[2043,2044,2045,2053,2054,2055],{"id":1846,"depth":1308,"text":1847},{"id":1857,"depth":1308,"text":1858},{"id":1881,"depth":1308,"text":1882,"children":2046},[2047,2049,2051],{"id":1885,"depth":1317,"text":2048},"1) Email Lab (apps/email-lab)",{"id":1916,"depth":1317,"text":2050},"2) Portal Growth Admin (apps/admin-portal)",{"id":1944,"depth":1317,"text":2052},"3) Construtor Visual de E-mail (apps/email-builder)",{"id":1968,"depth":1308,"text":1969},{"id":1989,"depth":1308,"text":1990},{"id":2013,"depth":1308,"text":2014},"Um laboratório completo de engenharia de e-mail com templates artesanais, portal de aprovação e construtor visual por blocos.",{"category":2058,"image":2059,"projectUrl":2060,"stack":2061,"tags":2062,"date":2009,"featured":1372},"Aplicação Full-Stack","/images/works/work8.jpg","https://github.com/alefb/kake/tree/main","Node.js, React, TypeScript, Next.js, Vite, Tailwind CSS, Zustand, dnd-kit",[2063,2064,2065,2066,2067,2068,1829,2069,2070,2071],"Desenvolvimento de E-mail","Templates HTML de E-mail","Construtor de Newsletter","E-mails Transacionais","React","Next.js","Tailwind CSS","Fluxo de QA","CI/CD","/portfolio/email-platform-lab",{"title":1841,"description":2056},"portfolio/email-platform-lab.pt-BR","rKYSyS9aHg77uKz3vPgolbAhoXpuGI1xCmBP-B40uPs","email-platform-lab",[2063,2064,2065,2066,2067,2068,1829,2069,2070,2071],1773091123679]