CM Imóveis – Full-Stack y CRM
Portal inmobiliario completo con búsqueda inteligente, panel CMS/CRM privado, SEO dinámico con Open Graph y modo oscuro nativo, todo serverless y propiedad del cliente.
En pocas palabras
- Senior Design Engineer
- Mi rol
- abr–ago 2026
- Período
- En solitario, del diseño al deploy
- Equipo
- páginas
- 42
- componentes
- 104
- rutas de API
- 11
- commits
- 210
Identidad visual
Logo e identidad creados por mí
Logo, paleta y tipografía de CM Imóveis, creados junto con el portal. Las letras del logo son Helvetica Neue Bold convertida en curvas.
Logo
Fondo claro
Fondo oscuroConcepto
Las iniciales CM en letras gruesas y geométricas: la C lleva un degradado de ámbar a violeta, que le da calidez a la marca, y la M queda en grafito, sólida. Debajo, IMÓVEIS en mayúsculas espaciadas. El mismo degradado rellena la casa del favicon.
Diseño: Estevão Marques · 2026
Paleta · haz clic para copiar
Títulos
Imóveis
Playfair Display
Display y títulos, con cursiva en los destacados.
Interfaz y texto
Apartamento 3 quartos
Montserrat
Botones, filtros, tarjetas de inmuebles y textos.
Variaciones del logo
Color Blanco 
Ícono (casa)
Dónde aparece la marca
Favicon e ícono de la app
La casa con el degradado de la marca, sobre grafito, en la pestaña del navegador y en la pantalla de inicio del móvil.
Cabecera del sitio y acceso al panel
Logo a color en la cabecera del portal y en la entrada del panel de la corredora.
Marca de agua en las fotos
El panel aplica el logo en las fotos de los inmuebles.
Videos de los inmuebles
La versión blanca firma los videos que arma el panel.
Sí
- Usa la versión a color sobre fondos blancos y claros
- Usa la versión blanca sobre fondos oscuros y fotos
- Respeta el área de protección alrededor del logo
- Usa el degradado solo en los elementos definidos
- Respeta la altura mínima de 24px
- Usa Playfair Display para títulos y Montserrat para la interfaz
No
- No cambies los colores originales del logo
- No lo deformes, lo rotes ni le apliques efectos
- No lo uses sobre fondos con poco contraste
- No uses la versión a color sobre fondos de color
- No agregues sombras ni bordes al logo
El desafío
La agente inmobiliaria Cassia Marques necesitaba más que una vitrina virtual; necesitaba una máquina de ventas autónoma. El desafío era crear una experiencia de alto nivel para el comprador (enfocada en rendimiento y SEO) y, al mismo tiempo, construir un sistema de gestión robusto y seguro (CMS/CRM) para que ella administrara sus inmuebles y leads sin depender de terceros ni de cuotas mensuales de plataformas genéricas.
La solución
Desarrollé un portal inmobiliario completo con las tecnologías más modernas del mercado. La interfaz se diseñó pensando en la conversión y la accesibilidad, y el back-end se estructuró sobre una arquitectura serverless para lograr máxima velocidad y seguridad de los datos.
Panel propio
Panel hecho para CM Imóveis
Cada lead, visita y clic queda ligado al inmueble y al agente, y cada agente ve solo lo suyo.
La necesidadSaber qué inmuebles generan interés y cuáles están parados.
Lo que se hizoRendimiento por inmueble: visualizaciones, clics en WhatsApp, leads y visitas, con el agente responsable y búsqueda por inmueble o agente.
Datos ficticiosLa necesidadLos contactos llegaban de muchos inmuebles y agentes, sin seguimiento.
Lo que se hizoCRM de leads con etapas (nuevo, en contacto, convertido, perdido, spam) y gráficos. Cada agente ve solo los leads de sus inmuebles.
Datos ficticiosLa necesidadOrganizar las visitas del equipo a los inmuebles.
Lo que se hizoPróximas visitas en tarjetas con el inmueble, el horario y el contacto, y el historial de visitas hechas con la etapa de cada lead.
Datos ficticiosLa necesidadRegistrar y ordenar inmuebles con las fotos protegidas.
Lo que se hizoRegistro con agente responsable, orden de exhibición, etiqueta, mapa y marca de agua aplicada en lote a las fotos.
Datos ficticiosEn el móvil
La necesidadEl agente consulta sus visitas entre un inmueble y otro.
Lo que se hizoLas próximas visitas en el móvil, con el teléfono del cliente a un toque.
Datos ficticiosDel anuncio al contrato firmado
Leads (CRM)
Etapas nuevo, en contacto, convertido, perdido y spam, con gráficos por mes y por estado.
Visitas
Próximas visitas e historial, con el inmueble, el horario y el contacto.
Rendimiento por inmueble
Visualizaciones, clics en WhatsApp, leads y visitas de cada inmueble y de cada agente.
Contratos
Contratos con plantillas, vendedores, versiones, comentarios y aviso de plazos por correo.
Marketing
Carteles con código QR rastreable, videos, publicaciones y boletín de noticias del mercado.
Acceso y auditoría
Superadministrador, administrador y agente con permisos diferentes, y registro de los cambios.
Diseño en Figma
Del design system al prototipo
Tecnología
El stack tecnológico
Next.js 14
Framework de alto rendimiento con URLs que Google puede indexar (SEO), renderizado en el servidor y cargas casi instantáneas.
Google Auth
Auth
Framer Motion
Motor de microinteracciones que agrega movimiento fluido y cuidado a cada interacción del usuario.
Vercel
Infraestructura en la nube global, en el edge: el sitio carga en milisegundos esté donde esté el visitante.
React
Arquitectura de componentes para una experiencia de usuario fluida e interactiva, sin recargar la página.
TypeScript
Tipado estático estricto que detecta errores antes de que lleguen a producción y mantiene estable la aplicación.
Tailwind CSS
Un design system a medida: identidad visual propia, una interfaz coherente y archivos livianos para ganar velocidad.
Lucide
UI / CSS
NextAuth
Auth
Neon Postgres
Base de datos
Resend
Medios / Correo
Google Cloud
Hosting
Anthropic
IA / ML
Figma
UI / CSS
Ingeniería
Aspectos técnicos
Ingeniería de búsqueda inteligente
Un autocompletado dinámico conectado a la base de datos, para que los usuarios solo filtren por ubicaciones con inmuebles realmente disponibles, lo que reduce la tasa de rebote.
Panel de administración privado
Un CMS a medida protegido con inicio de sesión de Google, para registrar inmuebles, subir fotos (con Google Cloud) y gestionar contactos (CRM) en tiempo real.
Rendimiento y SEO dinámico
Etiquetas Open Graph generadas automáticamente con los datos del servidor. Cada inmueble compartido por WhatsApp muestra al instante una tarjeta de vista previa completa.
UI/UX premium
Modo oscuro nativo (next-themes) con transiciones suaves y glassmorphism para destacar los formularios sin tapar las fotos de los inmuebles de alto nivel.
El impacto
CM Imóveis ahora tiene una plataforma propia, escalable y optimizada para Google, que da total autonomía operativa a la agente y una experiencia inmersiva a sus clientes.
Siguiente paso
¿Quieres un portal así para tu inmobiliaria?
Creamos portales con búsqueda, panel propio y CRM, sin depender de plataformas genéricas.