Creating LivingRoom quickly with React and Rails

Browntree labs created a product called LivingRoom in only a couple months on a part-time basis. We iterated quickly by using well known frameworks and libraries like Ruby on Rails, and React. By using Rails to render most of the site, and react for heavier user-interaction sections, we created a whole product in record time.

LivingRoom up and running!

The “Client”

Living Room Is a company (started by Browntree Labs) that creates software for property managers. LivingRoom wanted to build a beautiful application that empowers both tenants and property managers with tools to make managing apartments easier.

The Problem

I started LivingRoom myself, as both a personal project and a professional endeavor. I love making products, and I love working on things that interest me. In a very limited amount of time, I wanted to build a product that allowed landlords to:

• collect rent
• handle issues reported by tenants
• manage leases
• manage their properties, apartments, and tenants

and allows tenants to:

• pay rent online
• chat with landlords/property managers
• report issues with their apartments

The Solution

Since we wanted to build a fully featured product within a very limited time-frame, we chose a set of very well known frameworks and libraries:

• Ruby on Rails for rendering and API
• React for more user intensive sections
• Stripe for payment processing

Ruby on Rails for rendering and basic pages

Ruby on Rails is one of the most recognizable frameworks for building web applications. At Browntree Labs, most of our projects involve Ruby on Rails, so we’re extremely familiar with the framework inside and out. Because the framework is so popular, every typical problem already has a really well thought out solution in the open source community.

A great example of a typical problem with a solution is a gem called Devise. Devise is a Ruby on Rails gem that adds authentication, and authorization logic to your application. By using Devise, we literally had authentication up and running within minutes. If we used a different framework that didn’t have this problem solved by the community, it would have taken hours to handle all the nuances of authentication, not to mention the requirements of authorization (only allowing certain users to access certain information).

By utilizing Ruby on Rails, we were able to quickly iterate on large sections of this site. For example, pages like the Property Information page took no time at all to make, because there were no API calls, and no complicated set up. It was just a matter of fetching data from the database, and displaying information in HTML and ERB.

The property information page

Using React for more user intensive sections

Although Rails is great for displaying basic data, and creating basic CRUD (Create Read Update Destroy) interfaces, sometimes you need something with a more rich user experience. For example, when displaying a sortable table, with fuzzy searching capabilities, you don’t want to refresh the page whenever someone types in a letter, or sorts a column. For these sections of the site, we used a Javascript library called React.

React, originally and currently being developed by Facebook, has been the most popular javascript library and/or framework for years now. Bursting onto the scene in 2013, React quickly gained popularity due to its simple API, its easy to understand patterns, and its powerful approach to adopting reactive programming to javascript applications.

By utilizing react, we were able to quickly create some amazing looking things in our application. Our data tables throughout the application; for example, were a feature we used react for.

The Units data table

We used React to render the above table in some HTML generated by Rails. When a user tries to search for a unit, React will make a call to rails to fetch any possible matches for that unit name. With this setup, a user has a really snappy interface to sort and search for information. There are plenty of other examples throughout the app where we used React. Such as: Unit-wide chat between tenant/landlord, Issue creation and management, Tenant and property data tables, and property-wide chat between tenants and landlords! Since this was all done with well known tools, we were able to create everything very quickly and painlessly.

Using Stripe for payment processing

The world of online payment processing is a bit complicated. There are many solutions to many different problems. But for us, we chose Stripe. Stripe has some of the best API documentation around, and its the easiest payment processing technology to work with, because it has packages for any possible language/framework you can think of. By using Stripe, we had an almost plug-and-play solution for processing user payments immediately.

Our setup for payments was a little odd. We needed to use the Stripe Connect platform to enable us to allow third parties to charge their customers (landlords charging tenants), and get paid through our application. There was some custom code involved in setting this up; however, the documentation was excellent, and in generally this was accomplished fairly easily.

Conclusion

From start to finish, we only spent a couple of months on LivingRoom in our part time. But because we stuck to well-known tools, we accomplished a lot within a very limited time-frame. Using well-known tools and patterns are part of what we do at Browntree Labs, and this project was just another example of how well this strategy works.