Rentity

A web application to help you find your next rental property.

Visit Live Demo

Rentity is a comprehensive Full-Stack application built with Next.js 14, designed for discovering and managing rental properties with ease. The platform offers secure user authentication, dynamic property management, multi-image uploads, interactive map integration, and more. It leverages modern technologies such as Next.js Actions, Tailwind CSS, MongoDB, Cloudinary, and others to provide a fast, responsive, and user-friendly experience.

Features

Rentity offers the following features:

• User authentication with Google & Next Auth
• Route protection
• User profile with user listings
• Multiple property image upload via cloudinary
• Property search functionality
• Internal messages with 'unread' notifications
• Photoswipe image gallery
• Toast notifications
• Property bookmarking / saved properties
• Property sharing to social media
• Loading spinners
• Responsive design (Tailwind CSS)
• Custom 404 page
• Next.js Actions

Screenshots

Here are some screenshots of the Rentity platform:

Home page & Footer

Properties page as well as pagination

Search Properties

Google Sign-In

Property details page

Profile

Add & Edit Property

Bookmark Property

Messages between recipient and owner

Technologies Used

Rentity is built with the following technologies:

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

Getting Started

Prerequisites

• Node.js version 18 or higher
• MongoDB Atlas account and a cluster. # and create a cluster at MongoDB
• Cloudinary account. # at Cloudinary
• Google console account. # at Google Cloud

.env File

Rename the example.env file to .env and fill in the following environment variables:

• Get your MongoDB connection string from your MongoDB Atlas cluster and add it to MONGODB_URI.
• Get your Google client ID and secret from your Google console account and add them to GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET.
• Add a secret to NEXTAUTH_SECRET. You can generate it with the following command:

  openssl rand -base64 32

• Get your Cloudinary cloud name, API key, and API secret from your Cloudinary account and add them to CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY, and CLOUDINARY_API_SECRET.

Install Dependencies

npm install

Run the Development Server

npm run dev

Open http://localhost:3000 with your browser to see the result.