Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sothulthorn/property-pulse
Property Pulse is a comprehensive web application meticulously crafted to revolutionize property management and streamline property search processes.
https://github.com/sothulthorn/property-pulse
cloudinary mongodb mongoose nextauth nextjs14 photoswipe react-icons react-share react-spinner react-toastify reactjs tailwindcss
Last synced: about 7 hours ago
JSON representation
Property Pulse is a comprehensive web application meticulously crafted to revolutionize property management and streamline property search processes.
- Host: GitHub
- URL: https://github.com/sothulthorn/property-pulse
- Owner: sothulthorn
- Created: 2024-04-06T04:30:17.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-04-11T12:00:07.000Z (7 months ago)
- Last Synced: 2024-04-12T13:34:38.112Z (7 months ago)
- Topics: cloudinary, mongodb, mongoose, nextauth, nextjs14, photoswipe, react-icons, react-share, react-spinner, react-toastify, reactjs, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 13.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Property Pulse
![](/assets/screenshots/home.png)
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
- [x] User authentication with Google & Next Auth
- [x] User authorization
- [x] Route protection
- [x] User profile with user listings
- [x] Property Listing CRUD
- [x] Property image upload (multiple)
- [x] Property Search
- [x] Internal messages with 'unread' notification
- [x] Photoswipe image gallery
- [x] Toast notification
- [x] Property bookmarking / saved properties
- [x] Property sharing to social media
- [x] Loading spinner
- [x] Responsive design (Tailwind CSS)
- [x] 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](https://nodejs.org/)
- [NPM](https://docs.npmjs.com/getting-started)
- [Git](https://git-scm.com/downloads)### Installation
1. Clone the repository to your local machine:
```bash
git clone https://github.com/sothulthorn/property-pulse.git
```2. Create a `.env` file:
```bash
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:
```bash
npm install
```5. Start the development server:
```bash
npm run dev
```### Usage
Visit `http://localhost:3000/` in your browser to access the full application.
## Project Preview
### Home
![](/assets/screenshots/home.png)
### Properties
![](/assets/screenshots/property.png)
### Property Details
![](/assets/screenshots/property-details.png)
### Add Property
![](/assets/screenshots/add-property.png)
### Message
![](/assets/screenshots/message.png)