CM Imóveis – Full-Stack & CRM
Portal imobiliário completo com busca inteligente, painel CMS/CRM privado, SEO dinâmico via Open Graph e suporte nativo a Dark Mode — tudo serverless e proprietário.
Resumo em 30 segundos
- Senior Design Engineer
- Meu papel
- abr–ago/2026
- Período
- Sozinho, do design ao deploy
- Equipe
- páginas
- 42
- componentes
- 104
- rotas de API
- 11
- commits
- 210
Identidade visual
Logo e identidade criados por mim
Logo, paleta e tipografia da CM Imóveis, criados junto com o portal. As letras do logo são Helvetica Neue Bold convertida em curvas.
Logo
Fundo claro
Fundo escuroConceito
As iniciais CM em letras grossas e geométricas: o C leva um degradê de âmbar a violeta, que dá calor à marca, e o M fica em grafite, sólido. Embaixo, IMÓVEIS em caixa alta espaçada. O mesmo degradê preenche a casa do favicon.
Criação: Estevão Marques · 2026
Paleta · clique para copiar
Títulos
Imóveis
Playfair Display
Display e títulos, com itálico nos destaques.
Interface e texto
Apartamento 3 quartos
Montserrat
Botões, filtros, cartões de imóvel e textos.
Variações do logo
Colorido Branco 
Ícone (casa)
Onde a marca aparece
Favicon e ícone do app
A casa no degradê da marca, sobre grafite, na aba do navegador e na tela inicial do celular.
Topo do site e login do painel
Logo colorido no cabeçalho do portal e na entrada do painel da corretora.
Marca d’água nas fotos
O painel aplica o logo nas fotos dos imóveis.
Vídeos dos imóveis
A versão branca assina os vídeos montados pelo painel.
Faça
- Use a versão colorida sobre fundos brancos e claros
- Use a versão branca sobre fundos escuros e fotos
- Mantenha o espaço de proteção ao redor da logo
- Use o gradiente apenas nos elementos definidos
- Respeite o tamanho mínimo de 24px de altura
- Use Playfair Display para títulos e Montserrat para UI
Evite
- Não altere as cores originais da logo
- Não distorça, rotacione ou aplique efeitos
- Não use sobre fundos com baixo contraste
- Não use a versão colorida sobre fundos coloridos
- Não adicione sombras ou bordas à logo
O Desafio
A corretora Cassia Marques precisava de mais do que uma vitrine virtual; ela precisava de uma máquina de vendas autônoma. O desafio era criar uma experiência de alto padrão para o cliente final (focada em performance e SEO), enquanto construíamos um sistema robusto e seguro de gestão (CMS/CRM) para a corretora administrar seus imóveis e leads sem depender de terceiros ou mensalidades de plataformas genéricas.
A Solução
Desenvolvi um portal imobiliário completo utilizando as tecnologias mais modernas do mercado. A interface foi projetada com foco em conversão e acessibilidade, enquanto o back-end foi estruturado em uma arquitetura Serverless para garantir velocidade extrema e segurança de dados.
Painel próprio
Painel feito para CM Imóveis
Cada lead, visita e clique fica ligado ao imóvel e ao corretor, e o corretor vê só o que é dele.
NecessidadeSaber quais imóveis geram interesse e quais estão parados.
O que foi feitoDesempenho por imóvel: visualizações, cliques no WhatsApp, leads e visitas, com o corretor responsável e busca por imóvel ou corretor.
Dados fictíciosNecessidadeOs contatos chegavam de vários imóveis e corretores, sem acompanhamento.
O que foi feitoCRM de leads com etapas (novo, em contato, convertido, perdido, spam) e gráficos. O corretor vê só os leads dos seus imóveis.
Dados fictíciosNecessidadeOrganizar as visitas da equipe aos imóveis.
O que foi feitoPróximas visitas em cartões com o imóvel, o horário e o contato, e o histórico das visitas feitas com a etapa de cada lead.
Dados fictíciosNecessidadeCadastrar e ordenar imóveis com as fotos protegidas.
O que foi feitoCadastro com corretor responsável, ordem de exibição, etiqueta, mapa e marca d’água aplicada em lote nas fotos.
Dados fictíciosNo celular
NecessidadeO corretor consulta as visitas entre um imóvel e outro.
O que foi feitoAs próximas visitas no celular, com o telefone do cliente a um toque.
Dados fictíciosDo anúncio ao contrato assinado
Leads (CRM)
Etapas novo, em contato, convertido, perdido e spam, com gráficos por mês e por status.
Visitas
Próximas visitas e histórico, com o imóvel, o horário e o contato.
Desempenho por imóvel
Visualizações, cliques no WhatsApp, leads e visitas de cada imóvel e de cada corretor.
Contratos
Contratos com modelos, vendedores, versões, comentários e aviso de prazos por e-mail.
Marketing
Placas com QR Code rastreável, vídeos, posts e newsletter de notícias do mercado.
Acesso e auditoria
Super admin, admin e corretor com permissões diferentes, e registro das alterações.
Design no Figma
Do design system ao protótipo
Tecnologia
A Stack Tecnológica
Next.js 14
Framework de alta performance que garante URLs indexáveis pelo Google (SEO), renderização SSR e tempos de carregamento instantâneos.
Google Auth
Auth
Framer Motion
Motor de micro-animações avançado que adiciona fluidez, dinamicidade e um toque premium a cada interação do usuário.
Vercel
Infraestrutura em nuvem global na borda (Edge Network). Garante que o site carregue em milissegundos para o usuário, independente da localização.
React
Arquitetura baseada em componentes reativos, proporcionando uma experiência de usuário (UX) fluida e interativa, sem recarregamentos de página.
TypeScript
Adiciona tipagem estática rigorosa ao código, prevenindo erros em tempo de execução e garantindo estabilidade corporativa à aplicação.
Tailwind CSS
Design system construído sob medida. Garante exclusividade visual, consistência na interface e tamanho de arquivo otimizado para velocidade.
Lucide
UI / CSS
NextAuth
Auth
Neon Postgres
Banco de Dados
Resend
Mídia / Email
Google Cloud
Hosting
Anthropic
IA / ML
Figma
UI / CSS
Engenharia
Destaques Técnicos
Engenharia de Busca Inteligente
Implementação de um Autocomplete dinâmico e interconectado ao banco de dados, garantindo que os usuários filtrem apenas por localizações com estoque real, reduzindo a taxa de rejeição.
Painel Administrativo Privado
Criação de um CMS sob medida protegido por autenticação do Google, permitindo o cadastro de imóveis, upload de fotos (via Google Cloud) e gestão de contatos (CRM) em tempo real.
Performance & SEO Dinâmico
Geração automática de Open Graph Tags (meta tags) baseadas nos dados do servidor. Cada imóvel compartilhado no WhatsApp gera um card visual imersivo e instantâneo.
UI/UX Premium
Suporte nativo a Dark Mode (Next-Themes) com transições fluidas e utilização de Glassmorphism para destacar formulários sem ocultar as imagens de alto padrão das propriedades.
O Impacto
A CM Imóveis agora possui uma plataforma proprietária, escalável e otimizada para o Google, proporcionando total autonomia operacional à corretora e uma experiência imersiva aos seus clientes.
Próximo passo
Quer um portal assim para a sua imobiliária?
Criamos portais com busca, painel próprio e CRM, sem depender de plataformas genéricas.