Property Pulse

Live link: https://next-js-property-pulse-chi.vercel.app/

A sleek and efficient web application designed to help you find your next rental property.

Features

Property Pulse is packed with powerful features to streamline your rental property search:

• ✅ User Authentication – Secure login via Google & NextAuth.
• ✅ Authorization & Route Protection – Access control for enhanced security.
• ✅ User Profile – Manage user listings directly.
• ✅ Property Listing CRUD – Full control over property listings.
• ✅ Image Upload – Upload multiple property images.
• ✅ Property Search – Find properties that match your criteria.
• ✅ Messaging with Unread Notifications – Keep track of property inquiries.
• ✅ Photoswipe Image Gallery – Browse property images seamlessly.
• ✅ Mapbox Integration – Interactive map view of property locations.
• ✅ Toast Notifications – Real-time feedback on actions.
• ✅ Property Bookmarking – Save properties for later.
• ✅ Social Media Sharing – Share listings on social platforms.
• ✅ Loading Spinners – Smooth and user-friendly loading experience.
• ✅ Responsive Design – Fully optimized for mobile and desktop.
• ✅ Custom 404 Page – Unique experience for unavailable routes.
• ✅ Next.js Actions – Enhanced performance with server actions.

---

Tech Stack

Property Pulse leverages a range of cutting-edge technologies to deliver a modern, responsive experience:

• Frontend: Next.js, React, Tailwind CSS
• Database: MongoDB with Mongoose
• Authentication: NextAuth.js
• UI Enhancements: React Icons, Photoswipe
• Image Management: Cloudinary
• Maps & Geocoding: Mapbox, React Map GL, React Geocode
• UI Components: React Spinners, React Toastify, React Share

---

Getting Started

Prerequisites

To set up Property Pulse, you’ll need the following accounts and credentials:

• Node.js – version 18 or higher
• MongoDB Atlas – Create a cluster here
• Cloudinary – Sign up here
• Google Cloud Console – Set up here
• Mapbox – Sign up here

Environment Variables

Rename the env.example file to .env and populate it with your credentials:

• MONGODB_URI: MongoDB connection string from MongoDB Atlas
• GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET: Google credentials
• NEXTAUTH_SECRET: Secret key for NextAuth (generate using openssl rand -base64 32)
• CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY, CLOUDINARY_API_SECRET: Cloudinary credentials
• NEXT_PUBLIC_MAPBOX_TOKEN: Mapbox token
• NEXT_PUBLIC_GOOGLE_GEOCODING_API_KEY: Google Geocoding API key

Installation

Install the dependencies:

npm install