Documentação Técnica

Arquitetura do Site
Guia Boulevard Marville

Documentação completa da estrutura, banco de dados e componentes do site de mobilização de proprietários.

18
Seções Públicas
6
Seções Admin
11
Tabelas no BD
12
Componentes
Estrutura do Site

18 Seções da Página Principal

Página single-page com navegação sticky e scroll-spy. Cada seção cumpre um papel específico na jornada de mobilização.

1

Hero

Foto aérea/mapa como background, contador automático de dias de abandono, localização (750m do mar), badge de convite.

Impacto Visual
2

Situação Atual

Barra de progresso de adesões (X/102), quadro de obras pendentes com percentuais, números-chave, contador de visualizações.

Dados em Tempo Real
3

Galeria Antes/Depois

3 pares comparativos: ruas, área de lazer e portal. Projeto prometido pela loteadora vs realidade atual do abandono.

Prova Visual
4

Fotos Reais

Mosaico de fotos datadas do local: portal, ruas, lotes, muro externo, portão enferrujado. Lightbox para ampliação.

Documentação
5

Associação

Explicação da solução coletiva. Tabela comparativa COM vs SEM associação. Ilustração estilizada.

Solução
6

Base Legal

Cards com legislação (Lei 6.766/79, Lei 4.591/64, Lei 13.465/2017), doutrina e jurisprudência (Tema 492 STF).

Credibilidade
7

Custos

3 cards: custo estimado por lote, taxa mensal de manutenção, valorização esperada. Notas de transparência.

Transparência
8

Convite (Script)

Roteiro de 5 etapas para convidar proprietários. Linguagem inclusiva, empática e prática.

Ferramenta
9

FAQ

Accordion com 8+ perguntas frequentes: obrigatoriedade, dívidas, custos, Prefeitura, tentativas anteriores.

Interativo
10

Diagramas

Fluxograma de abordagem, mapa mental da estratégia, timeline do processo judicial. Gerados via Mermaid.

Visual
11

Etapas e Cronograma

17 etapas em 2 partes (abas interativas). Parte 1: Constituição (8 etapas). Parte 2: Retomada (9 etapas).

Planejamento
12

Progresso

Timeline interativa com 4 fases: Mobilização, Constituição, Jurídico, Obras. Barras de progresso atualizáveis.

Acompanhamento
13

Depoimentos

Grid de depoimentos aprovados pelo admin. Formulário público para envio. Moderação antes da publicação.

Prova Social
14

Documentos

Repositório com filtros por categoria (ata, notificação, contrato, foto, outro). Upload via S3.

Repositório
15

Votação

Sistema de votação para data da assembleia. Identificação por CPF (voto único). Barras de resultado em tempo real.

Democrático
16

Mapa Interativo

Google Maps com marcadores de lotes, áreas comuns, portal, APP. Visualização espacial do empreendimento.

Geolocalização
17

Adesão

Formulário público com máscaras de CPF e telefone. Campos: nome, CPF, email, telefone, lote, forma de aquisição.

Formulário
18

Contato

Formulário 'Fale Conosco' com 7 assuntos pré-definidos. Notificação automática ao admin.

Canal Direto
Painel Administrativo

6 Seções de Gerenciamento

Acesso protegido via /admin com autenticação. Gerenciamento completo de todos os dados do site.

Registros de Adesão

  • Tabela completa com todos os registros
  • Filtros por forma de aquisição e assembleia
  • Busca textual por nome, CPF, lote
  • Exportação CSV para planilha
  • Contadores de totais e por categoria

Gerenciamento de Fases

  • Edição de status (pendente, em andamento, concluída)
  • Barra de progresso ajustável (0–100%)
  • Campo de notas/observações por fase
  • Refletido em tempo real na página pública

Gerenciamento de Depoimentos

  • Lista de depoimentos pendentes de aprovação
  • Aprovação/rejeição com um clique
  • Exclusão de depoimentos inadequados
  • Visualização do texto completo

Gerenciamento de Documentos

  • Upload de arquivos para S3
  • Categorização (ata, notificação, contrato, foto, outro)
  • Notificação opcional aos proprietários
  • Exclusão com confirmação

Gerenciamento de Votação

  • Criar/excluir opções de data e horário
  • Ativar/desativar votação
  • Visualizar votantes por opção
  • Resultados em tempo real

Gerenciamento de Mensagens

  • Indicador de mensagens não lidas
  • Expansão para ver detalhes completos
  • Resposta direta ao remetente
  • Exclusão de mensagens
Banco de Dados MySQL

11 Tabelas com Drizzle ORM

Schema completo com tipos, constraints e relacionamentos. Clique em cada tabela para expandir os campos.

Diagrama de Relacionamentos

documents.uploadedByusers.id
assembly_votes.optionIdassembly_options.id

Demais tabelas são independentes (sem FK explícita)

Tecnologias

Stack Técnica

Arquitetura full-stack moderna com tipagem end-to-end via tRPC.

React 19

Frontend com hooks, contexts e componentes funcionais. Roteamento via Wouter.

Tailwind CSS 4

Estilização utility-first com design tokens e tema customizado.

tRPC 11

RPC tipado end-to-end. Procedures públicas e protegidas. SuperJSON.

MySQL + Drizzle ORM

Schema-first com migrações automáticas. 11 tabelas.

shadcn/ui

Componentes acessíveis e customizáveis. Radix UI primitives.

Manus OAuth + S3

Autenticação OAuth integrada. Storage S3 para documentos.

Componentes React

12 Componentes Reutilizáveis

Componentes especializados que encapsulam lógica de negócio e interação com o backend.

DaysSinceAbandonmentContador automático de dias desde a data de abandono
FAQItemAccordion com pergunta/resposta e animação
ScriptBlockBloco numerado com título e citação em blockquote
AdhesionFormSectionFormulário com validação, máscaras CPF/telefone, notificação
ContactFormSectionFormulário com dropdown de 7 assuntos e notificação
WhatsAppShareButtonBotão flutuante com 2 tipos de mensagem personalizadas
PhasesProgressSectionTimeline com 4 fases, barras de progresso e status
EtapasCronogramaSectionAbas Parte 1/2, timeline vertical com ícones e períodos
TestimonialsSectionGrid de depoimentos aprovados + formulário com moderação
DocumentsSectionRepositório com filtros por categoria e cards de download
VotingSectionVotação por CPF com barras de resultado em tempo real
MapSectionGoogle Maps com marcadores customizados de lotes e áreas
Design System

Paleta de Cores

Cores escolhidas para transmitir confiança, urgência e transparência.

Teal
#0d9488
Principal, CTAs
Amber
#f59e0b
Alertas, destaques
Rich Black
#0a0f14
Hero, contraste
Mint
#99f6e4
Acentos positivos
Background
#f8fafc
Fundo principal