How Rentscape came to be
When coming up with an idea for an application, the question that drives all of the other questions is: ‘what’s the point of this?’
Whether it’s an application for storing some sort of records or a game, they have a purpose; to organize, to entertain, etc.
While thinking and filtering ideas for the React project I wanted to create I needed something with intention, so I made a long list of project ideas, some far fetched and unrealistic (for now at least) and others that served no purpose at all.
One night my girlfriend and I were talking about the places we lived in the past (the last two being complete nightmares for different reasons) when she said that it would be nice if we could read reviews on a rental property before moving in, and then the idea clicked. We talked about it and about what features such website would have. Being anonymous was a big one, so users wouldn’t have to create accounts and could just focus on reviewing a place they lived or are currently living in.
Rentscape was born out of the necessity of being able to read reviews on rental properties and to be able to make an informed decision before moving into an unknown territory.
Navigating your way around Rentscape
On the top right corner you’ll find the main navigation and search functions for Rentscape. There you can filter reviews by state and township, sort them by those which include images, by rating or state (if you don’t have a specific township to search for.)
The ‘Add a Review’ button leads you to the form where you can add a property review and the ‘About’ button leads to the about page, super easy.
Formalizing the idea
Once I had the concept in mind I sat down in front of my laptop and started working on a draft of what I was trying to accomplish. That’s probably one of the most important lessons I’ve learned (so far) when starting a project from scratch: Have a plan.
A plan makes the building of your application a lot smother, and by having a ‘map’ to guide you, you avoid making mistakes that could cost you precious time when trying to fix them, plus it also helps your end product resemble the original vision as closely as possible.
With the outline of my project ready to go I decided what features I wanted to add and what features I didn’t want at all, at least for the time being.
Before I incorporated Redux into my project I passed a couple of props down the components to get a semblance of basic functionality, it worked, but it became obvious how there would be a struggle when tracing back anything in a larger project. Before going any further I set up Redux to help me on my quest.
It’s the boilerplate that’s a bit of a hassle but once that’s done, adding and removing objects from your store (the place where data is held in redux) is a breeze.
Redux allows you to send an action to the reducer, which then modifies the state of the application. The only issue arises when there’s an asynchronous action, like fetching data from the database. Redux will still be resolving the promise when the component re-renders, and said component won’t display properly, so the way to handle such a request is with Thunk.
Thunk to the rescue
I took me a minute to understand the power of thunk, which adds the ability to return an action (dispatch()) within the action. By adding an object to your state which represents loading and setting the value of that object to a boolean value, a component can render different JSX conditionally, based on a true or false value. I incorporated that functionality when fetching the initial property reviews for Rentscape, so the Properties component displays a loading message instead of passing empty props to the child component (Property) and breaking the application.
Where will Rentscape go from here?
The deeper I got into the project, some ideas for Rentscape became more refined and concrete. I plan to include a mini discussion board for each review, that would be specially useful for large rental developments where people come and go constantly; a ‘like’ and ‘dislike’ feature, making more evident the amount of engagement certain properties have; a landlord panel, where a once validated-as-owner landlord can share his own opinion; an actual field for the rental price, that would be averaged to show the median rent price people pay there.
Out of all the projects I developed at Flatiron School, Rentscape has been the most fun and creative on a personal level. For the first time I’ve built something that has real world utility and because of everything I’ve learned, I can realize it without compromise, knowing where to find the answers when they are needed. Challenges have been plenty, specially when I initially didn’t know how to trace an error to the right component, but the more I delved into React Tools, the speedier and more honed my bug hunting skills became. Can’t wait to see what React holds for me in the future.