Como Criar Um Sistema Site de Imobiliária Com Vibe coding DE GRAÇA!

Você Vai ver Nesse Post:

Vou te ensinar NA PRÁTICA como criar um sistema site de imobiliária (marketplace) usando Antigravity com vibe coding
Leia tudo e no final me diga o que achou. Posso contar com você? :)
https://youtu.be/vANrZ9EKkrA

01_PRD.md

# Documento de Requisitos do Produto (PRD) - Plugin WP Imobi Marketplace

## 1. Visão Geral do Produto
O **WP Imobi Marketplace** é um plugin premium para WordPress focado em transformar qualquer site numa plataforma completa de anúncios imobiliários multi-corretor. O plugin permitirá que corretores de todo o país se registem gratuitamente, gerenciem os seus próprios perfis e publiquem imóveis. O modelo de monetização será baseado em limites de anúncios (Ex: primeiro imóvel grátis, anúncios subsequentes bloqueados até pagamento/ativação).

## 2. Personas e Papéis de Utilizador
* **Administrador do Site (WP-Admin):** Controlo total sobre as configurações globais, moderação de imóveis, aprovação de corretores e regras de precificação.
* **Corretor / Imobiliária (Frontend Dashboard):** Utilizador que se regista na plataforma para anunciar propriedades. Tem acesso a um painel exclusivo na frente do site (frontend) para gerir o seu perfil e imóveis.
* **Comprador / Locatário (Visitante):** Utilizador final que procura imóveis, utiliza filtros avançados e entra em contacto direto com o corretor via formulário, e-mail ou WhatsApp.

## 3. Módulos Principais

### Módulo A: Sistema de Registo e Dashboard do Corretor
* **Registo Simplificado:** Formulário público de registo para corretores (Nome, E-mail, Telefone, Creci/Licença, Foto/Logótipo, Mini-biografia, Link do WhatsApp).
* **Dashboard Temático (Frontend):** Área exclusiva do corretor acessível via shortcode (`[imobi_dashboard]`). Deve possuir design moderno, limpo e profissional (Grid de resumo de imóveis publicados, ativos e pendentes).
* **Painel de Produção (CRUD de Imóveis):** Ecrã dentro do dashboard para adicionar, editar e excluir imóveis sem tocar no painel administrativo do WordPress.

### Módulo B: Base de Dados de Imóveis (Custom Post Type & Meta Fields)
* **Custom Post Type:** `imovel`
* **Campos Personalizados (Meta Fields):**
    * Preço (Venda e/ou Locação)
    * Tipo de Negócio (Venda / Aluguer / Temporada)
    * Tipo de Imóvel (Casa, Apartamento, Terreno, Comercial, etc.)
    * Área Total e Área Construída (m²)
    * Quantidade de Quartos, Suítes, Casas de Banho e Vagas de Garagem
    * Características adicionais (Piscina, Churrasqueira, Ginásio, Varanda Gourmet, etc.)
    * Galeria de Imagens e Vídeo (URL do YouTube)
    * Localização (Estado/Distrito e Cidade)

### Módulo C: Geolocalização e Filtros
* **Taxonomia Hierárquica:** Criação das taxonomias personalizadas para Estados/Distritos e Cidades.
* **Pesquisa Inteligente:** Mecanismo de pesquisa dinâmico na Home filtrando por Região, Cidade, Tipo de Negócio, Tipo de Imóvel e Faixas de Preço.

### Módulo D: Monetização e Regras de Negócio (Paywall Base)
* **Regra Free-to-Premium:** Todo o corretor tem direito a registar 1 imóvel gratuitamente (limite configurável pelo admin).
* **Gatilho de Bloqueio:** Ao tentar registar o segundo imóvel, o sistema guarda o imóvel com o estado `pendente_pagamento` e exibe um aviso de que é necessário adquirir créditos (a integração de checkout será desenvolvida numa etapa posterior; nesta fase, deve apenas bloquear o imóvel e listar como pendente).

### Módulo E: Frontend, Home e Páginas de Exibição
* **Página Inicial (Home):** Layout atraente com Hero Section de impacto, barra de pesquisa avançada centralizada, grid de imóveis em destaque e secção explicativa para novos corretores. Acessível via shortcode `[imobi_home]`.
* **Single Page do Imóvel:** Template customizado para exibição da propriedade contendo:
    * Galeria de fotos fluida (slider moderno).
    * Ficha técnica limpa e iconográfica.
    * Card lateral fixo do Corretor (Foto, Nome, Licença, Botão de E-mail e Botão "Chamar no WhatsApp" com mensagem padrão preenchida dinamicamente).
* **Páginas Institucionais:** Listagem geral de Imóveis via shortcode `[imobi_archive]`.

### Módulo F: Blog Integrado e Otimizado para SEO
* **Blog Customizado:** Integração nativa com os posts do WordPress ou CPT `blog_imobi`.
* **SEO-Friendly:** Geração automática de meta tags simples (Título estruturado, Meta Description baseada no excerto do post e Open Graph para partilha em redes sociais). Layout de leitura limpo e focado no conteúdo.

### Módulo G: Painel Administrativo Global (WP-Admin)
* **Configurações do Plugin:** Ecrã dedicado para gerir as regras do sistema:
    * Definição do número de imóveis grátis permitidos por corretor.
    * Aprovação/Moderação de novos corretores registados.
    * Visualização de relatórios rápidos (Total de imóveis ativos, pendentes de pagamento e corretores registados).

## 4. Requisitos de Design e UX
* **Visual:** Moderno, limpo e corporativo. Paleta de cores sofisticada (sugestão: tons de azul escuro ou grafite com detalhes de destaque em azul claro ou verde esmeralda).
* **Tipografia:** Fontes modernas do sistema (Inter, Segoe UI ou Roboto) para performance máxima.
* **Componentes:** Uso de CSS moderno (Variables, CSS Grid, Flexbox) auto-contido para evitar conflitos com temas de terceiros.

02_ARCHITECTURE.md

# Arquitetura e Estrutura de Ficheiros - WP Imobi Marketplace

O plugin deve ser modular, desacoplado, seguindo as melhores práticas do WordPress (orientado a objetos ou funcional bem estruturado) e totalmente autossuficiente (sem dependência de plugins externos).

## Estrutura de Diretórios Proposta

```text
wp-imobi-marketplace/
│
├── wp-imobi-marketplace.php        # Ficheiro principal do plugin (Bootstrapper)
├── README.md                       # Documentação do desenvolvedor
│
├── includes/                       # Core e lógica de negócios
│   ├── class-imobi-activator.php   # Código executado na ativação (criação de tabelas/roles)
│   ├── class-imobi-deactivator.php # Código executado na desativação
│   ├── class-imobi-cpt.php         # Registo de CPTs (Imóveis) e Taxonomias (Estados/Cidades)
│   ├── class-imobi-meta-fields.php # Definição e salvamento de metadados dos imóveis
│   ├── class-imobi-auth.php        # Registo, login e controlo de papéis de Corretores
│   ├── class-imobi-shortcodes.php  # Registo de todos os shortcodes públicos
│   ├── class-imobi-seo.php         # Lógica de Meta Tags e otimizações de SEO do blog/imóveis
│   └── class-imobi-admin.php       # Painel de controlo dentro do WP-Admin
│
├── templates/                      # Ficheiros de visualização (Templates Frontend)
│   ├── archive-imovel.php          # Listagem/pesquisa geral de imóveis
│   ├── single-imovel.php           # Detalhes visuais do imóvel individual
│   ├── dashboard-broker.php        # Painel interno do corretor (Listagem e Perfil)
│   ├── dashboard-form-imovel.php   # Formulário CRUD de criação/edição de imóvel
│   ├── home-page.php               # Layout da página inicial do ecossistema
│   └── loop-imovel.php             # Card de exibição individual de imóvel para loops
│
└── assets/                         # Ficheiros estáticos
    ├── css/
    │   ├── admin.css               # Estilo do painel administrativo
    │   ├── public.css              # Estilo geral do frontend (Design Moderno auto-contido)
    │   └── dashboard.css           # Estilo da área restrita do corretor
    └── js/
        ├── public.js               # Filtros assíncronos e comportamento frontend
        └── dashboard.js            # Validações dos formulários do corretor

03_STEPS.md

# Plano de Implementação em Etapas - WP Imobi Marketplace

Este plano foi dividido em fases atómicas e progressivas. Execute uma etapa por vez, garantindo que o código esteja funcional antes de avançar.

## ETAPA 1: Estrutura Base e Registo de Dados (CPT, Taxonomias e Roles)
* **Tarefa 1.1:** Criar o ficheiro base do plugin `wp-imobi-marketplace.php` com os cabeçalhos padrão do WordPress.
* **Tarefa 1.2:** Desenvolver a classe de ativação criando a Role personalizada `corretor_imobi` (com capacidades básicas de upload de media, mas sem acesso ao painel admin padrão).
* **Tarefa 1.3:** Registar o Custom Post Type `imovel` e as taxonomias de geolocalização no ficheiro `includes/class-imobi-cpt.php`.
* **Tarefa 1.4:** Adicionar uma carga inicial básica de regiões/estados (ou estrutura que permita a inserção simplificada) via taxonomia.

## ETAPA 2: Sistema de Autenticação e Perfil do Corretor (Frontend)
* **Tarefa 2.1:** Desenvolver o formulário de login e registo público para os corretores via shortcode.
* **Tarefa 2.2:** Adicionar os campos extras de perfil do utilizador (Licença/Creci, WhatsApp, Foto de perfil) guardando-os como `user_meta`.
* **Tarefa 2.3:** Criar o Shortcode `[imobi_dashboard]` que verifica se o utilizador tem a sessão iniciada e exibe o template base do painel (Visual Moderno).

## ETAPA 3: Formulário de Produção (CRUD Frontend de Imóveis) e Regra de Bloqueio
* **Tarefa 3.1:** Construir a interface gráfica dentro do dashboard do corretor para envio de novos imóveis (Título, descrição, uploads de fotos e metadados como preço, casas de banho, quartos).
* **Tarefa 3.2:** Implementar a lógica de negócios da limitação:
    * Fazer uma contagem de posts do tipo `imovel` criados pelo ID do utilizador atual.
    * Se a contagem for `>= 1` (ou o limite configurado), guardar o novo imóvel automaticamente com o estado customizado `pendente_pagamento` e impedir a sua exibição pública.
    * Exibir uma mensagem amigável de restrição na interface do corretor informando sobre a necessidade de ativação premium.

## ETAPA 4: Desenvolvimento dos Filtros de Pesquisa e Home Page
* **Tarefa 4.1:** Criar o shortcode `[imobi_home]` gerando uma secção Hero premium e os seletores dinâmicos de pesquisa (Filtro por Tipo de Negócio, Região, Cidade e Preço).
* **Tarefa 4.2:** Desenvolver a query do WordPress baseada nos parâmetros recebidos via `$_GET` para listar os resultados correspondentes de forma limpa e otimizada.

## ETAPA 5: Templates Frontend Personalizados (Grid, Single View e Contactos)
* **Tarefa 5.1:** Desenvolver o layout do Card de Imóvel (`loop-imovel.php`) utilizando um design moderno e elegante.
* **Tarefa 5.2:** Estruturar o template `single-imovel.php`. Garantir que o card lateral capture os dados do corretor dono do imóvel e gere o link direto para o WhatsApp estruturado assim: `https://wa.me/NUMERO?text=Olá, estou interessado no imóvel [Título do Imóvel] visto no site.`

## ETAPA 6: Módulo Blog e Otimização Automática para SEO
* **Tarefa 6.1:** Garantir a exibição do blog padrão do WordPress integrada ao estilo visual moderno do site imobiliário.
* **Tarefa 6.2:** Desenvolver a classe `class-imobi-seo.php` injetando meta tags dinâmicas no cabeçalho do site (`wp_head`) para páginas de imóveis e posts do blog, impulsionando o SEO orgânico da plataforma.

## ETAPA 7: Painel Administrativo no WP-Admin
* **Tarefa 7.1:** Criar o menu administrativo `Imobi Marketplace` no painel do WordPress.
* **Tarefa 7.2:** Implementar as páginas de gestão: ecrã para alterar o limite de propriedades grátis e lista para aprovação visual dos corretores inscritos.

README.md

# Especificações Técnicas de Desenvolvimento - WP Imobi Marketplace

Este conjunto de ficheiros fornece todas as diretrizes necessárias para alimentar uma IDE de Vibe Coding (como Antigravity, Cursor, Windsurf) para gerar o código perfeito de um plugin WordPress imobiliário.

### Conteúdo Disponível:
1.  **01_PRD.md:** Requisitos de produto, escopo e regras de negócio de monetização.
2.  **02_ARCHITECTURE.md:** Organização modular das pastas e boas práticas de codificação do WordPress.
3.  **03_STEPS.md:** Roteiro sequencial em etapas para desenvolvimento focado e controlado.

### Instruções de Uso no Ambiente da IDE:
Insira estes ficheiros no diretório de contexto do seu projeto e utilize o prompt mestre para iniciar a geração modular do código. Aceda ao passo 1 e não avance para o próximo sem validar as funcionalidades no seu WordPress de testes.

Prompt start

Você é um Engenheiro de Software Sênior e Especialista em WordPress, assumindo o papel de Tech Lead neste projeto. Eu serei o Product Manager.

O nosso objetivo é desenvolver o plugin "WP Imobi Marketplace". Este plugin será comercializado para um público de empreendedores iniciantes no digital, na faixa dos 30 a 50 anos, que buscam ferramentas práticas, visuais e sem complexidade técnica. Portanto, o painel de uso do plugin (tanto para o administrador quanto para o corretor) deve ser extremamente limpo, intuitivo e à prova de erros.

Como o meu foco é na gestão do projeto e na estratégia de vendas, o meu nível de programação manual é básico (apenas o essencial de HTML/CSS). Você será o responsável por gerar 100% do código PHP, JS e CSS, entregando soluções robustas, seguras e prontas para produção, sem exigir que eu faça depuração manual complexa.

Para garantir que não percamos o contexto e a qualidade, siga ESTAS REGRAS INQUEBRÁVEIS:

1. LEITURA OBRIGATÓRIA: Leia e assimile completamente os arquivos @01_PRD.md, @02_ARCHITECTURE.md e @03_STEPS.md que estão no diretório do projeto. Eles são a sua Bíblia.
2. EXECUÇÃO EM ETAPAS: Abra o arquivo @03_STEPS.md. Nós vamos executar rigorosamente UMA TAREFA POR VEZ. Não tente codificar o plugin inteiro de uma vez, não pule etapas e não antecipe funcionalidades de etapas futuras.
3. PADRÕES WP: Use a estrutura de pastas definida no @02_ARCHITECTURE.md. Todo o código deve usar a namespace `WP_Imobi_Marketplace` ou o prefixo `imobi_`. Priorize a segurança com `sanitize_text_field`, `esc_html`, etc.
4. ESTILO E UX: O design dos shortcodes e do dashboard do corretor deve ser moderno, limpo e auto-contido (não deve quebrar dependendo do tema do usuário).

Para começarmos, confirme que leu os três arquivos .md resumindo em um parágrafo o escopo geral do projeto. Em seguida, implemente exclusivamente a ETAPA 1.1 e 1.2 descritas no @03_STEPS.md. Ao finalizar a geração dos arquivos desta primeira etapa, PARE e aguarde o meu comando para testarmos no ambiente de desenvolvimento antes de avançar.

Compartilhe

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Este site utiliza o Akismet para reduzir spam. Saiba como seus dados em comentários são processados.