Pular para o conteúdo
--:-- BRT

Sites · Site imobiliário e painel

Moriá Imóveis e Construções

A Moriá atua em São Pedro da Aldeia, na Região dos Lagos, com construção, imóveis e intermediação. Eu fiz o site, a área onde o cliente acompanha a obra e o painel da equipe.

Cliente
Moriá Imóveis e Construções
Ano
2026
Meu papel
Site, área do cliente e painel da equipe
Stack
React, TypeScript, tRPC, Supabase (banco, login e arquivos) e Vercel
Estado
No ar
Primeira tela do site da Moriá, com vista aérea de um loteamento, o título Não entregamos metros quadrados. Entregamos futuro. e o botão Área do cliente no menu
Primeira tela do site, com a entrada para a área do cliente no menu.

01 / Ponto de partida

Comprar ou construir é decisão grande.

No site da Moriá, o método abre com uma frase: comprar ou construir um imóvel exige confiança, e por isso é preciso tornar visível o que costuma ficar escondido. Eu tomei a frase como briefing. O trabalho ficou em duas partes: a página pública e uma área onde o cliente vê a obra depois de fechar.

02 / Decisão

Uma página, cinco seções.

A página pública corre em seções: essência, seleção de imóveis, método, galeria de obra e contato. O menu leva a cada uma delas, e a entrada da área do cliente fica no cabeçalho e no rodapé, a um clique de qualquer ponto. A fonte dos títulos é a DM Serif Display. O texto corrido é Manrope.

Seção Nossa essência do site da Moriá, em fundo marfim, com o título Da fundação ao patrimônio e três indicadores
Seção Nossa essência: fundo marfim, título em serifa e o menu que leva às seções da página.

03 / Estrutura

A equipe cadastra. O cliente só vê o que é dele.

O login é um só, e o perfil decide o destino: administrador vai para o painel, cliente vai para a área do cliente. O cliente enxerga apenas as obras ligadas ao cadastro dele. A equipe tem três níveis de permissão: leitura, edição e gestão. O convite de acesso sai do painel, por e-mail, e o cliente define a própria senha.

Visão geral do painel da Moriá, com o menu lateral e quatro indicadores: clientes ativos, obras em andamento, imóveis publicados e pendências
Visão geral do painel da equipe, com filtro de período nos indicadores. Dados de demonstração.

04 / Entrega

O painel organiza a operação.

No painel ficam clientes, obras, imóveis, documentos, fotos e aprovações. Cada obra tem situação, percentual de andamento, gestor, equipe e um diário de registros. O cadastro de imóveis tem quatro situações: rascunho, publicado, vendido e arquivado. A visão geral mostra os indicadores com filtro de período, de 7 dias a todo o histórico.

Lista de obras do painel da Moriá, com situação, percentual de andamento, cliente, gestor e equipe de cada obra
Obras e projetos: situação, andamento, cliente, gestor e equipe, com atalho para o diário. Dados de demonstração.

05 / Segurança

O arquivo só abre por link assinado.

Fotos e documentos da obra ficam no armazenamento do Supabase. O servidor só entrega um link de leitura assinado, que vale 5 minutos, a quem tem acesso à obra. O envio aceita JPG, PNG, WebP e PDF até 6 MB, e o servidor confere o conteúdo do arquivo, não só a extensão. O texto do diário passa por limpeza antes de ser salvo. As tabelas do banco têm RLS ativo, e o acesso passa só pelo servidor.

Área do cliente da Moriá, com o andamento da obra em 72%, uma aprovação aguardando decisão e as últimas atualizações do diário
Área do cliente: andamento da obra, decisões pendentes e últimas atualizações do diário. Dados de demonstração.

06 / Marca

Verde escuro e marfim, do site ao painel.

Usei a logo da Moriá e levei a mesma paleta para tudo: verde escuro, marfim e um marrom-terra nos destaques. O login, a área do cliente e o painel falam o mesmo idioma visual do site. No celular, a página pública e a área do cliente refazem o layout em uma coluna.

Site da Moriá no celular, com o título em quatro linhas sobre a vista aérea do loteamento
O site no celular.

O que foi entregue

Cada peça tem um trabalho.

  • 01

    Site público em seções

    Essência, seleção de imóveis, método, galeria de obra e contato, com menu fixo e a entrada da área do cliente sempre à vista.

  • 02

    Área do cliente

    Andamento da obra, diário, fotos, documentos e aprovações, só das obras ligadas ao cadastro de cada cliente.

  • 03

    Painel da equipe

    Clientes, obras, imóveis, documentos, fotos e aprovações num menu lateral, com indicadores por período.

  • 04

    Convite por e-mail

    A equipe convida o cliente pelo painel e ele define a própria senha.

  • 05

    Aprovações

    A equipe abre o pedido ligado a uma obra e registra a decisão: aprovado ou recusado.

  • 06

    Leitura por link temporário

    Fotos e documentos só abrem por link assinado, com validade de 5 minutos.

Telas

Telas do trabalho

Área do cliente da Moriá no celular, com o nome da obra, o andamento em 72% e o card de progresso
A área do cliente no celular. Dados de demonstração.

Em números

O trabalho em números

  • 5abas na área do cliente: visão geral, diário, fotos, documentos e aprovaçõesÁrea do cliente no ar, consultada em 07/10/2026
  • 6 MBtamanho máximo de cada arquivo enviado, em JPG, PNG, WebP ou PDFCódigo do projeto, módulo de armazenamento
  • 5 minde validade do link para abrir foto ou documentoCódigo do projeto, módulo de armazenamento
  • 9tabelas do banco com RLS ativo na auditoria da fase 09Adocs/security-audit-09a.md, no repositório do projeto

Escopo

O que saiu das minhas mãos.

  • Site público responsivo, com menu, seções e vídeo de abertura
  • Login único com destino por perfil: equipe ou cliente
  • Área do cliente: andamento, diário, fotos, documentos e aprovações
  • Painel da equipe: clientes, obras, imóveis, documentos, fotos e aprovações
  • Convite de acesso por e-mail e tela para o cliente definir a senha
  • Permissões da equipe em três níveis: leitura, edição e gestão
  • Envio de fotos e documentos, com leitura por link assinado e temporário
  • Banco no Supabase, com migrações versionadas e RLS ativo
  • Publicação em moria.audazone.com

Ficha e próximos passos

Serviço ligadoSistemas

Ver o site da Moriá

Próximo trabalho

Próximo trabalho

Quer um trabalho assim?

Me conta o problema. Eu respondo com a pergunta que precisa ser respondida primeiro.

Conte o que está travando