Lambda Labs28
Leveraging Trello Board to expedite development of a deliverable web application
The Labs28 team was paired with a human rights advocacy group, and was tasked with the development of a product that would showcase a visualization of instances of police use of force along with a data science model that would help classify possible instances of brutality.
Human Rights First is an independent advocacy and action organization that challenges America to live up to its ideals. We believe American leadership is essential in the global struggle for human rights, so we press the U.S. government and private companies to respect human rights and the rule of law. When they fail, we step in to demand reform, accountability and justice. Around the world, we work where we can best harness American influence to secure core freedoms.
Our development team was presented with a “roadmap” that outlined what the stakeholder of HRF was most interested in accomplishing in our 3-week development timeframe.
As soon as the roadmap was presented to the Labs28 team, they/we defined several user stories to implement that would satisfy the goals laid out in the roadmap.
Ultimately, our team decided that the user stories below would be the most effective use of the development time allotted.
For each of the user stories that were developed the team meticulously went through and itemized all of the features, component, and steps it would need to take as checklist items, within the Trello card below.
Using Axios to create a component that represents API driven data model
I was tasked with creating a frontend component that would filter and display data that had been assembled by a DS team.
The dataset that I was expecting would have a variety of keys and values that would need to be handled in order to retrieve the desired data. It was generally agreed upon that we should expect all of our data to come back from the API as JSON. However I could not be sure how the data was going to be returned until I checked the /get route with Postman.
I was glad I took the time to investigate the API before I started working. And once I had seen the response from my /get route I mapped out a rough plan for how to handle the data.
To complete my task I decided to use the Axios, useEffect, and useState libraries. With development speed being a primary concern, these seemed perfectly suitable for the requirements at hand.
I built the Axios call right into the Graph component, and created some state with initial values. Both of the functions, sumTheDeaths, and getIncidentCounts were made asynchronous in order to handle the delay coming back from the API endpoint.
It was expected that the .res would be in a JSON format, and at first I wasn’t sure how to handle the string that was being sent back. But rather than contacting the DS team to change their response I researched a few of my options. After a short while it became clear that the .parse method would be a good solution to handle the data manipulation.
Once the data was ready to go, Object.values was used to target the key:value pair that I wanted to display. and that information was set to state with setTotal.
In summary, I needed to make a component that rendered a specific piece of information from a DS team. However, the data that was sent over was in an unexpected format. I used a combination of vanilla JS, React, and useEffect to manipulate the data and quickly complete the task that I had been assigned.
Human Rights First FE Current Status
Labs 29 FE Team F created several features including:
- Stacked bar graph component
- Filter feature for the bar graph data (still needs API connection)
- Sub component that displays actual reported casualties (2020 data only, via API)
- Incident submission form (still needs connection to BE)
Sample Demo of HRF FE Application
In a future release, the team would like to have completed the integration of the components to the back end. However, time constraints prevented the final connection(s).
One other feature which was discussed but ultimately ruled out, again because of time constraints, would have been the ability to associate location data, into the stacked bar graph component.
Personally this experience taught me that I needed to refresh my skills with Redux. In our training, we spent several weeks learning about Redux implementation but, apparently I need to spend more time within that library.
I received feedback from my peers regarding my abilities within the Redux library and that I was not performant in that area. I have subsequently spent a considerable amount of time and effort, retraining myself to work within that library. In time, I will be proficient with that language.
The Labs28 experience and this project in particular have prepared me for the job environment in several ways. First, becoming aware of my limitations as a dev, has been a very humbling experience. Secondly, I learned that within a dev team, the team will have a wide gamut of abilities and knowledge. That breadth can be both a liability and an asset, depending on how willing the team is to leverage everyone’s varying skillsets. In my team’s case, we adapted very quickly and were able to play to everyone’s strengths.
I would happily go through labs collaborative development experience again, if the opportunity presented itself.