RentalAI: Microservices Architecture

RentalAI is a rental price prediction platform built with a modern microservices architecture. The system consists of three main services: a Next.js frontend, a Flask backend API, a dedicated ML prediction service, a MongoDB database, and a AWS S3 storage, as well as a wrapper for the Realtor API. This architecture allows for independent scaling, deployment, and maintenance of each component.

Frontend Service

Next.js application serving the user interface

Used:

Next.jsReactTypeScriptTailwind CSSHooks

Backend API Service

Flask API handling data retrieval and processing

Used:

FlaskPythonSwaggerPandasCORS

ML Prediction Service

Dedicated service for training and running the Random Forest machine learning model

Used:

FlaskScikit-learnNumPyPickleJupyter NotebookSwaggerCORS

MongoDB

Database for storing test and property data

Used:

MongoDBNoSQL

AWS S3 Storage

Cloud storage for images and charts

Used:

AWS S3Bucket

API Wrapper

Wrapper of external APIs for fetching property data

Used:

Realtor APIOpenStreetMap

System Architecture Diagram

Frontend ServiceNext.jsReact, TypeScript, TailwindBackend API ServiceFlaskPython, Pandas, SwaggerML Prediction ServiceFlask, PickleScikit-learn, SHAP, Random ForestAWS S3Image StorageVisualizationsMongoDBTest DataProperty RecordsGET /api/get_dataGET /api/get_image_pathsPOST /api/get_predictionFetch/Store ChartsFetch/Store VisualizationsSeed/Fetch Test DataSeed Property Data(server start-up)API Wrapper
Frontend
Backend API
ML Service
S3 Storage
MongoDB

The architecture follows a microservices pattern where each component has a specific responsibility. The frontend communicates with both the main backend API and a Random Forest ML service for predictions. Data visualizations are stored in AWS S3 for efficient delivery, while MongoDB stores test and property data for the ML service.

External APIs

Realtor API

Provides real-time property listings and details

Implementation: Used wrapper to fetch property data which is then stored in CSV files, later used for initial seeding of the database

OpenStreetMap

Provides mapping and geolocation services

Implementation: Used for the realtor API wrapper to get properties within a set of coordinates

Project Structure

components/BudgetMap.tsx

Server-safe container component that filters properties by budget range and dynamically loads the Leaflet map

components/MapComponent.tsx

Client-side Leaflet implementation for interactive property visualization

components/header.tsx

Navigation header component with user menu

pages/index.tsx

Homepage with landing image from S3

pages/predictions.tsx

Rental price prediction page

pages/listings/index.tsx

Property listings page with search and filtering

pages/listings/property/[id].tsx

Individual property details page

pages/dashboard.tsx

Analytics dashboard with charts from S3

pages/about.tsx

Developer documentation (this page)

next.config.mjs

Next.js configuration with image domains

data/df_set.csv

Main dataset for property listings

external/realtorAPI.py

Wrapper for the Realtor API

static/rent_prices_histo.png

Rent distribution histogram

static/rent_prices_plot.png

Rent prices over time chart

templates/dataframe.html

Template for displaying property data

app.py

Main Flask application with API endpoints

requirements.txt

Python dependencies

data/test_set.csv

Test data for predictions and feature importance

static/rent_feat_import.png

Feature importance visualization

ml_server.py

Dedicated ML prediction service

ML.ipynb

Jupyter notebook for model development

model.pkl

Serialized machine learning model

API Endpoints

Backend API

/api/get_data

Retrieves property listings

/api/get_rent_by_month

Returns rent prices over time chart

/api/get_rent_distr

Returns rent distribution chart

ML Service

/api/get_prediction

Predicts rental price based on input features

/api/get_importance

Returns feature importance visualization

/api/get_test_data

Retrieves test data from MongoDB