SJ

{name} — Simple header banner with optional "dark-mode" toggle for user's choice of experience

Example property deal analysis

realyzer rental property calculator walkthrough usage — Walkthrough usage of the app

Project Brief:

Custom web application created for Real Estate Professionals

My Role:

Lead Developer

Technologies Used:

React
Redux
JavaScript
Next.js

CSS
Mapbox API
Cheerio.js
Single Page Application

Realyzer:

Provides a clean and simple-to-use interface that keeps the user focused on gaining their insights.
Eliminates the need to visit external web sites and tools for property tax or mortgage calculations
Provides the user with an optional, clean and simple PDF report of their property analysis

Project Summary:

This application was created to help real estate investors and professionals analyze residential and commercial properties, providing metrics in order to determine profitability. It analyzes and assesses any given property's net operating income and cash-on-cash return based on the property's value (the purchase price), down payment, the potential rental income, and the overall expenses of the property, including mortgage payments, property taxes, property insurance, and more.

Responsive analysis tool designed for real estate investors to determine a rental property's profitability
Retrieved average Property Tax rates from 50 different U.S. states using Cheerio.js, providing users with calculated Property Tax estimates
Built-in custom multi-variable mortgage calculator
PDF page populated with user-inputted data to save/print a PDF copy of their calculated report
Utilized Mapbox's Geocoding API to determine the X-Y coordinates from a given property address in order to select the appropriate Property Tax rates and to generate a map marker of the actual property

realyzer rental property calculator — Light Mode

realyzer rental property calculator dark mode — Dark Mode

Challenges Faced:

Mapbox's Geocoding API to Retrieve Coordinates From a Given Property Address

Using the property address the user inputs into the "Property Address" input field, that address is then dispatched to the global Redux state to be stored. The address is then used in conjunction with the Mapbox Geocoding API to retrieve the coordinates based off the address. With the response data, the U.S. state name (e.g. Alabama) from that data is used to query the previously scraped property tax data from an external source to determine the average property tax rate for that particular state. The same coordinates are also used to place the map marker directly on the home address of the property for the user's convenience. Example usage shown below.

rental property calculator mapbox geocoding address to coordinates feature — Geocoding a Property Address to Retrieve Coordinates using Mapbox API

Rendering Image Previews of Multiple User-Uploaded Property Photos

Using an input element with attributes type="file" and multiple , users can upload multiple property photos at once. These files are then processed and converted into individual image URLs using URL.createObjectURL() in order to be rendered into actual <img/> elements right next to the input element to be previewed by the user, as well as rendered onto the PDF report page.

<input
  name="uploadedPhotos" type="file"
  onChange={uploadPropertyPhotos}
  multiple
/>

// To render preview of user-uploaded property photos
const fileObj = [];
const fileArr = [];

const uploadPropertyPhotos = e => {
  fileObj.push(e.target.files);
  for (let i = 0; i < fileObj[0].length; i++) {
    fileArr.push(URL.createObjectURL(fileObj[0][i]))
  }
  const { name } = e.target;
  dispatch(changeValue(fileArr, name))
}

Mortgage Calculation Formula

For the mortgage calculation, the key variables to keep track of were the Property Value, the user's Down Payment Percentage (e.g. 20% down), the Interest Rate (e.g. 4%), and the Length of the Loan (e.g. 30 years). These numbers were then plugged into a complex mortgage calculation formula to determine the user's monthly mortgage payment. The user then has the freedom to adjust the Down Payment and Interest Rate via range inputs to dynamically adjust the monthly payments.

  Mortgage calculation formula:
  M = P [ r(1 + r)^n ] / [ (1 + r)^n – 1]
    P = The Principal loan amount
    r = Monthly Interest Rate
    n = Number of months required to repay the loan