React/Redux: Rate Your Landlord
UPDATE: Currently converting this to a VueJS front-end and having a blast doing it!
- Backend Repo – https://github.com/d-otis/rate-your-landlord-backend
- Frontend Repo – https://github.com/d-otis/rate-your-landlord-react-frontend
- Live Demo – https://ryl-react-app.herokuapp.com/
Overview
My first apartment in Brooklyn seemed too good to be true. A recent gut-reno with modern appliances and hardware. What I didn’t take into consideration, nor was I aware of, was the long standing issues and complaints levied against the real estate management company/owner. They were so notorious that they changed their name while we lived there to thwart all the bad reviews found by Google/Yelp. Not only that, but after we had finished our year lease and applied for the security deposit to be returned to us, it took weeks to get to us because they mailed the check with only my name on the envelope and no mailing address.
Enter my final project: a Rate Your Landlord app!
Features
- Users should be able to visit the app and find reviews and ratings for properties they are interested in categorized by landlords/property owners.
- If a property or landlord isn’t found that can create either, or both.
- When a user leaves a review, a rating is required (5/5 scoring system). Once the review is saved the corresponding landlord rating and property rating are consequently updated system wide.
Process
I started with my backend models, relationships, and Postgres database before slowly integrating my React frontend with some minimal Bootstrap styling.
Deciding to work with a UUID-based primary key for all models was a great way to learn how to enable Postgres extensions in the database. I employed the pgcrypto Postgres extension via command line and make sure that my database extensions were aware of my plans
One tricky aspect was making sure that attributes for properties and landlords were correctly updated on the backend as well as the front end.
For my Rails API, I a frustrating hurdle when it came to updating ratings using their before_action controller methods. After lots of headache, I scrapped using before_action and just triggered rating updates using instance methods in the Landlord and Properties model definitions.
Within Redux on my front end I had to make sure that my Landlord reducer and Property reducer had case statements for “ADD_REVIEW” in addition to their own model-specific CRUD cases. This allowed for their parent relationships to the reviews to be reflected in the Redux store.
Once all the pieces were in place it came down to routing the user flow and setting up a couple nested resources: properties and landlords.
