Skip to content

ekhtiar-uddin/BasaFinder-Client

BranchesTags

Repository files navigation

RentMode - Property Rental Management Platform

RentMode Logo

A modern, full-stack property rental management platform built with Next.js, TypeScript, and Tailwind CSS

Next.js TypeScript Tailwind CSS React Redux Toolkit

Live Demo • Report Bug • Request Feature

📋 Table of Contents

🏠 Overview

RentMode is a comprehensive property rental management platform that connects landlords, tenants, and administrators through a modern web application. The platform features a multi-role user system with role-based access control, interactive property search with map integration, and a complete property management workflow.

Key Highlights

  • Multi-Role System: Admin, Landlord, and Tenant roles with specific permissions
  • Interactive Property Search: Advanced filtering with map integration
  • Real-time Applications: Property application system with status tracking
  • Modern UI/UX: Built with Tailwind CSS and Radix UI components
  • Responsive Design: Mobile-first approach with modern design patterns
  • State Management: Redux Toolkit with persistence
  • Type Safety: Full TypeScript implementation

✨ Features

🔐 Authentication & Authorization

  • JWT-based authentication with refresh tokens
  • Role-based access control (Admin, Landlord, Tenant)
  • Secure password hashing with bcrypt
  • Google reCAPTCHA integration
  • Protected routes with middleware

🏘️ Property Management

  • Landlords: Create, edit, delete property listings
  • Tenants: Browse, search, and apply to properties
  • Admins: Oversee all listings and user management
  • Image upload with FilePond integration
  • Property details with amenities and location data

🔍 Advanced Search & Discovery

  • Interactive map integration (Mapbox/MapLibre)
  • Advanced filtering (price, location, bedrooms, amenities)
  • Real-time search results
  • Property comparison tools
  • Location-based property discovery

📱 User Dashboards

  • Landlord Dashboard: Property management, application handling
  • Tenant Dashboard: Application tracking, payment management
  • Admin Dashboard: User management, platform oversight
  • Real-time notifications and status updates

💳 Payment Integration

  • Payment processing for property applications
  • Secure payment gateway integration
  • Transaction history and receipts
  • Payment status tracking

🛠️ Tech Stack

Frontend

State Management

Maps & Visualization

Development Tools

  • Package Manager: npm/yarn
  • Linting: ESLint with Next.js config
  • Build Tool: Turbopack (Next.js 15)
  • Deployment: Vercel

Additional Libraries

📋 Prerequisites

Before running this project, ensure you have the following installed:

  • Node.js (v18.0.0 or higher)
  • npm (v9.0.0 or higher) or yarn (v1.22.0 or higher)
  • Git (for version control)

Recommended Development Environment

  • VS Code with TypeScript extensions
  • Chrome DevTools for debugging
  • Postman or Insomnia for API testing

🚀 Installation

1. Clone the Repository

git clone https://github.com/your-username/basafinder-client.git
cd basafinder-client

2. Install Dependencies

# Using npm
npm install

# Or using yarn
yarn install

3. Environment Setup

Create a .env.local file in the root directory:

# Copy the example environment file
cp .env.example .env.local

4. Start Development Server

# Using npm
npm run dev

# Or using yarn
yarn dev

The application will be available at http://localhost:3000

🔧 Environment Variables

Create a .env.local file in the root directory with the following variables:

# API Configuration
NEXT_PUBLIC_BASE_API=http://localhost:5000/api/v1

# Google reCAPTCHA
NEXT_PUBLIC_RECAPTCHA_CLIENT_KEY=your_recaptcha_client_key
NEXT_PUBLIC_RECAPTCHA_SERVER_KEY=your_recaptcha_server_key

# Geocoding API (OpenCage or Google Maps)
NEXT_PUBLIC_GEOCODING_API_KEY=your_geocoding_api_key

# Optional: Custom port
PORT=3000

Environment Variables Explained

Variable Description Required
NEXT_PUBLIC_BASE_API Backend API base URL ✅
NEXT_PUBLIC_RECAPTCHA_CLIENT_KEY Google reCAPTCHA client key ✅
NEXT_PUBLIC_RECAPTCHA_SERVER_KEY Google reCAPTCHA server key ✅
NEXT_PUBLIC_GEOCODING_API_KEY Geocoding service API key ✅
PORT Custom port for development ❌

📖 Usage

🏠 Public Access

  1. Homepage: Browse featured properties and platform information
  2. Property Search: Use advanced filters to find properties
  3. Property Details: View comprehensive property information
  4. Registration: Create account as Tenant or Landlord

👤 Tenant Features

  1. Browse Properties: Search and filter available rentals
  2. Apply to Properties: Submit rental applications
  3. Track Applications: Monitor application status
  4. Make Payments: Complete payments for approved applications
  5. View Contact Info: Access landlord contact after approval

🏢 Landlord Features

  1. Create Listings: Add new property listings with details
  2. Manage Properties: Edit and delete existing listings
  3. Review Applications: View and respond to tenant applications
  4. Approve/Reject: Manage application status
  5. Share Contact: Provide contact information after approval

👨‍💼 Admin Features

  1. User Management: View and manage all users
  2. Property Oversight: Monitor all property listings
  3. Platform Management: Ensure compliance and quality
  4. Analytics: View platform statistics and reports

🔐 Authentication

Default Admin Credentials

  • Email: admin@gmail.com
  • Password: 12345678

⚠️ Security Note: Change default admin credentials in production

📁 Project Structure

src/
├── app/                          # Next.js App Router
│   ├── (WithCommonLayout)/       # Public pages layout
│   ├── (WithDashboardLayout)/    # Dashboard pages layout
│   ├── search/                   # Property search functionality
│   ├── login/                    # Authentication pages
│   └── layout.tsx               # Root layout
├── components/                   # Reusable components
│   ├── modules/                 # Feature-specific components
│   ├── ui/                      # UI component library
│   └── shared/                  # Shared components
├── services/                     # API service layer
│   ├── AuthService/             # Authentication services
│   ├── Product/                 # Property management
│   └── Application/             # Application handling
├── redux/                       # State management
│   ├── features/               # Redux slices
│   └── store.ts                # Store configuration
├── types/                       # TypeScript type definitions
├── lib/                         # Utility functions
├── constants/                   # Application constants
└── providers/                   # React context providers

Key Directories

  • src/app/: Next.js App Router pages and layouts
  • src/components/: Reusable React components
  • src/services/: API integration and data fetching
  • src/redux/: Global state management
  • src/types/: TypeScript type definitions
  • public/: Static assets and images

🔌 API Integration

The application integrates with a backend API for data management. Key API endpoints include:

Authentication

  • POST /auth/register - User registration
  • POST /auth/login - User authentication
  • POST /auth/refresh-token - Token refresh
  • POST /auth/change-password - Password change

Properties

  • GET /property - List properties with filters
  • POST /property - Create new property
  • PUT /property/:id - Update property
  • DELETE /property/:id - Delete property

Applications

  • POST /application/create-application - Submit application
  • GET /application - List applications
  • PUT /application/:id - Update application status

Users

  • GET /user - Get user profile
  • PUT /user/edit-profile - Update profile
  • PUT /user/:id/status - Update user status

🚀 Deployment

Vercel (Recommended)

  1. Connect Repository: Link your GitHub repository to Vercel
  2. Configure Environment: Add environment variables in Vercel dashboard
  3. Deploy: Automatic deployment on push to main branch
# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Manual Deployment

# Build the application
npm run build

# Start production server
npm start

Environment Variables for Production

Ensure all required environment variables are set in your deployment platform:

  • NEXT_PUBLIC_BASE_API
  • NEXT_PUBLIC_RECAPTCHA_CLIENT_KEY
  • NEXT_PUBLIC_RECAPTCHA_SERVER_KEY
  • NEXT_PUBLIC_GEOCODING_API_KEY

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the Repository

git clone https://github.com/your-username/basafinder-client.git
cd basafinder-client

2. Create a Feature Branch

git checkout -b feature/your-feature-name

3. Make Your Changes

  • Follow the existing code style
  • Add TypeScript types for new features
  • Update documentation as needed
  • Test your changes thoroughly

4. Commit and Push

git add .
git commit -m "feat: add your feature description"
git push origin feature/your-feature-name

5. Create a Pull Request

  • Provide a clear description of your changes
  • Include screenshots for UI changes
  • Reference any related issues

Development Guidelines

  • Code Style: Follow ESLint configuration
  • TypeScript: Use strict type checking
  • Components: Use functional components with hooks
  • State Management: Use Redux Toolkit for global state
  • Testing: Add tests for new features

📝 Available Scripts

# Development
npm run dev          # Start development server with Turbopack
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint

# Git operations (custom script)
npm run commit       # Add, commit, and push changes

🐛 Troubleshooting

Common Issues

  1. Port Already in Use

    # Kill process on port 3000
npx kill-port 3000

  2. Environment Variables Not Loading

    • Ensure .env.local file exists in root directory
    • Restart development server after adding variables

  3. TypeScript Errors

    # Clear TypeScript cache
rm -rf .next
npm run dev

  4. Dependencies Issues

    # Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

📞 Support

Made with ❤️ by the RentMode Team

GitHub stars GitHub forks GitHub issues

About

A full-stack rental platform connecting landlords, tenants, and an admin. Landlords manage listings; tenants search, request, and pay rent upon approval, with contact details shared.

basa-finder-client-two.vercel.app/

Topics

redux typescript nextjs

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages