DEV Community: Rahul Kapoor

Google Maps Integration with Property Pins: Complete Guide

Rahul Kapoor — Sun, 27 Jul 2025 19:45:55 +0000

Google Maps Integration with Property Pins: Complete Guide

This tutorial will walk you through integrating Google Maps with custom property pins for a real estate website. I'll provide the complete code and explain each step.

Step 1: Set Up Google Maps API

First, you need a Google Maps API key:

Go to Google Cloud Console
Create a new project
Enable "Maps JavaScript API" and "Geocoding API"
Create an API key

Step 2: HTML Structure

<!DOCTYPE html>
<html>
<head>
    <title>Property Map</title>
    <style>
        #map {
            height: 600px;
            width: 100%;
        }
        .property-info {
            padding: 10px;
            max-width: 200px;
        }
        .property-info img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <!-- Load Google Maps API -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

    <!-- Our custom script -->
    <script src="map.js"></script>
</body>
</html>

Step 3: JavaScript Implementation (map.js)

// Property data - would typically come from your database
const properties = [
    {
        id: 1,
        title: "Luxury Apartment",
        address: "123 Main St, Noida",
        price: "₹75,00,000",
        bedrooms: 3,
        bathrooms: 2,
        sqft: 1800,
        image: "property1.jpg",
        lat: 28.5355,
        lng: 77.3910
    },
    {
        id: 2,
        title: "Commercial Space",
        address: "456 Market Rd, Noida",
        price: "₹1,20,00,000",
        type: "Commercial",
        sqft: 3500,
        image: "property2.jpg",
        lat: 28.5412,
        lng: 77.4023
    }
];

// Custom pin icon
const propertyIcon = {
    url: "https://maps.google.com/mapfiles/kml/pal3/icon21.png",
    scaledSize: new google.maps.Size(32, 32)
};

function initMap() {
    // Center map on Noida
    const noida = { lat: 28.5355, lng: 77.3910 };
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 13,
        center: noida
    });

    // Create markers for each property
    properties.forEach(property => {
        const marker = new google.maps.Marker({
            position: { lat: property.lat, lng: property.lng },
            map: map,
            title: property.title,
            icon: propertyIcon
        });

        // Create info window content
        const contentString = `
            <div class="property-info">
                <h3>${property.title}</h3>
                ${property.image ? `<img src="${property.image}" alt="${property.title}">` : ''}
                <p><strong>Price:</strong> ${property.price}</p>
                <p><strong>Address:</strong> ${property.address}</p>
                ${property.bedrooms ? `<p><strong>Bedrooms:</strong> ${property.bedrooms}</p>` : ''}
                ${property.bathrooms ? `<p><strong>Bathrooms:</strong> ${property.bathrooms}</p>` : ''}
                <p><strong>Area:</strong> ${property.sqft} sq.ft.</p>
                <button onclick="viewProperty(${property.id})">View Details</button>
            </div>
        `;

        // Create info window
        const infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        // Add click event to marker
        marker.addListener("click", () => {
            infowindow.open(map, marker);
        });
    });
}

// Function to handle property viewing
function viewProperty(id) {
    // In a real app, this would redirect to property page
    console.log(`Viewing property ${id}`);
    // window.location.href = `/property/${id}`;
}

Step 4: Adding Geocoding (Optional)

If you don't have latitude/longitude for properties, add this function:

async function geocodeAddress(address) {
    const geocoder = new google.maps.Geocoder();
    return new Promise((resolve, reject) => {
        geocoder.geocode({ address }, (results, status) => {
            if (status === "OK" && results[0]) {
                const location = results[0].geometry.location;
                resolve({
                    lat: location.lat(),
                    lng: location.lng()
                });
            } else {
                reject("Geocode failed: " + status);
            }
        });
    });
}

// Usage example:
// const coords = await geocodeAddress("123 Main St, Noida");

Step 5: Advanced Features

Cluster Markers for Many Properties

Add this to your HTML head:

<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

Then modify your initMap function:

function initMap() {
    // ... previous map setup code ...

    const markers = properties.map(property => {
        return new google.maps.Marker({
            position: { lat: property.lat, lng: property.lng },
            map: map,
            title: property.title,
            icon: propertyIcon
        });
    });

    // Add marker clusterer
    new markerClusterer.MarkerClusterer({ map, markers });
}

Step 6: Making It Dynamic

In a real application, you would fetch properties from your backend:

async function fetchProperties() {
    try {
        const response = await fetch('/api/properties');
        return await response.json();
    } catch (error) {
        console.error('Error fetching properties:', error);
        return [];
    }
}

// Modified initMap
async function initMap() {
    const properties = await fetchProperties();
    // Rest of your map initialization code
}

Complete Implementation Notes

API Key Security: Never expose your API key in frontend code in production. Instead:
- Use a proxy server
- Restrict the key to your domain
- Implement usage quotas
Performance Optimization:
- Load markers in batches for large datasets
- Implement viewport filtering to only load visible properties
- Use server-side clustering for thousands of properties
Customization Options:
- Different pin colors for property types (residential/commercial)
- Heatmaps for price distribution
- Drawing tools for area selection
Mobile Considerations:
- Add touch event handlers
- Implement geolocation for "Near Me" functionality

   if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(position => {
           map.setCenter({
               lat: position.coords.latitude,
               lng: position.coords.longitude
           });
       });
   }

This implementation provides a complete solution for displaying properties on Google Maps with custom pins and information windows. The code is ready to integrate with your real estate website and can be extended with additional features as needed.
Written by think4buysale.in Software and ompropertydealer.com

Real-time Search and Auto-Suggestions for Property Listings

Rahul Kapoor — Sun, 27 Jul 2025 19:40:38 +0000

Real-time Search and Auto-Suggestions for Property Listings

This comprehensive guide will walk you through building a real-time search system with auto-suggestions for property listings. I'll provide a complete solution with frontend and backend components.

System Architecture

Frontend: React.js with TypeScript
Backend: Node.js with Express
Database: MongoDB (for property listings)
Search Engine: Elasticsearch (for fast autocomplete)

Step 1: Set Up the Backend

Install Dependencies

npm init -y
npm install express mongoose body-parser cors elasticsearch

Backend Server (server.js)

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');
const elasticsearch = require('elasticsearch');

const app = express();
app.use(cors());
app.use(bodyParser.json());

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/propertyDB', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

// Elasticsearch client
const esClient = new elasticsearch.Client({
  host: 'localhost:9200',
  log: 'trace'
});

// Property Schema
const PropertySchema = new mongoose.Schema({
  title: String,
  location: String,
  price: Number,
  type: String,
  area: Number,
  bedrooms: Number,
  // Add other property fields
});

const Property = mongoose.model('Property', PropertySchema);

// API Endpoints
app.get('/api/properties/search', async (req, res) => {
  const { query } = req.query;

  try {
    const results = await esClient.search({
      index: 'properties',
      body: {
        query: {
          multi_match: {
            query: query,
            fields: ['title', 'location', 'type'],
            fuzziness: 'AUTO'
          }
        }
      }
    });

    res.json(results.hits.hits.map(hit => hit._source));
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.get('/api/properties/suggest', async (req, res) => {
  const { prefix } = req.query;

  try {
    const suggestions = await esClient.search({
      index: 'properties',
      body: {
        suggest: {
          property_suggest: {
            prefix: prefix,
            completion: {
              field: 'suggest',
              fuzzy: {
                fuzziness: 1
              }
            }
          }
        }
      }
    });

    res.json(suggestions.suggest.property_suggest[0].options);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// Start server
app.listen(3001, () => {
  console.log('Server running on port 3001');
});

Step 2: Set Up Elasticsearch

Install Elasticsearch (https://www.elastic.co/guide/en/elasticsearch/reference/current/install-elasticsearch.html)
Create an index with mapping:

curl -X PUT "localhost:9200/properties" -H 'Content-Type: application/json' -d'
{
  "mappings": {
    "properties": {
      "title": { "type": "text" },
      "location": { "type": "text" },
      "type": { "type": "keyword" },
      "suggest": {
        "type": "completion",
        "analyzer": "simple",
        "search_analyzer": "simple"
      }
    }
  }
}
'

Step 3: Frontend Implementation (React)

Install Dependencies

npx create-react-app property-search --template typescript
cd property-search
npm install axios @material-ui/core @material-ui/labs

Search Component (Search.tsx)

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { TextField, List, ListItem, ListItemText, Paper } from '@material-ui/core';

interface Property {
  id: string;
  title: string;
  location: string;
  price: number;
  type: string;
}

const Search: React.FC = () => {
  const [query, setQuery] = useState('');
  const [suggestions, setSuggestions] = useState<Property[]>([]);
  const [results, setResults] = useState<Property[]>([]);
  const [isSearching, setIsSearching] = useState(false);

  useEffect(() => {
    if (query.length > 2) {
      const timer = setTimeout(() => {
        fetchSuggestions();
      }, 300);
      return () => clearTimeout(timer);
    } else {
      setSuggestions([]);
    }
  }, [query]);

  const fetchSuggestions = async () => {
    try {
      const response = await axios.get('http://localhost:3001/api/properties/suggest', {
        params: { prefix: query }
      });
      setSuggestions(response.data.map((item: any) => item._source));
    } catch (error) {
      console.error('Error fetching suggestions:', error);
    }
  };

  const handleSearch = async () => {
    if (query.trim() === '') return;

    setIsSearching(true);
    try {
      const response = await axios.get('http://localhost:3001/api/properties/search', {
        params: { query }
      });
      setResults(response.data);
    } catch (error) {
      console.error('Error searching properties:', error);
    } finally {
      setIsSearching(false);
    }
  };

  return (
    <div style={{ maxWidth: 800, margin: '0 auto' }}>
      <TextField
        fullWidth
        variant="outlined"
        label="Search properties..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
      />

      {suggestions.length > 0 && (
        <Paper style={{ position: 'absolute', zIndex: 1, width: '100%' }}>
          <List>
            {suggestions.map((property) => (
              <ListItem 
                key={property.id} 
                button
                onClick={() => {
                  setQuery(`${property.title}, ${property.location}`);
                  setSuggestions([]);
                }}
              >
                <ListItemText 
                  primary={property.title}
                  secondary={`${property.location} - ${property.type}`}
                />
              </ListItem>
            ))}
          </List>
        </Paper>
      )}

      <div style={{ marginTop: 20 }}>
        {isSearching ? (
          <p>Searching...</p>
        ) : (
          results.map((property) => (
            <div key={property.id} style={{ padding: 10, borderBottom: '1px solid #eee' }}>
              <h3>{property.title}</h3>
              <p>{property.location} - {property.type}</p>
              <p>Price: ${property.price}</p>
            </div>
          ))
        )}
      </div>
    </div>
  );
};

export default Search;

Step 4: Indexing Properties

Create a script to index existing properties:

// indexProperties.js
const mongoose = require('mongoose');
const elasticsearch = require('elasticsearch');

mongoose.connect('mongodb://localhost:27017/propertyDB', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

const Property = require('./models/Property');
const esClient = new elasticsearch.Client({ host: 'localhost:9200' });

async function indexProperties() {
  const properties = await Property.find();

  for (const property of properties) {
    await esClient.index({
      index: 'properties',
      id: property._id.toString(),
      body: {
        title: property.title,
        location: property.location,
        type: property.type,
        price: property.price,
        suggest: {
          input: [
            property.title,
            property.location,
            `${property.title} ${property.location}`,
            `${property.type} in ${property.location}`
          ]
        }
      }
    });
  }

  console.log('Indexing complete');
  process.exit();
}

indexProperties();

Step 5: Deployment Considerations

Performance Optimization:
- Implement debouncing for search input (already done in the React component)
- Cache frequent search results
- Use pagination for search results
Scalability:
- Consider using Redis for caching
- Implement load balancing for the backend
- Use a managed Elasticsearch service for production
Security:
- Add rate limiting to API endpoints
- Implement JWT authentication
- Sanitize all search inputs

Step 6: Testing the Implementation

Start your backend server:

node server.js

Start your React app:

cd property-search
npm start

Test the search functionality:
- Type at least 3 characters to see autocomplete suggestions
- Press Enter or click a suggestion to see full search results

Conclusion

This implementation provides a robust real-time search system with auto-suggestions for property listings. The combination of Elasticsearch for fast autocomplete and fuzzy matching with MongoDB for primary data storage creates a powerful search experience.

Key features:

Real-time suggestions as users type
Fuzzy matching for misspellings
Fast response times
Scalable architecture

You can extend this system by adding filters (price range, property type), sorting options, or personalized recommendations based on user behavior.
Written by think4buysale.in Software and ompropertydealer.com

Dynamic Property Listing System with Advanced Filters

Rahul Kapoor — Sun, 27 Jul 2025 19:33:06 +0000

Dynamic Property Listing System with Advanced Filters

This comprehensive guide will walk you through building a property listing system with advanced filtering capabilities using React for the frontend and Node.js/Express for the backend.

System Architecture

Frontend (React) ← API Calls → Backend (Node.js/Express) ← Queries → Database (MongoDB)

Step 1: Backend Setup

1.1 Initialize Node.js Project

mkdir property-listing-system
cd property-listing-system
npm init -y
npm install express mongoose cors dotenv

1.2 Create Server Structure

// server.js
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
require('dotenv').config();

const app = express();
app.use(cors());
app.use(express.json());

// Connect to MongoDB
mongoose.connect(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true
})
.then(() => console.log('Connected to MongoDB'))
.catch(err => console.error('MongoDB connection error:', err));

// Routes
app.use('/api/properties', require('./routes/properties'));

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

1.3 Property Model

// models/Property.js
const mongoose = require('mongoose');

const propertySchema = new mongoose.Schema({
  title: { type: String, required: true },
  description: { type: String },
  price: { type: Number, required: true },
  location: {
    city: { type: String, required: true },
    state: { type: String, required: true },
    coordinates: {
      lat: { type: Number },
      lng: { type: Number }
    }
  },
  propertyType: { 
    type: String, 
    enum: ['House', 'Apartment', 'Villa', 'Commercial'], 
    required: true 
  },
  bedrooms: { type: Number },
  bathrooms: { type: Number },
  area: { type: Number }, // in sqft
  yearBuilt: { type: Number },
  amenities: [{ type: String }],
  images: [{ type: String }],
  listedBy: { 
    type: mongoose.Schema.Types.ObjectId, 
    ref: 'User' 
  },
  status: { 
    type: String, 
    enum: ['For Sale', 'For Rent', 'Sold'], 
    default: 'For Sale' 
  },
  createdAt: { type: Date, default: Date.now }
});

module.exports = mongoose.model('Property', propertySchema);

1.4 Property Routes with Advanced Filtering

// routes/properties.js
const express = require('express');
const router = express.Router();
const Property = require('../models/Property');

// Get all properties with filters
router.get('/', async (req, res) => {
  try {
    const { 
      minPrice, 
      maxPrice, 
      propertyType, 
      bedrooms, 
      location,
      amenities,
      minArea,
      maxArea,
      sortBy,
      limit = 10,
      page = 1
    } = req.query;

    const filter = {};

    // Price range filter
    if (minPrice || maxPrice) {
      filter.price = {};
      if (minPrice) filter.price.$gte = parseInt(minPrice);
      if (maxPrice) filter.price.$lte = parseInt(maxPrice);
    }

    // Property type filter
    if (propertyType) {
      filter.propertyType = { $in: propertyType.split(',') };
    }

    // Bedrooms filter
    if (bedrooms) {
      filter.bedrooms = { $gte: parseInt(bedrooms) };
    }

    // Location filter
    if (location) {
      filter['location.city'] = new RegExp(location, 'i');
    }

    // Amenities filter
    if (amenities) {
      filter.amenities = { $all: amenities.split(',') };
    }

    // Area filter
    if (minArea || maxArea) {
      filter.area = {};
      if (minArea) filter.area.$gte = parseInt(minArea);
      if (maxArea) filter.area.$lte = parseInt(maxArea);
    }

    // Sorting
    let sortOption = { createdAt: -1 };
    if (sortBy === 'price-asc') sortOption = { price: 1 };
    if (sortBy === 'price-desc') sortOption = { price: -1 };
    if (sortBy === 'newest') sortOption = { createdAt: -1 };
    if (sortBy === 'area-asc') sortOption = { area: 1 };
    if (sortBy === 'area-desc') sortOption = { area: -1 };

    const properties = await Property.find(filter)
      .sort(sortOption)
      .limit(parseInt(limit))
      .skip((parseInt(page) - 1) * parseInt(limit));

    const total = await Property.countDocuments(filter);

    res.json({
      success: true,
      count: properties.length,
      total,
      page: parseInt(page),
      pages: Math.ceil(total / parseInt(limit)),
      data: properties
    });
  } catch (err) {
    res.status(500).json({ success: false, error: err.message });
  }
});

module.exports = router;

Step 2: Frontend Setup (React)

2.1 Create React App

npx create-react-app client
cd client
npm install axios react-router-dom @material-ui/core @material-ui/icons @material-ui/lab react-leaflet

2.2 Property Listing Component with Filters

// src/components/PropertyListing.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import {
  TextField,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
  Checkbox,
  FormGroup,
  FormControlLabel,
  Button,
  Grid,
  Paper,
  Typography,
  Slider,
  Pagination
} from '@material-ui/core';
import { FilterList, Search } from '@material-ui/icons';

const PropertyListing = () => {
  const [properties, setProperties] = useState([]);
  const [loading, setLoading] = useState(true);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [limit] = useState(10);

  // Filter states
  const [filters, setFilters] = useState({
    minPrice: '',
    maxPrice: '',
    propertyType: [],
    bedrooms: '',
    location: '',
    amenities: [],
    minArea: '',
    maxArea: '',
    sortBy: 'newest'
  });

  const propertyTypes = ['House', 'Apartment', 'Villa', 'Commercial'];
  const amenitiesList = ['Parking', 'Gym', 'Pool', 'Security', 'Garden', 'Balcony'];

  useEffect(() => {
    fetchProperties();
  }, [filters, page]);

  const fetchProperties = async () => {
    try {
      setLoading(true);

      // Convert filters to query params
      const params = new URLSearchParams();
      if (filters.minPrice) params.append('minPrice', filters.minPrice);
      if (filters.maxPrice) params.append('maxPrice', filters.maxPrice);
      if (filters.propertyType.length) params.append('propertyType', filters.propertyType.join(','));
      if (filters.bedrooms) params.append('bedrooms', filters.bedrooms);
      if (filters.location) params.append('location', filters.location);
      if (filters.amenities.length) params.append('amenities', filters.amenities.join(','));
      if (filters.minArea) params.append('minArea', filters.minArea);
      if (filters.maxArea) params.append('maxArea', filters.maxArea);
      if (filters.sortBy) params.append('sortBy', filters.sortBy);
      params.append('page', page);
      params.append('limit', limit);

      const response = await axios.get(`http://localhost:5000/api/properties?${params.toString()}`);
      setProperties(response.data.data);
      setTotal(response.data.total);
      setLoading(false);
    } catch (error) {
      console.error('Error fetching properties:', error);
      setLoading(false);
    }
  };

  const handleFilterChange = (e) => {
    const { name, value } = e.target;
    setFilters(prev => ({
      ...prev,
      [name]: value
    }));
    setPage(1); // Reset to first page when filters change
  };

  const handleAmenityToggle = (amenity) => {
    setFilters(prev => {
      const newAmenities = prev.amenities.includes(amenity)
        ? prev.amenities.filter(a => a !== amenity)
        : [...prev.amenities, amenity];
      return { ...prev, amenities: newAmenities };
    });
    setPage(1);
  };

  const handlePropertyTypeToggle = (type) => {
    setFilters(prev => {
      const newTypes = prev.propertyType.includes(type)
        ? prev.propertyType.filter(t => t !== type)
        : [...prev.propertyType, type];
      return { ...prev, propertyType: newTypes };
    });
    setPage(1);
  };

  const handlePageChange = (event, value) => {
    setPage(value);
  };

  return (
    <div style={{ padding: '20px' }}>
      <Paper elevation={3} style={{ padding: '20px', marginBottom: '20px' }}>
        <Typography variant="h6" gutterBottom>
          <FilterList /> Filters
        </Typography>

        <Grid container spacing={3}>
          {/* Location Search */}
          <Grid item xs={12} md={4}>
            <TextField
              fullWidth
              label="Location"
              name="location"
              value={filters.location}
              onChange={handleFilterChange}
              variant="outlined"
            />
          </Grid>

          {/* Price Range */}
          <Grid item xs={12} md={4}>
            <TextField
              fullWidth
              label="Min Price"
              name="minPrice"
              type="number"
              value={filters.minPrice}
              onChange={handleFilterChange}
              variant="outlined"
            />
          </Grid>
          <Grid item xs={12} md={4}>
            <TextField
              fullWidth
              label="Max Price"
              name="maxPrice"
              type="number"
              value={filters.maxPrice}
              onChange={handleFilterChange}
              variant="outlined"
            />
          </Grid>

          {/* Property Type */}
          <Grid item xs={12}>
            <Typography variant="subtitle1">Property Type</Typography>
            <FormGroup row>
              {propertyTypes.map(type => (
                <FormControlLabel
                  key={type}
                  control={
                    <Checkbox
                      checked={filters.propertyType.includes(type)}
                      onChange={() => handlePropertyTypeToggle(type)}
                      name={type}
                    />
                  }
                  label={type}
                />
              ))}
            </FormGroup>
          </Grid>

          {/* Bedrooms */}
          <Grid item xs={12} md={4}>
            <FormControl fullWidth variant="outlined">
              <InputLabel>Bedrooms</InputLabel>
              <Select
                name="bedrooms"
                value={filters.bedrooms}
                onChange={handleFilterChange}
                label="Bedrooms"
              >
                <MenuItem value="">Any</MenuItem>
                <MenuItem value={1}>1+</MenuItem>
                <MenuItem value={2}>2+</MenuItem>
                <MenuItem value={3}>3+</MenuItem>
                <MenuItem value={4}>4+</MenuItem>
                <MenuItem value={5}>5+</MenuItem>
              </Select>
            </FormControl>
          </Grid>

          {/* Area Range */}
          <Grid item xs={12} md={4}>
            <TextField
              fullWidth
              label="Min Area (sqft)"
              name="minArea"
              type="number"
              value={filters.minArea}
              onChange={handleFilterChange}
              variant="outlined"
            />
          </Grid>
          <Grid item xs={12} md={4}>
            <TextField
              fullWidth
              label="Max Area (sqft)"
              name="maxArea"
              type="number"
              value={filters.maxArea}
              onChange={handleFilterChange}
              variant="outlined"
            />
          </Grid>

          {/* Amenities */}
          <Grid item xs={12}>
            <Typography variant="subtitle1">Amenities</Typography>
            <FormGroup row>
              {amenitiesList.map(amenity => (
                <FormControlLabel
                  key={amenity}
                  control={
                    <Checkbox
                      checked={filters.amenities.includes(amenity)}
                      onChange={() => handleAmenityToggle(amenity)}
                      name={amenity}
                    />
                  }
                  label={amenity}
                />
              ))}
            </FormGroup>
          </Grid>

          {/* Sorting */}
          <Grid item xs={12} md={4}>
            <FormControl fullWidth variant="outlined">
              <InputLabel>Sort By</InputLabel>
              <Select
                name="sortBy"
                value={filters.sortBy}
                onChange={handleFilterChange}
                label="Sort By"
              >
                <MenuItem value="newest">Newest First</MenuItem>
                <MenuItem value="price-asc">Price: Low to High</MenuItem>
                <MenuItem value="price-desc">Price: High to Low</MenuItem>
                <MenuItem value="area-asc">Area: Small to Large</MenuItem>
                <MenuItem value="area-desc">Area: Large to Small</MenuItem>
              </Select>
            </FormControl>
          </Grid>

          <Grid item xs={12}>
            <Button
              variant="contained"
              color="primary"
              startIcon={<Search />}
              onClick={fetchProperties}
            >
              Apply Filters
            </Button>
          </Grid>
        </Grid>
      </Paper>

      {/* Property List */}
      {loading ? (
        <Typography>Loading properties...</Typography>
      ) : (
        <>
          <Typography variant="h6" gutterBottom>
            Showing {properties.length} of {total} properties
          </Typography>

          <Grid container spacing={3}>
            {properties.map(property => (
              <Grid item xs={12} sm={6} md={4} key={property._id}>
                <Paper elevation={2} style={{ padding: '15px', height: '100%' }}>
                  <Typography variant="h6">{property.title}</Typography>
                  <Typography color="textSecondary">{property.propertyType} in {property.location.city}</Typography>
                  <Typography variant="h5" color="primary">
                    ₹{property.price.toLocaleString()}
                  </Typography>
                  <Typography>
                    {property.bedrooms} Beds | {property.bathrooms} Baths | {property.area} sqft
                  </Typography>
                  <Typography variant="body2" style={{ marginTop: '10px' }}>
                    {property.description?.substring(0, 100)}...
                  </Typography>
                </Paper>
              </Grid>
            ))}
          </Grid>

          {/* Pagination */}
          {total > limit && (
            <div style={{ display: 'flex', justifyContent: 'center', marginTop: '20px' }}>
              <Pagination
                count={Math.ceil(total / limit)}
                page={page}
                onChange={handlePageChange}
                color="primary"
              />
            </div>
          )}
        </>
      )}
    </div>
  );
};

export default PropertyListing;

Step 3: Key Features Implemented

Advanced Filtering:
- Price range (min/max)
- Property type (multi-select)
- Bedrooms (minimum)
- Location (city search)
- Amenities (multi-select)
- Area range (min/max sqft)
Sorting Options:
- Price (low to high, high to low)
- Area (small to large, large to small)
- Newest first
Pagination:
- Server-side pagination for performance
- Configurable page size
Responsive Design:
- Works on mobile, tablet, and desktop
- Material-UI components for consistent styling

Step 4: Deployment

4.1 Backend Deployment (Heroku)

# Install Heroku CLI
heroku login
heroku create your-app-name

# Set environment variables
heroku config:set MONGODB_URI=your_mongodb_uri

# Deploy
git add .
git commit -m "Initial commit"
git push heroku master

4.2 Frontend Deployment (Netlify/Vercel)

# Build React app
npm run build

# Deploy to Netlify
netlify deploy --prod

Conclusion

This dynamic property listing system provides:

Comprehensive filtering capabilities
Clean, responsive UI
Scalable backend architecture
Easy deployment options

The system can be extended with:

User authentication
Favorites/saved properties
Map-based property search
Image uploads
Advanced analytics

Would you like me to elaborate on any specific part of this implementation?
Written by think4buysale.in Software and ompropertydealer.com

How I Developed a GST and Sqft-to-Sq Meter Calculator Using GPT-4

Rahul Kapoor — Sun, 27 Jul 2025 19:01:50 +0000

How I Developed a GST and Sqft-to-Sq Meter Calculator Using GPT-4

In this post, I’ll walk you through how I developed two simple yet powerful calculators — one for GST (Goods and Services Tax) and another to convert Square Feet to Square Meters — using the power of GPT-4. These tools are helpful for real estate clients, builders, interior designers, and vendors who need instant calculations.

🧠 Why I Built These Calculators

While working on my real estate website and property dealer listings, I realized that clients often:

Ask for GST-inclusive prices
Need to convert property area from sqft to square meter

Instead of answering repeatedly, I decided to automate it with interactive calculators — and GPT-4 helped me build them quickly and accurately.

🔧 Tools & Technologies Used

GPT-4 by OpenAI (for code generation & logic)
HTML, CSS & JavaScript (for front-end UI)
WordPress (where the calculators were embedded)
Optional: PHP for shortcode integration

🔢 1. GST Calculator

✅ Key Features

Option to calculate inclusive or exclusive GST
Customizable GST rate (5%, 12%, 18%, 28%)
Real-time result update

🧮 GST Formula Used

GST Amount = (Original Amount * GST Rate) / 100
Total (Inclusive) = Original Amount + GST Amount

💡 GPT-4 Prompt Example I Used

Write me a JavaScript GST calculator with a dropdown to select GST % and two options: include GST or exclude GST from the amount.

✅ Sample Code (Created via GPT-4)

<label>Amount: <input type="number" id="amount"></label>
<select id="gstRate">
  <option value="5">5%</option>
  <option value="12">12%</option>
  <option value="18">18%</option>
  <option value="28">28%</option>
</select>
<br>
<label><input type="radio" name="type" value="add" checked> Add GST</label>
<label><input type="radio" name="type" value="remove"> Remove GST</label>
<button onclick="calculateGST()">Calculate</button>
<p id="result"></p>

<script>
function calculateGST() {
  const amount = parseFloat(document.getElementById("amount").value);
  const rate = parseFloat(document.getElementById("gstRate").value);
  const type = document.querySelector('input[name="type"]:checked').value;

  let result = "";
  if (type === "add") {
    const gst = (amount * rate) / 100;
    result = `GST: ₹${gst.toFixed(2)}, Total: ₹${(amount + gst).toFixed(2)}`;
  } else {
    const original = amount / (1 + rate / 100);
    const gst = amount - original;
    result = `Base Amount: ₹${original.toFixed(2)}, GST: ₹${gst.toFixed(2)}`;
  }
  document.getElementById("result").innerText = result;
}
</script>

📏 2. Sqft to Sq Meter Converter

✅ Key Features

Live conversion as user types
Formula-based accuracy
Lightweight, mobile-friendly

🧮 Conversion Formula

1 Sqft = 0.092903 Sq. Meters

💡 GPT-4 Prompt Example

Create a simple JavaScript calculator to convert square feet to square meters and display results in real time.

✅ Sample Code (Created via GPT-4)

<label>Square Feet: <input type="number" id="sqft" oninput="convertToSqm()"></label>
<p>Square Meters: <span id="sqm">0</span></p>

<script>
function convertToSqm() {
  const sqft = parseFloat(document.getElementById("sqft").value);
  const sqm = sqft * 0.092903;
  document.getElementById("sqm").innerText = sqm.toFixed(4);
}
</script>

🧪 Testing & Embedding

Once the code was generated, I:

Tested it locally in a browser
Embedded it in a WordPress page using <script> or created a shortcode
Styled it using basic CSS for mobile responsiveness

🎯 Final Outcome

✅ Now visitors on my real estate or service website can:

Instantly calculate GST on property cost or services
Convert areas from sqft to sqm without needing a separate app or Google

This improves:

User experience
Engagement
Lead conversions (more trust when tools are available)

💡 Lessons Learned

GPT-4 is incredibly helpful for rapid prototyping of real-world tools
Even if you’re not a coding expert, GPT can guide you step-by-step
Small tools can make a big impact on how users interact with your website

🔚 Conclusion

Whether you’re in real estate, e-commerce, or any other business — smart tools like calculators can save time for both you and your users. With GPT-4, building these utilities is faster, cleaner, and even fun!

Written by think4buysale.in Software and ompropertydealer.com