Overview

Rentify is a web application designed to simplify the rental process for both property owners and tenants.
In the post-pandemic world, the demand for real estate has surged, especially in cities with high populations and IT offices. RENTIFY aims to bridge the gap between property owners and tenants by providing a platform where they can easily connect based on their requirements.

Technologies Used

• Frontend : Vite, Redux Toolkit, React JS, Tailwind CSS
• Backend : Java, Maven, Spring Boot, REST-APIs, MySQL Database
• Additional Packages : Axios, Animate.CSS, Yup, Formik, Toastify, Skeleton, Swiper, Cloudinary

Web View Snapshots

Project Structure

Frontend Pages

• Home: Landing page which gives overview about the company, milestones, awards and testimonials.
• About : About us page displays company details and services.
• PropertyList: Shows a list of available properties.
• PropertyDetails: Displays additional information of a property.
• MyProfile: Displays user's profile information, also allows users to edit details.
• MyPropertyList: Lists properties added by the user.
• Error: 404 Error page for invalid paths.

Forms

• LoginForm: User login form.
• SignUpForm: User Sign up form.
• AddProperty: Form to add a new property.
• UpdateProperty: Form to update the property details.

Backend Layers

• Controller Layer: Handles HTTP requests and responses.
• Service Layer: Contains business logic.
• Repository Layer: Interacts with the database.
• Configuration: Contains Spring Boot configuration and Cors Configuration.

Features

User Authentication

• Sign up: Users can sign up with their details.
• Login: Users can log in to the application.
• Logout: Users can log out from the application.
• Edit Details: Users can edit their details (name, city).

Property Management

• Add Property: Logged-in users can add a new property.
• Search Properties: Allows user to search property by name, city, state or country.
• View Properties: All users can view the list of available properties.
• View Property Details: Logged-in users can view detailed information about a property.
• My Properties: Logged-in users can view, update, and delete their properties.
• Sort Properties: Users can sort property by rent and by date posted (both high to low and low to high)
• Pagination: Properties are fetched all at once and displayed in a paginated view, ensuring efficient navigation through large lists of properties.

API Endpoints

User APIs

• GET : /user/id: Get user details by userId.
• POST: /user/check-email : Check user already exists.
• POST : /user/signin: Sign in a user.
• POST : /user/login: Log in a user.
• PUT : /user: Update user details.

Property APIs

• POST : /properties: Add a new property.
• GET : /properties/latest-properties: Get recent listings by date.
• GET : /properties: Get all properties with pagination, searching, and sorting.
  • Query Parameters:
    • page: Page number (default: 0)
    • size: Number of items per page (default: 8)
    • search: Search term for property name or location
    • sort: Sort field and direction (e.g., 'rent,desc' or 'createdAt,asc')
• GET : /properties/{pid}: Get property details by property ID.
• GET : /properties/owner/{id}: Get properties of a specific user.
• PUT : /properties: Update property details.
• DELETE : /properties/{id}: Delete a property.

Pagination, Searching, and Sorting

• The /properties endpoint now supports server-side pagination, searching, and sorting.
• Clients should use the query parameters to request specific pages, apply search filters, and specify sorting criteria.
• The API returns paginated results along with metadata about the total number of pages and items.

Example API Usage

Fetching Properties

GET /properties?page=0&size=10&search=apartment&sort=rent,desc

This request will:

• Fetch the first page of results
• Return 10 items per page
• Search for properties with "apartment" in the name or location
• Sort the results by rent in descending order

Mobile View Snapshots

Frontend (Client) Directory Structure

RentifyClient
          ├─── public
          ├─── src
          │       ├── Assets
          │       ├── Components
          │       │         ├── Authentication
          │       │                 ├── AuthModal.jsx
          │       │                 ├── LoginForm.jsx
          │       │                 ├── SignUpForm.jsx
          │       │         ├── Footer.jsx
          │       │         ├── ImageUploader.jsx
          │       │         ├── Navbar.jsx
          │       │         ├── Pagination.jsx
          │       │         ├── PropertyCard.jsx
          │       │         ├── PropertyCard2.jsx
          │       │         ├── PropertySearch.jsx
          │       │         ├── SortProperties.jsx
          │       │         ├── ShimmerCard.jsx
          │       │         ├── PropertyDetailsShimmer.jsx
          │       │         ├── Testimonials.jsx
          │       ├── Pages
          │       │         ├── Forms
          │       │                ├── AddProperty.jsx
          │       │                ├── UpdateProperty.jsx
          │       │         ├── About.jsx
          │       │         ├── Home.jsx
          │       │         ├── Error.jsx
          │       │         ├── MyProertyList.jsx
          │       │         ├── MyProfile.jsx
          │       │         ├── PropertyDetails.jsx
          │       │         ├── PropertyList.jsx
          │       │         
          │       ├── Redux
          │       |         ├── Reducers
          │       |         │         ├── uerSlice.jsx
          |       |         ├── redux-store.jsx
          │       ├── Services
          │       |         ├── Constants.jsx
          │       |         ├── DeleteAsset.jsx
          │       |         ├── Endpoints.jsx
          │       |         ├── Icons.jsx
          │       ├── custom.css
          │       ├── index.css
          │       ├── index.jsx
          │       ├── Main.jsx
          │
          ├─── .env
          ├─── .gitignore
          ├─── index.html
          ├─── package.json
          ├─── package-lock.json
          ├─── postcss.config.js
          ├─── tailwind.config.js
          ├─── vite.config.js

Setting up the Rentify-Client

1. Navigate to the frontend directory
2. Install dependencies
3. Run the frontend

Execute these commands one by one :

cd RentifyClient

npm install

npm start

Backend (Server) Directory Structure

RentifyServer
        ├── src
        │     ├── main
        │     │     ├── java
        │     │     │     ├── in
        │     │     │     │     ├── rentify
        │     │     │     │     │     ├── RentifyServerApplication.java
        │     │     │     │     │     ├── ServletInitializer.java
        │     │     │     │     │     ├── config
        │     │     │     │     │     │       ├── CorsConfig.java
        │     │     │     │     │     │       ├── SecurityConfig.java
        │     │     │     │     │     ├── controller
        │     │     │     │     │     │       ├── PropertyController.java
        │     │     │     │     │     │       ├── UserController.java
        │     │     │     │     │     ├── dao
        │     │     │     │     │     │       ├── AdditionalDetailsRepository.java
        │     │     │     │     │     │       ├── PropertyRepository.java
        │     │     │     │     │     │       ├── UserRepository.java
        │     │     │     │     │     ├── dto
        │     │     │     │     │     │       ├── LoginDetails.java
        │     │     │     │     │     │       ├── UserDTO.java
        │     │     │     │     │     ├── model
        │     │     │     │     │     │       ├── AdditionalDetails.java
        │     │     │     │     │     │       ├── Property.java
        │     │     │     │     │     │       ├── User.java
        │     │     │     │     │     ├── service
        │     │     │     │     │             ├── PropertyService.java
        │     │     │     │     │             ├── UserService.java
        │     │     ├── resources
        │     │     │     ├── application.properties
        │     │     │     ├── static
        │     │     │     ├── templates
        │     │     ├── webapp
        │     ├── test
        │     │     ├── java
        │     │     ├── resources

Setting up the Rentify-Server

1. Clone the repository

git clone https://github.com/your-repo/rentify.git

cd RentifyServer

2. Set up the database: Create a MySQL database named rentify.
3. Update the database configuration in application.properties file.
4. Build and run the backend

mvn clean install

mvn spring-boot:run

Contribution

Contributions are welcome! If you have any suggestions, improvements, or would like to contribute to any of the projects, feel free to open an issue or submit a pull request.