Rental Calculator app

Hi all!

RentalCalculator.app

@JoeyKarczewski and I were inspired by @bradlymathews post in the community about his rental expense tracking application a few months back. So much so that we started working on a retool app that offers real estate investors a clear view of rental property investment data. After viewing google sheet templates and online calculators like this one and this one, we noticed that they didn’t emphasize property comparison and focused more on analyzing only a single property. We figured we could make something way more user-friendly inside of Retool instead. Without further ado - here is our take:

2

This app has a lot of cool features (we think), like a tile view that dynamically changes based on applied filters (no custom components used). We also have some different views to highlight various items in the app, based on what a user is looking to emphasize (e.g. comparing properties vs viewing a single property). For example - if you want to drill down into a property, we have a pop-out details pane for users to see more detailed information (as well as edit or delete properties). We often apply a lot of these different layouts and principals to the internal apps we build too at boldtech.dev.

We also have a modal to set defaults when adding a property, where users can set their default values according to the area in which they might be investing.We wanted to make this a public application for the first go-around so we just add data to a temp state instead of a db currently, we hope to offer some premium options to the app soon, which would include data storage. A quick rundown of how it all works:When you open the app, we offer the option to test it by adding 10 fake properties to your view, which quickly gives you an idea of what this app is capable of showing you.

1

Our collapsible menus work by hiding components on the screen, based on the value of a temp state, giving the illusion of menus opening up and closing (check out the tutorial for how to do this here How to create a collapsible side container in Retool for filters, extra data, charts and more!).The filterable, dynamic tile view was accomplished by using containers within a Listview and some JavaScript (tutorial coming soon).

3

The app features a lot of custom CSS to hack design elements that are otherwise not yet native in Retool. Things like making the star-ratings un-editable and disabled - but still yellow and centered, and making the buttons in a wizard a different color and centered.Our graphs are handled by JavaScript queries and provide data over a relevant time period. We have implemented three different graphs again by using the tabbed container component, mixed with different plotly.js graphs. You can check out our first version over at RentalCalculator.app

10 Likes

Thanks for sharing this, @AdamMiranda -- great work and so cool how you got inspiration from @bradlymathews to spin up your own rental calculator app. Kudos!

3 Likes

Impressive work!
This app shows how you can use Retool out of the box, but you can also torture it to get almost anything you want...
I was looking for a way to avoid the greying of the rating component when disabled. I see that you have achieved it. Care to share your hack?

2 Likes

Hey dmnC,
Thanks for the love!
As for the custom CSS, First, set your rating to "disabled: true", then add the CSS and it will override the grey color.

._ckLCd._2hxT2 {
  filter: none; /* This allows us to override */
  display: flex; /* allows the content to be centered */ 
  justify-content: center; /* Push the content to the center */
}

._d4YMI._2yN1j {
  rating-icon-fill: yellow;
}

As a little bonus, I threw in the way we were able to center the rating stars into the tiles because it uses the same CSS selector and that isn't a default option.

@AdamMiranda

You are most gracious.
After inspecting for the component selector names of my app I found that the following was sufficient to obtain the behaviour I was looking for (no grey and disabled):

/* to give color to the disabled rating component*/
._13VWQ._2ig1O { /* selector address found by inspecting the element*/
  filter: none; /* This allows us to override the default behavior */
}
1 Like