CV Finder

3 minute read

Summary

CV Finder was developed as a final group project for the DevMountain Fullstack Web Development course. It is built using ReactJS, NodeJS (using Express), Redux, PostgreSQL, and Auth0 for authentication. It features a RESTful API and Responsive Design. It is being hosted by Digital Ocean. A link to the live project is here and a link to the GitHub repository is here.

Luis Curvelo and I built CV Finder to be an online resume tool. Users can login/sign up to create their own profile, or any user can use the search functionality to find someone with a particular set of skills.

There were a few challenges as we developed this project which I will detail below in the Lessons Learned section. Most of these were gotcha-type issues, but we learned from the obstacles and ultimately (hopefully) grew from them.

CV Finder Homepage

Homepage View

CV Finder Search

Search View

CV Finder Profile View

Profile View

Lessons Learned

We learned a few lessons along the road as we were developing this project.

Measure twice, cut once.

Surprisingly, we did a fairly good job planning out how the application was going to work in the beginning. It was during the execution that we started to see things unravel. Files became excessively long and hard to debug. The code wasn’t clean, but we were far enough along that we couldn’t afford to refactor the fundamental issue plaguing our project. What was the problem? See below.

Read the docs first.

Ah yes, so goes the old adage. The main issue that we encountered stemmed from the way that our Redux store was set up. We had many nested objects. Updates were being made to the Redux Store, but on a grandchild/great-grandchild level. Had we read the docs in advance. We would have known that it is common practice to have a very flat State design. The way that react-redux checks for changes in the state is a shallow check. In order for componentWillRecieveProps to recognize that changes had been made, we needed to add prolific code to the reducer.

For those of you who may be running into issues like “react-redux react component not updating recieving new props” or “shouldComponentUpdate not firing” or “componentWillRecieveProps not firing” perhaps take a look at this lifesaver of a link here. I hope it helps. the TLDR for this is React-Redux only checks a shallow equality reference check in the shouldComponentUpdate lifecycle method. If you havent made changes all the way down your tree, it’s not going to pick up on it.

The more detailed explanation is below. (Next lesson located after the two code blocks.)

function reducer(state = initialState, action){
	switch(action.type){

    case type.EXAMPLE_FOR_WEBSITE:
      let newData = action.payload.data[0]
      let a = Object.assign({}, state)
      a.b = newData
      return a /* a hasn't changed on a shallow level
                shouldComponentUpdate won't recognize
                that there is anything new */
    default:
			return state
	}
}

compared to

function reducer(state = initialState, action){
	switch(action.type){

    case type.EXAMPLE_FOR_WEBSITE:
      let a = Object.assign({}, state) // unchanged a
      let updateB = Object.assign({}, a.b) // replacement for b
      let newData = action.payload.data[0]
      updateB.c = newData.updateC // b replacement getting updates for c
      a.b = updateB // a now being updated with new b with new c
      return a // return a that shows differnces down the tree to c

    default:
			return state
	}
}

Browser compatibility

We finally muddled our way through the convoluted nightmare of a reducer, and hosted CV Finder. We hooked up our custom domains and felt the satisfaction of having our application being tested on our phones. Only the iPhone seemed to disagree. Once a user was authenticated we encountered a bug that we hadn’t seen yet. The inputs for the user edit pages were not working. We had tested our responsive design in Chrome the entire time, but when we popped the app locally into Safari, we were able to replicate the behavior. After some digging we were able to figure out what was going on But its always worth noting that you should check compatibility via multiple browsers.

Technologies Used

ReactJS

ReactJS

Redux

Redux

NodeJS

NodeJS

PostgreSQL

PostgreSQL

Auth0

Auth0

Updated: