Requerimientos establecidos

requirements.md

Lineamientos para App de Venta de Propiedades y Presentación Web

Este documento define los requerimientos mínimos para una plataforma enfocada únicamente en venta de propiedades y su visualización en un sitio web público.

Requerimientos de desarrollo

• Nuxt 4+
• Tailwind CSS
• TypeScript
• Prisma

⸻

1. Objetivo del Sistema
   • Mostrar propiedades en venta de forma clara, atractiva y filtrable.
   • Permitir a los visitantes explorar, comparar y ver detalles de propiedades.
   • Captar leads mediante formularios de contacto vinculados a cada propiedad.
   • Ofrecer una experiencia rápida, moderna y optimizada para dispositivos móviles.

⸻

2. Flujo Principal del Usuario
   1. El visitante entra a la página inicial o listado de propiedades.
   2. Aplica filtros básicos (ciudad, zona, precio, tipo).
   3. Revisa resultados en un grid de tarjetas.
   4. Entra al detalle de una propiedad.
   5. Ve fotos, características, mapa y descripción.
   6. Llena un formulario de contacto para solicitar más información.

⸻

1. Páginas Principales

⸻

3.1 Página de Listado de Propiedades (/propiedades)

Elementos:

• Barra de filtros:
• Ciudad / zona.
• Tipo de propiedad.
• Rango de precio.
• Habitaciones / baños.
• Estado (opcional).
• Ordenamiento:
  • Precio (asc / desc).
  • Más recientes.
• Grid de tarjetas:
  • Imagen principal.
  • Título.
  • Precio.
  • Ubicación breve.
  • Características esenciales (m², habitaciones, baños).
  • Estado con badge.

Estados:

• Cargando (skeleton).
• Sin resultados.

⸻

3.2 Página de Detalle de Propiedad (/propiedades/[slug])

Componentes esenciales: 1. Encabezado

• Título completo.
• Precio.
• Ubicación.
• Estado ("Disponible", "Reservada", "Vendida"). 2. Galería
• Carrusel principal.
• Miniaturas. 3. Características principales
• Área construida.
• Área de terreno.
• Habitaciones.
• Baños.
• Parqueos.
• Año de construcción. 4. Descripción
• Texto atractivo orientado a ventas. 5. Detalles técnicos
  • Tipo.
• Nivel (si es apartamento).
• Mantenimiento mensual.
• Amueblada o no. 6. Mapa
  • Ubicación aproximada.
  • Formulario de contacto
  • Nombre.
  • Email.
  • Teléfono.
  • Mensaje.
  • Botón de enviar lead.
  • 3–4 propiedades sugeridas.

⸻

4. Modelo de Datos (Propiedades)

Property {
  id: string;
  slug: string;
  title: string;
  description: string;

  operationType: 'venta';
  price: number;
  currency: 'USD' | 'CAD' | 'EUR';

  country: string;
  city: string;
  zone: string;
  address: string;

  builtAreaM2: number | null;
  landAreaM2: number | null;
  bedrooms: number | null;
  bathrooms: number | null;
  parkingSpaces: number | null;
  yearBuilt: number | null;

  status: 'disponible' | 'reservada' | 'vendida';

  mainImageUrl: string;
  imageUrls: string[];

  featured: boolean;
  createdAt: string;
  updatedAt: string;
}

5. Endpoints Básicos (API)

GET /api/properties

Query params opcionales:

• city
• zone
• minPrice
• maxPrice
• bedrooms
• status
• orderBy

Obtener propiedad por slug

GET /api/properties/:slug

Crear un lead

{
  "propertyId": "prop_123",
  "name": "Juan Pérez",
  "email": "juan@example.com",
  "phone": "+52 555 555 5555",
  "message": "Estoy interesado en agendar una visita"
}

1. Funcionalidades Opcionales "Pro"
   • SEO avanzado
   • Meta tags dinámicas por propiedad.
   • Slugs automáticos
   • Generados desde el título y ciudad.
   • Favoritos sin login
   • Guardados en localStorage.
   • Propiedades similares
   • Según ubicación o rango de precio.
   • Paginación o infinite scroll

⸻

7. Plan de Implementación Paso a Paso

Paso 1: Configuración inicial

• Crear modelo de Property.
• Crear seed con 10–20 propiedades.
• Implementar GET /api/properties y GET /api/properties/:slug.

Paso 2: Frontend básico

• Página de listado con filtros.
• Página de detalle con galería, descripción y características.

Paso 3: Captación de leads

• Crear formulario.
• Implementar POST /api/leads.
• Guardar en memoria o en base de datos simple.

Paso 4 (Opcional):

• Propiedades similares.
• Favoritos.
• Mejoras de UI/UX.

⸻

8. Crea los server endpoints para retornar la información de las propiedades y el detalle de la propiedad. Por ahora sólo serán mocks de propiedades en la zona Ottawa, Canadá.