Property Pulse

Property Pulse is a comprehensive web application meticulously crafted to revolutionize property management and streamline property search processes. It offers an intuitive and user-friendly platform tailored to meet the diverse needs of property owners, real estate agents, and prospective buyers alike.

Features

• User authentication with Google & Next Auth
• User authorization
• Route protection
• User profile with user listings
• Property Listing CRUD
• Property image upload (multiple)
• Property Search
• Internal messages with 'unread' notification
• Photoswipe image gallery
• Toast notification
• Property bookmarking / saved properties
• Property sharing to social media
• Loading spinner
• Responsive design (Tailwind CSS)
• Custom 404 page

Technologies Used

Technologies Used

• Next.js: Next.js is a React framework for building server-side rendered and statically generated web applications.
• Tailwind CSS: Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
• MongoDB: MongoDB is a general-purpose, document-based, distributed database built for modern application developers and for the cloud era.
• Mongoose: Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment.
• NextAuth.js: NextAuth.js is a complete authentication solution for Next.js applications, providing robust authentication features with various providers.
• React Icon: React Icon is a library providing a collection of customizable SVG icons for use in React applications, enhancing the visual appeal and user experience.
• Photoswipe: Photoswipe is a JavaScript image gallery library for mobile and desktop, offering a smooth and intuitive experience for viewing images in a lightbox format.
• Cloudinary: Cloudinary is a cloud-based image and video management service offering powerful features such as image optimization, manipulation, and storage.
• React Spinners: React Spinners is a library providing customizable loading spinners for React applications, improving user experience during data fetching or processing.
• React Toastify: React Toastify is a notification library for React applications, offering customizable toast notifications to provide users with feedback and alerts.
• React Share: React Share is a library for easily adding social media sharing functionality to React applications, enabling users to share content across various platforms seamlessly.

Getting Started

Follow these steps to set up the project locally on your machine:

Prerequisites

Make sure you have the following software installed on your system:

• Node.js
• NPM
• Git

Installation

1. Clone the repository to your local machine:

git clone https://github.com/sothulthorn/property-pulse.git

2. Create a .env file:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY={YOUR_NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
CLERK_SECRET_KEY={YOUR_CLERK_SECRET_KEY}

NEXT_PUBLIC_DOMAIN={YOUR_NEXT_PUBLIC_DOMAIN}
NEXT_PUBLIC_API_DOMAIN={YOUR_NEXT_PUBLIC_API_DOMAIN}

MONGODB_URI={YOUR_MONGODB_URI}

GOOGLE_CLIENT_ID={YOUR_GOOGLE_CLIENT_ID}
GOOGLE_CLIENT_SECRET={YOUR_GOOGLE_CLIENT_SECRET}

NEXTAUTH_URL={YOUR_NEXTAUTH_URL}
NEXTAUTH_URL_INTERNAL={YOUR_NEXTAUTH_URL_INTERNAL}
NEXTAUTH_SECRET={YOUR_NEXTAUTH_SECRET}

CLOUDINARY_CLOUD_NAME={YOUR_CLOUDINARY_CLOUD_NAME}
CLOUDINARY_API_KEY={YOUR_CLOUDINARY_API_KEY}
CLOUDINARY_API_SECRET={YOUR_CLOUDINARY_API_SECRET}

4. Install dependencies:

npm install

5. Start the development server:

npm run dev

Usage

Visit http://localhost:3000/ in your browser to access the full application.

Project Preview

Home

Properties

Property Details

Add Property

Message