FlexBnB

FlexBnB is a full-stack property rental marketplace built with Next.js (App Router), React, TypeScript, and MongoDB. The platform provides a complete property discovery and management experience, enabling users to browse listings, search for properties, communicate with owners, save favorites, and manage rental properties through a modern, responsive interface.

The application combines server-side and client-side rendering capabilities offered by Next.js to deliver fast page loads, dynamic user experiences, and scalable data management while maintaining a clean separation between frontend interactions and backend business logic.

Core Features

Property Discovery

FlexBnB provides multiple ways for users to discover rental properties, including:

• Featured property listings

• Paginated property browsing

• Advanced property search

• Location-based filtering

• Property type filtering

• Detailed property pages

Each property listing includes comprehensive information, rich media assets, and interactive location visualization to help users make informed rental decisions.

Property Management

Authenticated property owners can manage their listings through a complete CRUD workflow, including:

• Creating new property listings

• Updating existing properties

• Managing property details and amenities

• Uploading and organizing property images

• Removing listings

This enables owners to maintain accurate and up-to-date rental inventory directly from the platform.

Authentication & User Accounts

User authentication is powered by NextAuth.js with Google OAuth, providing secure and seamless account access.

Authenticated users gain access to personalized features such as:

• Profile management

• Saved properties (favorites/bookmarks)

• Property ownership management

• Direct messaging capabilities

• User-specific activity and listing management

Session-based authentication ensures protected access to account and property management functionality.

Messaging & Communication

The platform includes a built-in messaging system that facilitates direct communication between:

• Property seekers

• Property owners

This allows prospective tenants to inquire about listings directly from the platform without relying on external communication channels.

Media Management

FlexBnB leverages Cloudinary for image storage and delivery, providing:

• Multi-image uploads

• Optimized image delivery

• Responsive image transformations

• Efficient media management

This ensures fast-loading property galleries while maintaining high visual quality across devices.

Mapping & Geolocation

Location services are a central part of the user experience.

Interactive Maps

The platform integrates Mapbox GL through react-map-gl to provide:

• Interactive property maps

• Custom location markers

• Geospatial property visualization

• Enhanced location exploration

Geocoding

Address-to-coordinate conversion is handled through:

• Google Geocoding API

• react-geocode

This allows human-readable addresses to be converted into geographic coordinates for:

• Map placement

• Location-aware search

• Property visualization

User Experience & Interface

The frontend is built with a modern React and TypeScript stack and styled using Tailwind CSS.

Additional UI enhancements include:

Notifications

• React Toastify

• Real-time user feedback

• Success and error notifications

Image Galleries

• PhotoSwipe integration

• Touch-friendly interactions

• Full-screen image viewing

• Responsive media browsing

The result is a highly responsive and intuitive experience across desktop, tablet, and mobile devices.

Application Architecture

The project follows a modular Next.js App Router architecture.

Routing Layer

The application is organized around the app/ directory, including:

• Public-facing pages

• Protected user pages

• Dynamic property routes

• Server-rendered content

API Layer

Serverless API endpoints are implemented within app/api/* and handle functionality such as:

• Property management

• Authentication workflows

• Favorites/bookmarks

• User messaging

• Image upload operations

These endpoints encapsulate business logic while exposing clean interfaces to the frontend.

Data Layer

The backend uses MongoDB as the primary database, with both:

• MongoDB Native Driver

• Mongoose ODM

This combination provides flexible document storage while maintaining schema validation and streamlined data access patterns.

Domain Modeling

Business entities and database models are organized within the models/ directory, helping maintain a clean separation between application logic and persistence concerns.

Technology Stack

Frontend

• Next.js (App Router)

• React

• TypeScript

• Tailwind CSS

• React Toastify

• PhotoSwipe

Backend

• Next.js API Routes

• NextAuth.js

• Google OAuth

Database

• MongoDB

• Mongoose

• MongoDB Native Driver

Cloud & Integrations

• Cloudinary

• Mapbox GL

• react-map-gl

• Google Geocoding API

• react-geocode

Architectural Summary

FlexBnB is a modern property rental platform that combines powerful search capabilities, geospatial visualization, secure authentication, media management, and real-time user interactions into a unified experience. By leveraging Next.js, MongoDB, Cloudinary, Mapbox, and NextAuth, the platform delivers a scalable, responsive, and feature-rich solution for both property seekers and property owners.