In this blog post I'll be looking back at my Phase-4 project for the Flatiron School's Software Development program. This phase focused on Ruby on Rails and is our final phase learning new content, with Phase-5 completely focused on our capstone project.

This project was built with a Rails backend and a React Frontend, using the React Bootstrap css framework.

I had a couple of ideas for my project, however I decided to settle on creating a personal page for my friend who is a real estate agent. On it users would be able to view properties without logging in, and by logging in they would be able to save properties to their favorites and send a message to the agent regarding a property. Additionally, a user with the proper login credentials could log in and have the ability to create, update, and destroy properties, and could also view all the messages from users, in addition to being able to view what properties are being favorited by users.

My real estate agent friend has access to a very robust API with frequently updated information on available properties, known as an MLS (multiple listing service). At first I was very excited to work with this API as it seemed like it would give me a ton of information to work with, and would give a good "proof of concept" if we ever wanted to make the site live. Unfortunately as I looked into it I found that the companies that curate these MLSs are very protective of their data and as for now since I'm just working on a school project I figured I'd hold off on requesting access for now. Another alternative I considered is a service the MLS offered where they generate html code for you that you can basically just copy-paste into your code to give you all the listings, however since all the listings wouldn't actually be hosted on my server I wouldn't be able to get any data from them, making this rather unhelpful for my project. So disappointingly I fell back to using seed data to generate property data for this project, at least for now.

Next step was to get a plan for my databases set up, this was a fairly straightforward project so it wasn't too difficult. I would have Properties, Messages, Users, and Favorite_properties. I set up their relationships as such in the models:

Property:

    has_many :messages, dependent: :destroy
    has_many :favorite_properties, dependent: :destroy
    has_many :users, through: :favorite_properties

Message:

    belongs_to :property
    belongs_to :user

FavoriteProperty:

    belongs_to :user
    belongs_to :property

User

    has_many :messages, dependent: :destroy
    has_many :favorite_properties, dependent: :destroy
    has_many :properties, through: :favorite_properties
    has_secure_password

--Note the "has_secure_password" on the User model, this doesn't affect the relationships between the tables but I included it as it will be relevant next.

With the basic build complete my next step was to add authorization and authentication for my users, and to test deploying my project.

I won't get too into the weeds with the setup for authorization and authentication for now, we can save that for a future blog, but I will say I recommend getting this set up early on in your build, before you start adding too much complexity. You can set up a basic login page with a form on the front end to test, or you can simply use a tool like Postman to generate server requests. A few gotchas I will mention is to make sure your user model has the "has_secure_password" line as I show above, and to make sure your user migration has a column named exactly "password_digest."

After all this initial setup I updated my controllers to make sure my server was ready for any requests, and made sure my serializers were set up so that I could take advantage of the table relationships I set up in the models. And for the most part that was all the back-end setup I needed for this project. Working on the frontend was a bit of a challenge as we had been learning backend for the past 6 weeks, so I had to dust off everything I'd learned in the first 2 phases of our course.

In my frontend build I had my biggest lesson learned from this project. In order to have my logged in user accessible in any components I used useState to set it in App.js:

import { useEffect, useState } from'react';

const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/authorized')
    .then(res => {
      if(res.ok) {
        res.json().then(user => setUser(user))
      } else {
        setUser(null)
      }
    })
  },[])

And then passed it down as a prop to any component that needed it.

However, what I found is that occasionally a component on the page would load before the user prop was able to be loaded, so user was coming through as 'null' as you can imagine this caused a myriad of issues. In my next project I plan to use useContext or a state management tool to avoid this issue when setting my user state.

The last thing I want to quickly touch on is React Bootstrap. This was my fist time using a css framework and while it did make things easier, I was a bit surprised with the lack of options. Perhaps I didn't dig deep enough but it seemed like it really forced you to either do things a certain way, or choose from a list of only a few options. Css continues to be the bane of my frontend existence, and probably my biggest weakness currently as a full-stack developer.