Shigoto: A Job Tracker App — React, Redux, and Rails API

For my final project at Flatiron School, I was tasked with building a web application with a React and Redux frontend and a Rails API backend. After a bit of brainstorming, I decided to go with a fairly simple to implement job tracking application, which I decided to call “Shigoto” (it’s Japanese for “job”).

The requirements for my application were as follows:

• Use one HTML page to render your react-redux application
• There should be 5 stateless components
• There should be 3 routes
• The Application must make use of react-router and proper RESTful routing
• Use Redux middleware to respond to and modify state change
• Make use of async actions and redux-thunk middleware to send data to and receive data from a server
• The Rails API should handle the data persistence with a database. Use fetch() within your actions to GET and POST data from your API - do not use jQuery methods.
• Client-side application should handle the display of data with minimal data manipulation

Challenges

Having had some prior knowledge of React going into the project, the biggest hurdle I faced was getting up and running with Redux. Redux is a state container for JavaScript applications, it stores the state of your variables within your application. For more complicated frontend applications, Redux handles state in such a way that that state mutations become predictable and manageable.

There are a couple of approaches I considered for implementing Redux in the application. I could work on the React application and implement Redux after the fact, or I could configure Redux as I begin building out the frontend. I chose to configure Redux initially.

To start with Redux, we first need to configure the store which holds the global state of the application. I configured the store within my index.js file.

In a jobActions.js file, I created actions to create and receive data from my backend Rails API.

In a jobsReducer.js file, I built out my reducer which determines my application’s state. Using the actions from my jobsActions.js file the reducer determines the changes that need to be made.

Once I got the hang of Redux, building out the rest of my application was pretty second nature. In terms of features, I wanted users to be able to add jobs using a simple form and view all their jobs in one place with a dashboard. An additional feature that was very fun to build was a data visualization of all the applications and their statuses using a sankey diagram. I really enjoyed the process and in the future, I would like to implement additional features.