Property Pulse

A highly interactive and user-friendly web application designed to streamline your rental property search.

Features

• Authentication: User authentication and authorization with Google & Next Auth for managing saved searches.
• API Integration: Fetch live data from database via RESTful APIs, ensuring up-to-date information.
• Route protection: API routes with comprehensive route protection.
• User profile: Managing user profile with user listings.
• Property listing CRUD: Add, view, edit and delete properties.
• Image upload (Multiple): Image uploads with Cloudinary integration.
• Property Search: Easily search for rental properties based on key-words or location.
• Property Details: Get detailed information about each property, complete with images, descriptions and contact form.
• Messages: Internal messages with "unread" notifications.
• Bookmarking List: Save and manage your favorite properties for quick access and easy comparison.
• Interactive Map: View property locations on an interactive map.
• Photoswipe: Lightbox images gallery.
• Responsive Design (Tailwind): Optimized for desktop, tablet, and mobile devices.
• Server-Side Rendering (SSR): Leverage Next.js features to provide fast page load times.
• User-Friendly: Custom 404 page, Loading spinners, Toast notifications, Pagination, Sharing to social media.

Technologies Used

• Next.js
• React
• Tailwind CSS
• MongoDB
• Mongoose
• NextAuth.js
• Cloudinary
• Photoswipe
• Mapbox
• React Map GL
• React Geocode
• React Icons
• React Share
• React Spinners
• React Toastify

Getting Started

Prerequisites

Get or Sign up at:

1. Node.js (v18 or higher).
2. MongoDB Atlas account and a cluster.
3. Cloudinary account.
4. Google console account.
5. Mapbox account.

.env file

Rename the env.example file to .env and set up the environment variables:

• MONGODB_URI=your_mongodb_database_url
• GOOGLE_CLIENT_ID= your_google_client_id
• GOOGLE_CLIENT_SECRET= your_google_client_secret
• NEXTAUTH_SECRET=your_nextauth_secret (generate command: openssl rand -base64 32)
• CLOUDINARY_CLOUD_NAME=your_cloudinary_name
• CLOUDINARY_API_KEY=your_cloudinary_api_key
• CLOUDINARY_API_SECRET=your_cloudinary_api_secret
• NEXT_PUBLIC_GOOGLE_GEOCODING_API_KEY=your_mapbox_api_key

Install dependencies

npm install

Run the development server

npm run dev

Open your browser at http://localhost:3000 to see the app in action.