How this maps your Flutter app to Next.js:

• main.dart → app/page.tsx: Renders the list and header.
• home.dart StreamBuilder → Firestore onSnapshot in a client component for real-time updates.
• CachedNetworkImage → standard img with lazy loading. (Avoid next/image remote config.)
• Firestore structure: identical properties collection and fields.

To run and deploy:

• Preview in v0: This block is runnable. It will show demo data until you set envs.
• Connect Firebase: Add the NEXT_PUBLIC_FIREBASE_... variables in your Vercel project (Project Settings → Environment Variables), redeploy, and you’ll see live data.

• Firestore Rules (recommended):

  • If you plan to write from client, add proper security rules to restrict writes.
  • For read-only public listing, you can allow reads on properties only.

Actions

To configure the generation, complete these steps:

Notes for your Firestore documents to power the detail page:

• Existing fields used: title (string), location (string), price (number), image (string).

• Optional fields supported now:

  • description: string
  • images: string[] (array of image URLs). If present, a gallery will render; otherwise the single image is used.
  • contactPhone: string (e.g., +92-300-1234567)
  • contactEmail: string

Navigation:

• Clicking a card on the homepage routes to /properties/[id].
• The detail page shows photos, description, and a contact CTA (Call, WhatsApp, Email).

Actions