CM Imóveis – Full-Stack & CRM
A complete real estate portal with smart search, a private CMS/CRM admin panel, dynamic SEO through Open Graph and native dark mode, all serverless and fully owned by the client.
At a glance
- Senior Design Engineer
- My role
- Apr–Aug 2026
- Timeline
- Solo, from design to deploy
- Team
- pages
- 42
- components
- 104
- API routes
- 11
- commits
- 210
Visual identity
Logo and identity designed by me
Logo, palette and typography for CM Imóveis, created alongside the portal. The logo's letters are Helvetica Neue Bold converted to outlines.
Logo
Light background
Dark backgroundConcept
The initials CM in heavy, geometric letters: the C carries an amber-to-violet gradient that gives the brand warmth, and the M stays solid graphite. Below, IMÓVEIS in widely spaced capitals. The same gradient fills the house in the favicon.
Designed by Estevão Marques · 2026
Palette · click to copy
Headings
Imóveis
Playfair Display
Display and headings, with italics for accents.
Interface and body
Apartamento 3 quartos
Montserrat
Buttons, filters, listing cards and body text.
Logo variations
Color White 
Icon (house)
Where the brand is used
Favicon and app icon
The house in the brand gradient, on graphite, in the browser tab and on the phone's home screen.
Site header and admin sign-in
Color logo in the portal header and on the realtor's admin sign-in page.
Watermark on photos
The admin panel applies the logo to listing photos.
Listing videos
The white version signs the videos assembled by the admin panel.
Do
- Use the color version on white and light backgrounds
- Use the white version on dark backgrounds and photos
- Keep the clear space around the logo
- Use the gradient only on the defined elements
- Respect the minimum height of 24px
- Use Playfair Display for headings and Montserrat for UI
Don't
- Don't change the logo's original colors
- Don't distort, rotate or add effects
- Don't use it on low-contrast backgrounds
- Don't use the color version on colored backgrounds
- Don't add shadows or borders to the logo
The challenge
Realtor Cassia Marques needed more than a virtual storefront; she needed a self-running sales machine. The challenge was to create a high-end experience for buyers (focused on performance and SEO) while building a robust, secure management system (CMS/CRM) so she could manage her listings and leads without relying on third parties or paying monthly fees for generic platforms.
The solution
I built a complete real estate portal with a modern stack. The interface was designed for conversion and accessibility, and the back end was built on a serverless architecture for top speed and data security.
Custom admin panel
Admin panel built for CM Imóveis
Every lead, visit and click is tied to the property and the agent, and each agent only sees their own.
The needKnowing which properties attract interest and which are stalled.
What was builtPerformance by property: views, WhatsApp clicks, leads and visits, with the agent in charge and search by property or agent.
Fictitious dataThe needContacts came in for many properties and agents, with no follow-up.
What was builtA lead CRM with stages (new, in contact, converted, lost, spam) and charts. Each agent only sees the leads for their own properties.
Fictitious dataThe needOrganizing the team's property visits.
What was builtUpcoming visits as cards with the property, time and contact, plus the history of past visits with each lead's stage.
Fictitious dataThe needAdding and ordering properties with protected photos.
What was builtListings with the agent in charge, display order, tag, map and a watermark applied to photos in bulk.
Fictitious dataOn the phone
The needAgents check their visits between one property and the next.
What was builtUpcoming visits on the phone, with the customer's number one tap away.
Fictitious dataFrom listing to signed contract
Leads (CRM)
Stages new, in contact, converted, lost and spam, with charts by month and by status.
Visits
Upcoming visits and history, with the property, the time and the contact.
Performance by property
Views, WhatsApp clicks, leads and visits for each property and each agent.
Contracts
Contracts with templates, sellers, versions, comments and deadline alerts by email.
Marketing
Signs with a trackable QR code, videos, posts and a real estate news newsletter.
Access and audit
Super admin, admin and agent with different permissions, and a log of changes.
Design in Figma
From design system to prototype
Technology
The tech stack
Next.js 14
High-performance framework with URLs that Google can index (SEO), server-side rendering and near-instant load times.
Google Auth
Auth
Framer Motion
Micro-interaction engine that adds fluid, polished motion to every user interaction.
Vercel
Global edge cloud infrastructure, so the site loads in milliseconds wherever the visitor is.
React
Component-based architecture for a smooth, interactive user experience without page reloads.
TypeScript
Strict static typing that catches errors before they reach production and keeps the application stable.
Tailwind CSS
A custom-built design system: a distinctive look, a consistent interface and small files for speed.
Lucide
UI / CSS
NextAuth
Auth
Neon Postgres
Database
Resend
Media / Email
Google Cloud
Hosting
Anthropic
AI / ML
Figma
UI / CSS
Engineering
Technical highlights
Smart search engineering
A dynamic autocomplete connected to the database, so users only filter by locations with listings actually available, which reduces the bounce rate.
Private admin panel
A custom CMS protected by Google sign-in, for adding listings, uploading photos (via Google Cloud) and managing contacts (CRM) in real time.
Performance & dynamic SEO
Open Graph tags generated automatically from server data. Every listing shared on WhatsApp shows a rich, instant preview card.
Premium UI/UX
Native dark mode (next-themes) with smooth transitions, and glassmorphism to highlight forms without hiding the photos of high-end properties.
The impact
CM Imóveis now has its own scalable, Google-optimized platform, giving the realtor full operational autonomy and her clients an immersive experience.
Next step
Want a portal like this for your real estate business?
We build portals with search, a custom admin panel and a CRM, without relying on generic platforms.