How to Build a Real Estate Streamlit App in Python

In this video, I'm going to show you how to build your own web app so that you can analyze on market deals from Redfin, you'll be able to bring in your downloaded file and automatically get property metrics, including distribution charts, and a quick way to seek opportunities.

Ariel Herrera 0:00

In this video, I'm going to show you how to build your own web app so that you can analyze on market deals from Redfin, you'll be able to bring in your downloaded file and automatically get property metrics, including distribution charts, and a quick way to seek opportunities. The first step is looking at the notebooks down below. There are two, the first one being demo property data Redfin app. This is a code along walkthrough. The second one is the property data Redfin app, which already has the code there, you can go into each of these notebooks within Google collab, I highly suggest for you to watch prior videos that I have of introduction to Python with real estate if you're new to Python. However, if you're brand new, watch some videos, but still hadn't really got the hang of Python. That is okay, I'm going to walk step by step, so you can create this similar web app. Right now I'm on Google collab. These are free tools to use to code in Python that Google provides. When you open up the link, you're going to come over to file. And when you go to file, you will save a copy of this notebook in your own drive. This will give you edit access, so you can actually run the Python code within your own space. Now, the way we're going to build this app is using streamlet. If you're brand new to streamlet, it may blow your mind of how much power there is behind it. Back in the day, if you wanted to create even a simple web application, you had to know front end code, meaning you had to know HTML and how to structure a website in a certain way. This makes it hard for those of us that are on the back end like data analysts, data scientists and data engineers to be able to quickly spin up web applications for our small teams or even more wide scale use. Now with streamline, you don't need to know any front end experience. So while this video plays, you'll see that you only need to import streamlet. And then you can quickly write what you want to push into your web app. So here we had my first web app is now displayed within a web page, we can quickly edit this and also have models in machine learning or AI that we have displayed within our web application. So now going back, when we're looking to get started, we can actually first look at the gallery, the gallery is a great way for you to get an understanding of streamlines capabilities. Say for finance and business. If I go to the fidelity Account Overview, this is an example of what another developer was able to create only with streamlet. In Python, this is a simple web app that allows us to view our fidelity account, we can upload our file. And then we can quickly view for our account and tickers within a fidelity account. What's the last price price change gains and our account losses and values per symbol. Now the way this is built out, if we go to Streamlight documentation is via components, we are going to walk through the components that we will use to build out our web application. You can also reference the cheat sheet that has information on how to install and run streamlet as well, how to use interactive widgets and more. To get started, let's go to the Get Started piece we have here are installation and main concepts. This is covered in the property cash flow app as that app is actually deployed live. But for this simple tutorial, we're going to go to create an app, everything we're going to do is in Google collab. That way, you don't have to have Python installed on your machine at all. So when you come here, you can scroll down. Our first part is we want to install streamlet. We also need to install a local tunnel that will allow us to view the contents of the web page. So let's run this cell we can either click the play button here, or Shift Enter. Once the packages are loaded in, we can go on to our next step. This is actually writing a streamlet app to a file called app.pi. Now if we go over to our create an app section and scroll down and documentation extremely gives an example of using Uber data. So we can first start off with importing streamlet as a St. So let's import that back into our notebook and add it in as code. So we're importing streamlet. And we're going to nickname it s t when we call the functions. So now when we go back to the documentation, it says every good app has a title. So let's add one. So we can copy this code directly. And we can enter below S T dot title, Uber pickups in New York City. So what we're doing here is we're using a function from Streamlight library. It is title. And if we want to know what title is, and how it's used, we can go over to streamlet. Title. This is under API references, SC dot title, you could just quickly search streamlet title on Google. And we could see this function takes in two arguments, the body so the text that you want to display, and then an option of an anchor. So in this example, as T dot title, we are displaying this is a title. Now if we go back into our code, we are displaying Uber pickups in New York City. Let's change this. Let's put our name. So I'll put Hi my name is area. And I'm going to run this code. So has written my code into an app.py file. Now we want to run streamlet in the background, let's click play. And we want to expose it to a port so that we could view this locally, our URL set, we can click the URL. This will open a new page, it's going to ask us to continue. Let's click Continue. And now we can see our web app. And it has my title. Hi, my name is Ariel. Just as simple as that we've created a web app that is running locally. Now mine is a dark background, you may have a white background. This is dependent on how your settings are for your machine. Now if you go over to the right hand side and click the hamburger, you can go to settings. And if you'd like instead of using System Settings, you can set it to dark or too light. This will automatically change the font color as it was weight previously, and now is black. We can exit out of this and go back into our notebook. Now for our app. We don't want to put the title as our name. We want to put property data Redfin. So we're going to go back here and change his title to property data Redfin. I have here an image of a house as a shortcut for Max, you can go to control command and space, hold them all at once. And then you'll see your icons pop up. And if you go over to city house, scroll down, you can select a house there.

And the next step that we have is offering some directions of what this application is. I have here the purpose of this app is to provide summary stats based on your Redfin search. So I'm going to highlight and copy this text, bring it back into my app, start a new line by hitting Enter Ctrl V for paste. And instead of this being a title, this is going to be marked down. If we go back to our documentation, our text elements, one of them being marked down. This basically allows us to display a string or text onto our HTML page. There are only two arguments here, body, and then unsafe, allow HTML, which is already set. So all we need to input is body. Again, we could scroll down and view examples. So let's go back into our notebook. And let's wrap this with st dot markdown, and put it in quotes either single or double. There is no preference on either or now we have our local app running here. Let's end it. And we're going to rerun our app that py file, and re expose our port. We will see that our website changes here for our local app. This is going to have to be done each and every time since we're running this on Google collab and not on our local machine. Awesome. Now we have our title. And we have our subtitle, it describes what our app is doing. Let's finish out this homepage so that it looks just like this, where we have upload a CSV file, and then we allow the user to drop in their file. So let's go to our code. And the first part that we want to mimic is going to be upload a CSV file. Now this text is slightly bigger than the previous text, because we're using a header. And the way to enter in a header in Markdown is pretty simple. So we start with S T dot markdown. And in quotes, let's do header four. So let's add four different pound signs. And we're going to enter here, Upload CSV file. And if you don't want to use the icons in the method that I did, you could also put here within a colon point down, and it will make an emoji that actually points down. So we can stop this here and rerun ourselves. And then we could view this new code click to continue. And we have upload a CSV file, and it's pointing down because we specify what the emoji would be within markdown. I'm going to close out of both of these stopper code. And for our last part of our homepage, we want to allow the user to actually upload a file. So if we go back into our documentation, we can either search for upload a file, or we can go directly into Google and type in streamlet. Upload File. And then we'll see here from the streamlet docks where the file uploader function is located, we could go straight into scrolling down and look at a live example. This example we specify S T dot file uploader, we name what we want the header to be, which is choose a CSV file. And we can have the option of accepting multiple files, which in this case, we will not do. And we label this to a variable. And then once we have that variable, we do something underneath to each of the files. So let's start off first with just copying the first line here to upload the file. Once we add in the line, we see we have uploaded underscore files as our variable. And we can remove this except multiple files. Now let's run these cells and see what our output looks like. We now see that we could drag in our CSV file. So let's actually browse our file, select it, and click Open. We see that our file is loaded, but nothing has happened. All we receive is the file name. Let's actually export this file back onto our web application so we could view its contents. In order to do so we want to read this in as a data frame. So let's go back into our code. And let's see here, if uploaded file is not none, meaning that the variable has something within it. So we have a file, then let's read our CSV file and our CSV file. We could use pandas, so PD dot read CSV, and we'll call this the uploaded file. Now in order for us to use pandas, we have to make sure that we have it imported as a library. Pandas allows us to work with tabular data with rows and columns. So in this case, our row and column CSV file will be read in as a data frame, and will be really neat, it's we can actually export this, so we can view it in our HTML contents. So if we go to data display elements, we could see S T dot data frame. And scrolling down to the bottom, we can see if we have a sample data frame, we can write out this data frame using S T dot data frame. And we should be able to view the rows and columns. Let's copy this code. Bring it over. And now stop our previous code and rerun our three cells here. Oh no, we have an error. Every time we have an error within streamlet. We're going to have a red box here. And it's going to tell us what the error is and the trace back to where it was located. So our name uploaded file is not defined. Here. We could see that because we copy this over from the main docs. We named this uploaded files plural, when in fact, it's just one file that we're uploading. So let's remove the s at the end. Stop recode and rerun ourselves. Great. Now we have no errors. We see our title description header here and we can drag and drop a file, I'm going to drag in my file, it loads. And then we see the file contents. We have all 350 listings here. And we also have all of the columns from the CSV file all the way down to the location. Great. So we've just completed the section of making our homepage for our web app. Let's go on to make the metrics. So we can summarize our data. The next step is to set our property metrics. Here, we want to have four summary metrics that describe our dataset. Going to streamlabs documentation, if we go to S T dot metric, metric displays big bold font, an indicator, we can also put of how the metric has changed, we need to enter in a label and a value. This is an example of temperature, and the change from maybe the previous month or whatever time period, we can also have multiple metrics of in one single row, we can do this by specifying different columns, and use S T dot columns function to do so instead of us having three separate columns. If we go back to the main app, and I drag in a file, we want to have four separate columns. So let's go into our notebook. I added it in commentary so that we can separate our code. So we had our homepage that we completed last. Now, we want to move on to metrics. So I just copied that code. And I'm putting here, metrics, I'm indenting. This since we're doing everything after the file uploads, I'm going to remove displaying a data frame. Since ideally, we don't want to have that within our app, the first step is creating the header. So I'll use S T dot markdown, and put here that we want to h2. So we'll put here property metrics and go into the docs. This is an example of using metrics for multiple columns. So I'll just copy this directly pasted in here and changes slightly. So we want four columns, I'll change this to four, the names will start with total, so the total number of properties, which would be the length of the data frame, then afterwards, we want to have the average price. And if we use our data frame, here,

we have a column called price. And pandas makes it super simple for a single column always to do is just state the mean, and then we're able to get the average across the entire column. Now the next one is average days on market short is d o n days on market, we can copy this previous code, the column is called days on market. Since ran the average, we can also obtain the mean here. Last metric that we want to get is price per square foot. So we'll change this to column four. And we could change days on market to PPSQF T for price per square foot. To calculate price per square foot, we already have a column within our data set. So I'm going to pull over that Excel file. So we could both look at it together within our columns. If we go over to column P, there's price per square foot, so I'm copying that directly. And I'm going to replace this with days on market. Now we have all of our columns set. So let's run our app.py file and view what our web application looks like. In my case, I received an error. It says script execution error, indentation error on indent does not match any outer indentation level. So let's go back here. Well, we can see that very slightly, the read CSV file, the metrics part is not in the same indentation. So I'm going to use Shift Tab to go all the way back and it looks like this is a little bit uneven. It could have been from the copy paste that we did from the documentation. So I'm going to also do Shift Tab to move this all the way back. Then tab once and now we see it's in the same line, Python needs us to have the same indentation. So let's try rerunning this code to make sure that this works. Now our error is removed, because we fix our indentation, we can drag in our file. And once we do, we see each error metrics. But it's not formatted neatly. Total is fine, because it's a whole number. But average price days on market and price per square feet are in float values. So they really extend far out and it's not visually appealing. So we can go back here and actually modify the formatting of our contents. So I'm going to stop this from running. And here, I'm going to put in double quotes $1 sign, and then in curly brackets, colon, comma, and finish my bracket. Then wrap this in double quotes, dot format all lowercase, and wrap this around our mean value. So what I'm stating here is I want this look like a currency. And to have a comma after every three digits. Let's run these cells. Great. Now we can see the average price looks a lot better. However, it might just be easier if we use 387k versus showing this entire length. So we could split this value in order to do so I'm going to copy the code from the answer key. Make sure that indentation is correct. And now quickly walk you through it. Here we are formatting our price, we're splitting on that comma, and then we're adding a K to show that this is in the 1000s. I'm also adding a helper string, which if we go back here and go to our documentation, the help string is an optional tooltip. So when you hover something pops up, that gets displayed next to the metric label going back into our code, I then add this as well for the remainder of the metrics. We can also add this helper into our total number as well, we could put here help equals, this will represent the number of properties in the search. Now let's rerun the cell as well as the ones below to view what our content looks like now that we have our numbers formatted. And we have helper functions. Awesome for property metrics, we can actually hover over and see what these values mean. Total is total number of properties in our search. We have average price, days on market, and average price per square feet. We completed our metrics and next we'll be adding charts. The next step of our app is to create charts that we can visualize some of our metrics such as days on market, price, and price per square foot. streamlet makes it super easy to add charts as a partner with Plotly Express. So if we go over to documentation, and we see chart elements, they have their own native charts as well, we could look at Plotly underscore chart Plotly Express is one of my favorite tools within Python in order to graph our data with limited amount of code. Here we can see towards the bottom that if we have a dataset, we can plot our Plotly figure simply by passing in fake. If we go to the Plotly Express documentation, we could look at a simple histogram. by copying the code here, we can bring this over into our own example. I've already added some documentation where we can put charts. So first, we have to import the package Plotly Express. So let's add that into where we have our imports. Next, this is reading in a data frame, but we already have our own. So we can remove this here. And for our x what we want to display, we're going to start with days on market. So let's put here days on market. And let's give our chart a title. We could put here comma title and put days on market histogram chart. Going back to documentation, we can copy this figure go back answer this row and we can remove this big dot show and we are going to show our Plotly chart by passing in our fake object that has our Plotly histogram that is going to show us days on market we should add add a header as well help we've done it for property metrics. So let's copy that code and set a property metrics, we can replace this with charts. Let's run the cells to see if we have successfully been able to create a histogram chart for days on market drag in our file. And here, our chart is loading. Awesome. We have our days on market histogram chart, but down to the starting to get a little bit busy as we go along with our app. If we want to add more charts, it's going to be hard to view everything in one section. So we can use streamlet expanders in order to hide and show our components. So let's go to Google and type in streamlet expander. To view the contents of this function, let's scroll down. And expanders are really simple, we use with S T dot expander. And we give it a title. Here, this expander is underneath a chart. And it says see explanation. But there's nothing there because we are initially hiding this. Now if we click the expander, we get more information. And this helps to make sure the web applications a little bit less crowded. So let's copy this code up top

and put this in front of our finger. And we could take our finger or Chart tab to make sure that we are in line underneath expander. And let's change this as well. And we could just put charts, but we want to show this data upfront. So let's go back to our function and expanded is set to false. If true, the expander is an expanded state automatically. So let's put a comma here. And for that argument expanded, let's set it to true. Now I'm going to go to the answer key and add in our two remaining charts. This will be a boxplot. That's going to show us price. And then we have another histogram chart that's going to display price per square foot. Let's stop our current code. And let's rerun these three cells. When we upload a file and scroll down, we can see each of our charts, we have days on market histogram, price box plot, and price per square foot histogram chart. If we hover over, we can view more details such as the lower fence and upper fence. We can also zoom in, and we can click out by double clicking as well as download the plot as a PNG. Great, now we have our charts. Our next step is to create our features so that we could look at properties with potential opportunity because we can add an additional bedroom. For this step, we're going to replicate this bottom part here of looking at opportunities for total additional bedrooms within our dataset. Our idea here is if we could find properties that have large square footage, but few bedrooms, we can possibly convert a dining room or study room into an additional bedroom. This will allow us to increase rents and thus increase our cash flow and potentially make a deal that was no good. And to a good deal. Back in our previous code. I am going to copy this and start a new part. And this is going to be called features. These are the features that we're going to add on to our data frame. So it's best practice when you're working with your data frame to do a copy, so I'm going to have DF, which is our data frame of all of our properties. And let's make a copy of it and call a new data frame called DF features. I'm going to copy over the code from our answer key and walk you through what we were doing here. So I'm going to copy this and make sure everything is in line. Great. And let's review what this code actually is. The first column we're creating is ratio of square foot two bedroom. So this is simply square feet divided by bedroom. And if we were to open up an Excel file that has our data, we can create here a new column. So I'm quickly just go into insert. And we are going to do square feet divided by If bedrooms, we can double click to drag this down. There are some errors, but we could just discount that for now. And what we care about is this value, where we have the ratio of square feet, two bedrooms. So say in this case, if we look at a property that has a high ratio, like this property here, this is a condo that has three beds, 3.5 baths, and is 2500 square feet. So we know we may be able to add an additional bedroom within this space. Now going back here, we have our ratio. And we have now a function called additional bedroom opportunity, this function is not loaded in. So let's go back into where we have our answer key. And let's copy functions. I copy functions on top. And if you're new to functions, again, I highly suggest that you go through the intro to Python on YouTube that's available for free. as well. We cover functions API's, web scraping and more in the real estate Data Analytics course, with Python, what we're doing here with this function is we have a function called additional bedroom opportunity. So for each of these values that we have here that we just created, that's the ratio of square feet to bedroom, we're inputting each of these values into this function. And here I'm stating, if the ratio to square foot per bedroom is over 650, and there's a value present, and there's over one bedroom, and it's a single family home, then return true, else false. Or the reason why I'm looking at properties that have our single family is because sometimes condos can have rules associated which would not allow you to rent the property out or add an additional bedroom. Then, when I was doing some analysis, I saw that 650 was the sweet spot of where you can add an additional bedroom. So this try statement, it would fail if there were any errors and just return false. So this column is created additional bedroom opportunity, and it's going to be true or false. Now we have our second feature. So going back into our streamlet app. We also have total adu so what properties have the potential of maybe adding an accessory dwelling unit. So maybe adding a mother in law suite in the back some she sheds something that can be rented. Now, ideally, we want to look at zoning to make sure that our property is zoned correctly. But we don't get zoning in this initial dataset. But that's okay, because as long as we start flagging things we could then analyze in more detail later, since the looking at the entire 350 listings. If we can condense that smaller to potential at us, we could then do further research. So here creating another ratio. But this time, it's lot two square feet. So what's the lot size of the house? And then what's the size of the house itself, if the house occupies a very small amount of the lot, that means a lot has the availability of land to put an additional building of some sort on it. So that is identified here, then that value gets put into a function to create, again, a true or false statement. Yes, at potential or no, this function up top reads in we're going to pass in the ratio lot square feet each time. And as I did an analysis, I saw that when it's over five, then that usually means a lot is fairly large, and would be able to have some sort of additional unit with enough space in it. So as long as over five, the value is not none. So it exists in some sense. Hoa is not null. And then lastly, is it a single family home? Yes. So if it meets all these conditions, then we return true, else we return false that it does not have adu potential. So let's run ourselves now that we understand its contents. But right now, we don't have anything exporting. So why don't we export our features? So as we remember, in order to do this with streamlet, it's S T dot data frame, and then we enter in our data frame. So we can run the cell and the following two as well. When we drag our file we can go down and we see here that we have our data frame DF features a It looks exactly the same as our previous data frame that we downloaded from Redfin, because this is a copy. But now we have additional columns at the end, we have ratio square foot, two bedroom, and we ratio lot size two square feet. We also have a check mark if there's a potential opportunity to add an additional bedroom, or to add adu. But this is not really clear, we don't know the count. Whereas when we go back to our streamline app, the original one, we could actually see opportunities, total additional bedrooms, and then total adu. So let's go back and solve for this. For this section, we're going to wrap up our entire app by adding our final section, which is adding in our table that we currently exported, but also some summary stats that we have. So I'm going to call this here. And then we want this to look similar to charts where we have an expander I'm just going to straight up copy this code, enter it below. We can change this and call it instead opportunities.

Copy it and also call the markdown the header opportunities as well. Now if we want to identify how many properties have additional bedroom opportunity, or adu potential, if we remember, we have these two fields that are set to true or false, so we could simply just filter on each of these. Let's create a new data frame called additional bedrooms. And then we'll take DF features will locate all instances within our table where additional bedroom up which is our name of our column that we created equals true. So all instances where additional bedroom opportunity is possible. I'm recapping this and I'm going to just take the next field which is adu potential. And I'm going to instead call this a data frame that is filtered down to only look at those adu potential. Now I want to have two metrics that are going to show the total additional bedrooms and total adu. We did this previously, we added metrics here. So I'm going to copy the previous code, drag it back down here, tab it to make sure it's in line. And instead of four columns, we only need two. And for First we can call this total additional bedrooms, it's going to be the length of that data frame that we just filtered on. And for our helper, we could change this here and say number of properties with additional bedroom opportunity. Then we can change this as well to total adu accessory dwelling unit. And this will also be a value of the length of our data frame. So let's remove all of this, replace it with DF adu. And our helper function can be number of properties with accessory dwelling unit potential. But we also want the user to be able to download this file. So let's add another header. So we can separate these two sections, our metrics as well as our data download. And we'll call this feature ised dataset. Since we have added features to it. We added the Adu, add additional bedrooms, we want this to be underneath opportunities. So we will add two more of these pound signs so that the header is smaller. And now we want to actually write this out so that the user can actually view what the contents of this data frame is. So put S T dot write and put D features. So I'm writing out my data frame. But how useful is it if we only view our data frame from within the UI, the user interface, the web application? Not so much. We still want it in our hands so that we can work with the data, say in Excel Google Sheets, or maybe uploaded to our CRM, how do we actually download data? Well, again, if we go over to streamlet into its documentation, we can go to Google, and let's type in streamlet, how to download Panda's data frame since in this case, we're working with a tabular data set with the pandas library. Let's click into the first link that we see, this is an example of where a data frame is converted here, convert it to a CSV file index is false, then that function convert underscore DF is called now we have a CSV file object. And here we pass in through S T download button, the ability for the user to download this file that we call file dot CSV. Let's copy all of this, bring it back into our code. And I'm going to take the function and put it with our other functions. So I just cut it and re pasting it up here. Actually, I already had it, which is great. So we could just leave it, then down here, can maybe add some comments and say convert dataframe to export. So let's copy this data frame. We want to export DF feature. So after we've added those additional columns, let's paste it in. And let's tab to make sure we are in line. It seems that we have everything correct. Let's try running our three cells again and see what our output is. And now when we drop in our file, we have all of our charts, and we have our opportunities. We can also press to download here. From our file. If we go all the way to the right, we could see our additional fields here, where we have ratio, square foot bedroom, as well as additional bedroom opportunity ratio lot square feet and adu potential. So congratulations, you made your first web application using streamlet. We made it really easy where we put everything in Google collab. So you didn't have to install Python locally. However, it is a lot easier to develop locally, which is why in the property cashflow app course, we focus on that and I take you step by step to actually install Visual Studio code. And we make an app that actually works with an API. So we're getting property data, a lot of detail, even property estimates and rental estimates. Let's just take a quick look of what the power of streamlet is. So we have our property here. This is 1134 Barclay in a town close to Tampa Bay. I will take this and paste it into the REI cashflow app. Now enter in your API key and click Get Data. Within several seconds, we have gotten data from an API. And we quickly have a summary of our our E i metrics. We can look not just at the property, but also the cash flow. Is this a deal or not? Is it going to be cashflow positive or negative? We can hypothesize if we were to make a lower offer, say 90% of the sales price, what would our cash flow look like now? Well, now it looks like break even what if we go down more? If interest rates were to decline as they were previously in the years 2020 2021 And early 2022. We can hypothesize if it goes back to 4.5. Wow, now we actually have something that's a possible deal. It cash flows 255 a month. But at the bottom, our target cash flow is $300. So if we open up our Rei summary, we could see that in order to hit our target cash flow, we would need to raise rent by 57, which may be doable and maybe we could add small fixes to do so. We can quickly see where income and expenses are going towards using a Plotly chart. We can also view the property on a map. Read in a property description. Look at zoning and lot information, link to popular sites like Zillow, and even download the data as we did just like in the Redfin app. I highly suggest if you want to continue to build out applications, leverage different API's. Then take the course property cashflow, and you will be able to have a one on one session with me. All right, I'm proud of your progress. And I'll see you in the next lesson.

Transcribed by https://otter.ai