My first react.js – huisverhuren.io

Hi all,

I have been playing around with react.js application for about a couple of months and I really enjoyed it. I have finished react.js course from codecademy (2 courses). The thing will all of the tutorial online is that it is very hard to implement if you have no real project to work on. I have been discussing with my brother Argo who was working in apartment rental agency. One of the main problem the had is that too few people actually wants to place their home for rent. All the makelaar (real estate broker) alway have short demand of homeowner.

So the plan is to make a single web page that can estimate how much you can earn from renting your home. The common question that where is the location of the property, how big is the size, and how many bedroom it has. The user flow is filling the form, immediately get an estimate and then they can download a report. If they want to download the report and they need to give their email address and this would be a “lead” that we will sell to the real estate broker.

The website design

The domain of the website is huisverhuren.io. Huis verhuren means (renting home) in dutch. My brother argo designed the logo.

I like it very much because it is simple and clean. And my brother had designed the single page as well. It has a banner on top with form for people to fill in.

Underneath you see the price in the area in the form of a list or in a map.

 

The  data flow

Because of the react tutorial uses firebase as the data source, this one is no different. I run a custom script from scrapping the rental agencies website here in Amsterdam. The data is modify and push to the firebase. From firebase the data is filtered based on the postcode, size, and room number. I also included property within 2km ratio of on the center of the postcode.

 

 

The result

Here is someone living in the 1055XH with 75-100m2 space and 2 bedrooms. You can see in the map that properties with the same criteria is shown within 2km. It takes the average rental prices as an estimation how much someone can earn.

However, you are more than welcome the prototype if you go to huisverhuren.io. Unfortunately, I cannot share the code with you as it is months of banging my head figuring things out. And of course because some real value to be made.

To do list

 

There still a lot to do from this project:

  1. Optimising the scrolling scipt
  2. Find copywriter for the content
  3. Improve user friendly – show error message and so on.
  4. Make the website more responsive
  5. ….

Overall it was a fun and I really learn a lot in deploying a react application. Making the code in you local environment is one thing but deploying it is another challenge.

Luckily this project has external data (firebase) and therefore the front end is very simple.

My next plan is to explore express.js and built both frontend and backend in one server. Stay tuned for another post!

Leave a Reply