Render properties from JSON file

_theme_files/index.html

@@ -53,7 +53,7 @@
             <a class="flex flex-shrink-0 items-center" href="/index.html">
               <img
                 class="h-10 w-auto"
-                src="/images/logo-white.png"
+                src="images/logo-white.png"
                 alt="PropertyPulse"
               />
 

app/properties/page.jsx

@@ -1,5 +1,22 @@
+import properties from '@/properties.json';
+import PropertyCard from '@/components/PropertyCard';
+
 const PropertiesPage = () => {
-  return <div>PropertiesPage</div>;
+  return (
+    <section className='px-4 py-6'>
+      <div className='container-xl lg:container m-auto px-4 py-6'>
+        {properties.length === 0 ? (
+          <p>No properties found</p>
+        ) : (
+          <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
+            {properties.map((property, index) => (
+              <PropertyCard property={property} key={index} />
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
 };
 
 export default PropertiesPage;

components/PropertyCard.jsx

@@ -0,0 +1,83 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { FaBed, FaBath, FaRulerCombined, FaMoneyBill } from 'react-icons/fa';
+
+const PropertyCard = ({ property }) => {
+  const getRateDisplay = () => {
+    const { rates } = property;
+    if (rates.monthly) {
+      return `$${rates.monthly.toLocaleString()}/mo`;
+    } else if (rates.weekly) {
+      return `$${rates.weekly.toLocaleString()}/wk`;
+    } else if (rates.nightly) {
+      return `$${rates.nightly.toLocaleString()}/night`;
+    }
+  };
+
+  return (
+    <div className='rounded-xl shadow-md relative'>
+      <Image
+        src={`/images/properties/${property.images[0]}`}
+        alt=''
+        height={0}
+        width={0}
+        sizes='100vw'
+        className='w-full h-auto rounded-t-xl'
+        priority={true}
+      />
+      <div className='p-4'>
+        <div className='text-left md:text-center lg:text-left mb-6'>
+          <div className='text-gray-600'>{property.type}</div>
+          <h3 className='text-xl font-bold'>{property.name}</h3>
+        </div>
+        <h3 className='absolute top-[10px] right-[10px] bg-white px-4 py-2 rounded-lg text-blue-500 font-bold text-right md:text-center lg:text-right'>
+          {getRateDisplay()}
+        </h3>
+
+        <div className='flex justify-center gap-4 text-gray-500 mb-4'>
+          <p>
+            <FaBed className='md:hidden lg:inline mr-2' /> {property.beds}
+            <span className='md:hidden lg:inline'> Beds</span>
+          </p>
+          <p>
+            <FaBath className='md:hidden lg:inline mr-2' /> {property.baths}
+            <span className='md:hidden lg:inline'> Baths</span>
+          </p>
+          <p>
+            <FaRulerCombined className='md:hidden lg:inline  mr-2' />{' '}
+            {property.square_feet}
+            <span className='md:hidden lg:inline'> sqft</span>
+          </p>
+        </div>
+
+        <div className='flex justify-center gap-4 text-green-900 text-sm mb-4'>
+          <p>
+            <FaMoneyBill className='md:hidden lg:inline mr-2' /> Weekly
+          </p>
+          <p>
+            <FaMoneyBill className='md:hidden lg:inline mr-2' /> Monthly
+          </p>
+        </div>
+
+        <div className='border border-gray-100 mb-5'></div>
+
+        <div className='flex flex-col lg:flex-row justify-between mb-4'>
+          <div className='flex align-middle gap-2 mb-4 lg:mb-0'>
+            <i className='fa-solid fa-location-dot text-lg text-orange-700'></i>
+            <span className='text-orange-700'>
+              {' '}
+              {property.location.city}, {property.location.state}
+            </span>
+          </div>
+          <Link
+            href={`/properties/${property._id}`}
+            className='h-[36px] bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-center text-sm'
+          >
+            Details
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default PropertyCard;

next.config.mjs

@@ -1,4 +1,19 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'lh3.googleusercontent.com',
+        pathname: '**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'res.cloudinary.com',
+        pathname: '**',
+      },
+    ],
+  },
+};
 
 export default nextConfig;

properties.json

@@ -0,0 +1,384 @@
+[
+  {
+    "_id": "1",
+    "owner": "1",
+    "name": "Boston Commons Retreat",
+    "type": "Apartment",
+    "description": "This is a beautiful apartment located near the commons. It is a 2 bedroom apartment with a full kitchen and bathroom. It is available for weekly or monthly rentals.",
+    "location": {
+      "street": "120 Tremont Street",
+      "city": "Boston",
+      "state": "MA",
+      "zipcode": "02108"
+    },
+    "beds": 2,
+    "baths": 1,
+    "square_feet": 1500,
+    "amenities": [
+      "Wifi",
+      "Full kitchen",
+      "Washer & Dryer",
+      "Free Parking",
+      "Hot Tub",
+      "24/7 Security",
+      "Wheelchair Accessible",
+      "Elevator Access",
+      "Dishwasher",
+      "Gym/Fitness Center",
+      "Air Conditioning",
+      "Balcony/Patio",
+      "Smart TV",
+      "Coffee Maker"
+    ],
+    "rates": {
+      "weekly": 1100,
+      "monthly": 4200
+    },
+    "seller_info": {
+      "name": "John Doe",
+      "email": "john@gmail.com",
+      "phone": "617-555-5555"
+    },
+    "images": ["a1.jpg", "a2.jpg", "a3.jpg"],
+    "is_featured": false,
+    "createdAt": "2024-01-01T00:00:00.000Z",
+    "updatedAt": "2024-01-01T00:00:00.000Z"
+  },
+  {
+    "_id": "2",
+    "owner": "1",
+    "name": "Cozy Downtown Loft",
+    "type": "Apartment",
+    "description": "A cozy downtown loft with great city views.",
+    "location": {
+      "street": "45 Main Street",
+      "city": "New York",
+      "state": "NY",
+      "zipcode": "10001"
+    },
+    "beds": 1,
+    "baths": 1,
+    "square_feet": 1800,
+    "amenities": [
+      "Wifi",
+      "Full kitchen",
+      "Washer & Dryer",
+      "Free Parking",
+      "Hot Tub",
+      "24/7 Security",
+      "Wheelchair Accessible",
+      "Elevator Access",
+      "Dishwasher",
+      "High-Speed Internet",
+      "Air Conditioning",
+      "Smart TV",
+      "Outdoor Grill/BBQ"
+    ],
+    "rates": {
+      "weekly": 1000,
+      "monthly": 4000
+    },
+    "seller_info": {
+      "name": "Jane Smith",
+      "email": "jane@gmail.com",
+      "phone": "212-555-5555"
+    },
+    "images": ["b1.jpg", "b2.jpg", "b3.jpg"],
+    "is_featured": false,
+    "createdAt": "2024-01-02T00:00:00.000Z",
+    "updatedAt": "2024-01-02T00:00:00.000Z"
+  },
+  {
+    "_id": "3",
+    "owner": "2",
+    "name": "Luxury Condo with a View",
+    "type": "Condo",
+    "description": "Experience luxury in this stunning condo with breathtaking views.",
+    "location": {
+      "street": "500 Lux Lane",
+      "city": "Los Angeles",
+      "state": "CA",
+      "zipcode": "90001"
+    },
+    "beds": 3,
+    "baths": 2,
+    "square_feet": 2200,
+    "amenities": [
+      "Wifi",
+      "Full kitchen",
+      "Washer & Dryer",
+      "Free Parking",
+      "Hot Tub",
+      "24/7 Security",
+      "Wheelchair Accessible",
+      "Elevator Access",
+      "Dishwasher",
+      "Swimming Pool",
+      "Gym/Fitness Center",
+      "Air Conditioning",
+      "Smart TV",
+      "Coffee Maker"
+    ],
+    "rates": {
+      "nightly": 200,
+      "weekly": 750,
+      "monthly": 3300
+    },
+    "seller_info": {
+      "name": "David Johnson",
+      "email": "david@gmail.com",
+      "phone": "213-555-5555"
+    },
+    "images": ["c1.jpg", "c2.jpg", "c3.jpg"],
+    "is_featured": false,
+    "createdAt": "2024-01-03T00:00:00.000Z",
+    "updatedAt": "2024-01-03T00:00:00.000Z"
+  },
+  {
+    "_id": "4",
+    "owner": "2",
+    "name": "Charming Cottage Getaway",
+    "type": "Cottage Or Cabin",
+    "description": "Escape to this charming cottage for a peaceful retreat.",
+    "location": {
+      "street": "123 Countryside Lane",
+      "city": "Austin",
+      "state": "TX",
+      "zipcode": "78701"
+    },
+    "beds": 1,
+    "baths": 1,
+    "square_feet": 900,
+    "amenities": [
+      "Fireplace",
+      "Outdoor Grill/BBQ",
+      "Balcony/Patio",
+      "Coffee Maker"
+    ],
+    "rates": {
+      "weekly": 2000
+    },
+    "seller_info": {
+      "name": "Emily Davis",
+      "email": "emily@gmail.com",
+      "phone": "512-555-5555"
+    },
+    "images": ["d1.jpg", "d2.jpg", "d3.jpg"],
+    "is_featured": false,
+    "createdAt": "2024-01-04T00:00:00.000Z",
+    "updatedAt": "2024-01-04T00:00:00.000Z"
+  },
+  {
+    "_id": "5",
+    "owner": "3",
+    "name": "Modern Downtown Studio",
+    "type": "Studio",
+    "description": "Stay in style in this modern downtown studio apartment.",
+    "location": {
+      "street": "75 Urban Avenue",
+      "city": "Chicago",
+      "state": "IL",
+      "zipcode": "60601"
+    },
+    "beds": 1,
+    "baths": 1,
+    "square_feet": 900,
+    "amenities": [
+      "High-Speed Internet",
+      "Smart TV",
+      "Air Conditioning",
+      "Gym/Fitness Center",
+      "Outdoor Grill/BBQ"
+    ],
+    "rates": {
+      "weekly": 1100,
+      "monthly": 4200
+    },
+    "seller_info": {
+      "name": "Michael Brown",
+      "email": "michael@gmail.com",
+      "phone": "312-555-5555"
+    },
+    "images": ["e1.jpg", "e2.jpg", "e3.jpg"],
+    "is_featured": true,
+    "createdAt": "2024-01-05T00:00:00.000Z",
+    "updatedAt": "2024-01-05T00:00:00.000Z"
+  },
+  {
+    "_id": "6",
+    "owner": "3",
+    "name": "Seaside Retreat",
+    "type": "House",
+    "description": "Escape to this seaside house for a relaxing getaway.",
+    "location": {
+      "street": "456 Oceanfront Drive",
+      "city": "Miami",
+      "state": "FL",
+      "zipcode": "33101"
+    },
+    "beds": 4,
+    "baths": 3,
+    "square_feet": 2800,
+    "amenities": [
+      "Beach Access",
+      "Swimming Pool",
+      "Balcony/Patio",
+      "Smart TV",
+      "Outdoor Grill/BBQ"
+    ],
+    "rates": {
+      "nightly": 500,
+      "weekly": 2500
+    },
+    "seller_info": {
+      "name": "Sarah Wilson",
+      "email": "sarah@gmail.com",
+      "phone": "305-555-5555"
+    },
+    "images": ["f1.jpg", "f2.jpg", "f3.jpg"],
+    "is_featured": true,
+    "createdAt": "2024-01-06T00:00:00.000Z",
+    "updatedAt": "2024-01-06T00:00:00.000Z"
+  },
+  {
+    "_id": "7",
+    "owner": "4",
+    "name": "Rustic Cabin in the Woods",
+    "type": "Cottage Or Cabin",
+    "description": "Experience nature in this cozy rustic cabin.",
+    "location": {
+      "street": "789 Forest Lane",
+      "city": "Denver",
+      "state": "CO",
+      "zipcode": "80201"
+    },
+    "beds": 2,
+    "baths": 1,
+    "square_feet": 1100,
+    "amenities": [
+      "Fireplace",
+      "Outdoor Grill/BBQ",
+      "Hiking Trails Access",
+      "Pet-Friendly"
+    ],
+    "rates": {
+      "nightly": 475,
+      "weekly": 2000
+    },
+    "seller_info": {
+      "name": "Robert Anderson",
+      "email": "robert@gmail.com",
+      "phone": "303-555-5555"
+    },
+    "images": ["g1.jpg", "g2.jpg", "g3.jpg"],
+    "is_featured": false,
+    "createdAt": "2024-01-07T00:00:00.000Z",
+    "updatedAt": "2024-01-07T00:00:00.000Z"
+  },
+  {
+    "_id": "8",
+    "owner": "5",
+    "name": "Ski-In/Ski-Out Chalet",
+    "type": "Chalet",
+    "description": "Hit the slopes from this cozy ski-in/ski-out chalet.",
+    "location": {
+      "street": "321 Mountain Road",
+      "city": "Aspen",
+      "state": "CO",
+      "zipcode": "81611"
+    },
+    "beds": 3,
+    "baths": 2,
+    "square_feet": 1800,
+    "amenities": [
+      "Ski Equipment Storage",
+      "Fireplace",
+      "Balcony/Patio",
+      "Smart TV"
+    ],
+    "rates": {
+      "nightly": 300,
+      "weekly": 1100
+    },
+    "seller_info": {
+      "name": "Jennifer Martin",
+      "email": "jennifer@gmail.com",
+      "phone": "970-555-5555"
+    },
+    "images": ["h1.jpg", "h2.jpg", "h3.jpg"],
+    "is_featured": false,
+    "createdAt": "2024-01-08T00:00:00.000Z",
+    "updatedAt": "2024-01-08T00:00:00.000Z"
+  },
+  {
+    "_id": "9",
+    "owner": "6",
+    "name": "Mountain View Retreat",
+    "type": "House",
+    "description": "Enjoy stunning mountain views from this spacious retreat.",
+    "location": {
+      "street": "600 Summit Drive",
+      "city": "Boulder",
+      "state": "CO",
+      "zipcode": "80301"
+    },
+    "beds": 4,
+    "baths": 3,
+    "square_feet": 2400,
+    "amenities": [
+      "Mountain View",
+      "Hiking Trails Access",
+      "Air Conditioning",
+      "Smart TV",
+      "Outdoor Grill/BBQ"
+    ],
+    "rates": {
+      "weekly": 1000,
+      "monthly": 3800
+    },
+    "seller_info": {
+      "name": "Lisa Taylor",
+      "email": "lisa@gmail.com",
+      "phone": "303-555-5555"
+    },
+    "images": ["i1.jpg", "i2.jpg", "i3.jpg"],
+    "is_featured": false,
+    "createdAt": "2024-01-09T00:00:00.000Z",
+    "updatedAt": "2024-01-09T00:00:00.000Z"
+  },
+  {
+    "_id": "10",
+    "owner": "7",
+    "name": "Historic Downtown Loft",
+    "type": "Apartment",
+    "description": "Step back in time with a stay in this historic downtown loft.",
+    "location": {
+      "street": "123 History Lane",
+      "city": "Philadelphia",
+      "state": "PA",
+      "zipcode": "19101"
+    },
+    "beds": 2,
+    "baths": 1,
+    "square_feet": 1200,
+    "amenities": [
+      "High-Speed Internet",
+      "Air Conditioning",
+      "Smart TV",
+      "Coffee Maker"
+    ],
+    "rates": {
+      "weekly": 550,
+      "monthly": 2100
+    },
+    "seller_info": {
+      "name": "Matthew Harris",
+      "email": "matthew@gmail.com",
+      "phone": "215-555-5555"
+    },
+    "images": ["j1.jpg", "j2.jpg", "j3.jpg"],
+    "is_featured": false,
+    "createdAt": "2024-01-10T00:00:00.000Z",
+    "updatedAt": "2024-01-10T00:00:00.000Z"
+  }
+]