Software development is an exciting industry. Being used anywhere from self-driving vehicles to space exploration, smartphone apps, websites, and many other things. It is exciting to continually write, problem solve and design in countless fields. In this situation, a team of remote developers and I were given the task to review, fine-tune, and implement a judge and case database for Human Rights First — Asylum legal council.
The need for asylum is felt by many people from all over the world. Whether it be due to war, abuse, inequality, political views, and more. Worldwide, the amount of forcibly displaced people has doubled from 40 million in 2011 to over 80 million in 2020. As you can imagine, the need for quality legal council for people seeking asylum is paramount. However, in our age of technology there is not much in the way resources for easily finding that legal council. Beyond information from their case files lawyers only have a handful of sights they can go to to find limited and confusing information on past judge rulings.
Due to this lack of resources, Human Rights First tasked me and a remote team of programmers and data scientists to build a website to collect and easily display cases. Inheriting a codebase from a different group, our solution was a site/program to allow single and bulk uploads of case data, display collected data and visualizations of data, and manage site access users.
Going forward, I will be approaching this project as if it was started from scratch, then transitioning to examples from my team as add on developers.
Getting Started on the Project
When we first approached this task it seemed quite daunting- especially for a new developer like me. But, like all programming solutions, tasks can be broken down into smaller more manageable pieces. But before we can really begin, important decisions must be made: What type of data management system will we use? What programing dependancies will we need? What libraries will we use? What programming language do we use. These decisions seem overwhelming as well. However, with the help of flowcharts or “decision charts” these decisions and tasks seem much easier to accomplish. Here is an initial decision chart I developed for our solution.
Now it’s time to break the tasks down into smaller more manageable tasks. Hmm 🤔, One way to do this is first create user stories lets give it a shot:
- UI/UX — As a user, I can login to a dashboard to review cases and case visualizations.
- UX/UI-Case Details- As a user I can easily click on a case to see more details about the case.
- UI/UX- Cases — As a user I can easily view case details.
Now we can break it down into smaller assignable tasks. There are tools available to assist you in writing stories, creating tasks, and managing their process. Our team use Trello board, another one I know of is kanban board.
Here are some screenshots of stories and planned tasks our team developed.
Another task that could be listed for a new protect would be.
- Develop a table to view, sort, and filter case data.
One last helpful thing before coding is to develop some layout rough drafts, aka “wireframes”. Below are a couple wireframes I designed using a free online tool called Whimsical.
Reviewing and start coding
Now we will fast forward to the existing project. As mentioned above we received a codebase from a previous team. Our main goal for the code in its present state was to implement application tables that were user friendly, easily sorted and filtered on the column levels. Unfortunately I don’t have a screenshot of the application tables before they were given to my team but we will walk through the process of implementing the tables with the above features using the ant design component library.
When we first received the code the tables looked fine but the sort functionality was full of programming bugs and you couldn’t filter the data in the table. I first went to the antD library to identify the table components I wanted to use.
At first glance, the code seemed strait forward enough. However, I quickly realized that the code was written in class components for state management. As the existing application was written in functional components we would need to do some refactoring.
One main difference in class components vs function components is how they manage state. By definition a function component cannot store state so it was common for all components that needed state to be written in class components. However we can now use state hooks like React useState to now manage state in function components. Another thing we have to consider is how to access the state variables. In a class component you can do this by using the [this] keyword. An example of this would be if you wanted to access the variable stored in searchText from the above code you would type [this.state.searchText]. In a functional component using state through useState you would first need to do a simple spread operator on state. For example: [const { searchText, searchedColumn } = state; ]. You can now access the variables directly like [searchText]. You can see the implementation of this in the below code.
Putting it all together
In all, here is the look of the refined styled app.
Some main features we implemented:
- Transitioned case and judge table to ant design with sort, filter and select features.
- Implemented save on case and judge tables.
- Deployed a upload/bulk upload queue
- Refined and improved UX/UI throughout the site.
- Added working visualizations
- Implemented a general landing page with visualizations.
The biggest challenge I foresee in future development of this site would be to provide even more appropriate visualizations for the stakeholder and cleaning up and deleting the rest of the material-UI components.
I appreciated the opportunity to participate in such an impactful and important project. I am proud that this will be a new tool for those seeking asylum in the United States. It has been exciting to push myself as a developer by using new skills, implementing new component libraries, refactoring state from class to functional components, and working on both the front and back end in coding this application.
