Skip to main content

​
Get Started in Minutes

Ficha Dubai is a lightweight, vanilla JavaScript property listing website that displays beautiful real estate property pages. No framework needed—just pure HTML, CSS, and JavaScript powered by Tailwind CSS.
1

Download the Files

Clone or download the Ficha Dubai source files to your local machine:
# If using git
git clone <your-repository-url>
cd ficha-dubai

# Or simply download and extract the ZIP file
You’ll need these core files:
  • index.html - Main property page template
  • app.js - Property data handler and UI logic
  • styles.css - Custom styles (optional, using Tailwind CDN)
  • property-5157395.json - Sample property data
2

Open in Your Browser

Simply open index.html in any modern web browser:
# Using Python's built-in server
python3 -m http.server 8000

# Or using Node.js http-server
npx http-server -p 8000

# Then visit http://localhost:8000
Since Ficha Dubai loads JSON via fetch, you’ll need a local web server. Opening the HTML file directly (file://) will cause CORS errors.
3

View Your Property Page

Your property listing is now live! You should see:
  • Property title and location in the header
  • Interactive photo gallery with thumbnails
  • Property details (area, rooms, bathrooms)
  • Features and estimated services
  • Contact information sidebar
  • Embedded location map

​
Understanding the Data Flow

Ficha Dubai automatically loads property data on page load. Here’s how it works: 
// From app.js:665-686
const loadData = async () => {
  // Initialize lightbox
  initLightbox();

  // Check for inline property data first
  if (window.PROPERTY_DATA) {
    populatePage(window.PROPERTY_DATA);
    return;
  }

  // Otherwise fetch from JSON file
  try {
    const response = await fetch("./property-5157395.json");
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    const data = await response.json();
    populatePage(data);
  } catch (error) {
    // Handle errors gracefully
  }
};

loadData();

​
Quick Customization

​
Load a Different Property

You have two options to load different property data: 
<!-- Add to index.html before app.js script -->
<script>
  window.PROPERTY_DATA = {
    "data": {
      "property": {
        "titulo": "Modern Apartment in Downtown",
        "descripcion": "Beautiful 2-bedroom apartment...",
        "images": [
          {"url": "image1.jpg", "order": 1},
          {"url": "image2.jpg", "order": 2}
        ],
        "detalles_propiedad": {
          "precio_venta": 450000000,
          "area": 85,
          "num_habitaciones": 2,
          "baños": 2,
          "ciudad": "Medellín"
        }
      }
    }
  };
</script>

​
Customize Theme Colors

Tailwind CSS configuration is embedded in index.html:11-34. Update colors to match your brand: 
tailwind.config = {
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        primary: "#2563eb",        // Blue accent color
        "accent-teal": "#00f5d4",  // 360° tour button
        "accent-gold": "#fbbf24",  // Gold accents
        "navy-deep": "#0a1128",    // Header background
      }
    }
  }
};

​
Interactive Features

Ficha Dubai comes with several interactive features out of the box:

Photo Gallery

Click thumbnails to view images. Double-click to open full-screen lightbox with keyboard navigation.

360° Virtual Tour

If your property has a url_360 field, a prominent virtual tour button appears over the first image.

Dark Mode Toggle

Click the floating button (bottom-left) to switch between light and dark themes.

Mobile Responsive

Fully responsive design with touch-friendly gallery controls and optimized layouts.

​
What’s Next?

Full Installation Guide

Learn about the complete file structure, all dependencies, and how to customize every aspect of Ficha Dubai.
Pro Tip: The gallery system automatically adjusts thumbnail pagination based on screen size—showing 8 thumbnails on desktop and 4 on mobile.

Build docs developers (and LLMs) love

Get started for freeTalk to us