Case study / Em produção
Caminhos de Mambucaba
Plataforma territorial publicada que reúne experiências, participação comunitária e dados do Observatório Mambucaba.
Problema e usuário
Experiências, iniciativas, demandas comunitárias e informações públicas de Mambucaba estavam dispersas em canais diferentes.
Meu papel
Concepção do produto, interface, modelagem do conteúdo e implementação full-stack.
Escopo entregue
- Experiências, mapa, hospedagem e roteiro personalizado
- Cadastro de iniciativas e demandas com protocolo
- Observatório, biblioteca e painéis públicos
- SEO técnico e redirecionamentos do site legado
Restrições
- Começar com escopo de MVP
- Usar dados e imagens reais do projeto
- Manter publicação simples
Arquitetura e fluxo de dados
Next.js 16 e React 19 renderizam páginas e APIs; Supabase/PostgreSQL persiste cadastros e demandas no servidor; Leaflet sustenta os mapas e a Vercel publica e monitora a aplicação.
Decisões e trade-offs
Priorizei descoberta direta, privacidade dos formulários e uma estrutura de conteúdo capaz de crescer sem esconder o território atrás de efeitos visuais.
Testes e validações
Lint e build de produção, uso dos fluxos publicados e revisão dos principais caminhos de navegação.
O que existe hoje
MVP publicado em caminhosdemambucaba.live.
Limitações conhecidas
- O produto depende da evolução e curadoria do conteúdo do território.
Próximas etapas
- Ampliar o catálogo
- Aprofundar recursos de participação comunitária
Formação relacionada
- Frontend - Projeto Final ↗
Composição de interfaces React aplicada à descoberta de experiências e aos formulários.
- Segurança e Boas Práticas em Projetos Feitos com Vibe Code ↗
Formação complementar em segurança relacionada à revisão de entradas e separação entre cliente e servidor.
Stack
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS
- Leaflet
- Supabase/PostgreSQL
- Vercel
Ler documentação completa
Caminhos de Mambucaba
Plataforma territorial para descoberta de experiências, participação comunitária e acesso organizado às iniciativas do Observatório Mambucaba.
Produção: caminhosdemambucaba.live
Funcionalidades do MVP
- experiências, mapa territorial, hospedagem e roteiro personalizado;
- Cadastro Único de iniciativas e contribuições;
- registro de demandas com protocolo, texto técnico e exportação em texto, JSON e PDF;
- Observatório com biblioteca, Radar, saúde, controle social FEAM e painel orçamentário;
- persistência privada dos cadastros e demandas no Supabase;
- páginas institucionais, contato, termos e políticas;
- SEO técnico com metadados, Open Graph, JSON-LD, sitemap, robots, manifesto e favicon;
- redirecionamentos das principais URLs legadas do WordPress.
Consulte docs/MVP.md para o inventário completo, limitações e próximos passos.
Tecnologias
- Next.js 16, React 19 e TypeScript;
- Tailwind CSS e componentes Base UI;
- Leaflet para mapas;
- Supabase/PostgreSQL para persistência;
- Vercel para build, deploy e Analytics.
Desenvolvimento local
Requisitos: Node.js 20 ou superior e um projeto Supabase.
npm install
cp .env.example .env.local
npm run dev
Acesse http://localhost:3000. Nunca exponha a chave SUPABASE_SERVICE_ROLE_KEY em variáveis com prefixo NEXT_PUBLIC_.
Variáveis de ambiente
| Variável | Obrigatória | Uso |
|---|---|---|
SUPABASE_URL | Sim | URL do projeto Supabase |
SUPABASE_SERVICE_ROLE_KEY | Sim | Escrita segura executada somente no servidor |
NEXT_PUBLIC_SITE_URL | Recomendada | URL canônica do SEO; em produção use o domínio público |
O banco é preparado pela migration supabase/migrations/20260801000000_create_intake_tables.sql.
Verificação
Antes de publicar:
npm run lint
npm run build
Pushes na branch main geram deploy de produção pela integração GitHub–Vercel.
Estrutura principal
app/ rotas, páginas, APIs e arquivos técnicos de SEO
components/ componentes de interface e formulários
lib/ dados, validações, cliente Supabase e configurações
supabase/ migrations do banco
docs/ documentação funcional e operacional
public/ imagens e arquivos estáticos
Privacidade
Os formulários coletam dados pessoais com consentimento. As tabelas possuem RLS habilitada e não concedem acesso direto aos papéis públicos do Supabase. A chave privilegiada existe somente no servidor.
Estado do projeto
MVP funcional e publicado. Os itens posteriores ao MVP estão documentados em docs/MVP.md.