Fetch properties

app/properties/page.jsx

@@ -1,7 +1,11 @@
-import properties from '@/properties.json';
 import PropertyCard from '@/components/PropertyCard';
+import Property from '@/models/Property';
+import connectDB from '@/config/database';
+
+const PropertiesPage = async () => {
+  await connectDB();
+  const properties = await Property.find({});
 
-const PropertiesPage = () => {
   return (
     <section className='px-4 py-6'>
       <div className='container-xl lg:container m-auto px-4 py-6'>

components/HomeProperties.jsx

@@ -1,11 +1,16 @@
-import properties from '@/properties.json';
 import Link from 'next/link';
 import PropertyCard from './PropertyCard';
+import connectDB from '@/config/database';
+import Property from '@/models/Property';
 
-const HomeProperties = () => {
-  const recentProperties = properties
-    .sort(() => Math.random() - Math.random())
-    .slice(0, 3);
+const HomeProperties = async () => {
+  await connectDB();
+
+  // Get the 3 latest properties
+  const recentProperties = await Property.find({})
+    .sort({ createdAt: -1 })
+    .limit(3)
+    .lean();
 
   return (
     <>
@@ -25,6 +30,7 @@ const HomeProperties = () => {
           </div>
         </div>
       </section>
+
       <section className='m-auto max-w-lg my-10 px-6'>
         <Link
           href='/properties'