Creating a React Database for Asylum Seekers
Human Rights First is an amazing organization with the goal of helping refugees seek asylum in the United States. The organization covers all aspects of the asylum process including walking refugees through the application process as well as any trials and court proceedings.
When walking refugees through this process it’s important for lawyers and other relevant case workers to have as much information on not only their client but on the courts and judges who are overseeing their cases as well. Because there are thousands of cases involving asylum, it can be hard to find cases relevant to what lawyers are needing to find. Is there any bias in regard of protected ground in respect to a certain judge? Do they tend to deny asylum to refugees coming from a certain country? The Human Rights — Asylum application seeks to make finding this information easier so that case workers can spend less time digging for this information and more time building a case to get their client granted asylum.
The Human Rights — Asylum application is a database where asylum case PDFs can be uploaded and information regarding both asylum judges and asylum cases is displayed in tables that can then be searched and filtered based on a chosen criteria.
My biggest concern going into this project was being overwhelmed at first with all of the legal terminology without knowing a single thing about laws especially in regard to asylum cases. I was worried that without having any prior knowledge I would not be able to deliver an application that was exactly what the stakeholder was needing.
How Can We Best Implement The Necessary Features?
My team and I decided for the front end that an easy to understand UI was the most important. With that, we redesigned the interface to have a simple theme and layout, and made sure the data table had specific titles to avoid confusion. We then wanted to take into account the stakeholders wish list, one of them being the ability to upload new cases to the database at any time. I decided to take on this task and created a route to a separate page which has both the ability to upload a PDF case file, and a text form to upload case information. The hope is that in the near future the user can upload a PDF and have the text fields auto fill the relevant information into the fields which can then be edited as needed and uploaded into the data table.
The second feature that I worked on was the ability for each case to have its specific PDF to be viewed in a modal if a user decided they would like to see the exact document in full. I created the modal using a package called react-modal-js and implemented the modal into it’s own column on the case table. The modal is currently displayed with a dummy data PDF but has the capability to be routed to a specific case ID PDF as soon as the backend has the capability.
One of the challenges that I faced while shipping this feature is that the modal was being displayed beneath the header bar, which was blocking users from being able to exit the PDF once they are done. Due to the codebase being so large, and there being a ton of locations for the styling, it was difficult to pinpoint the reason and location for why this was occurring. It took a lot of patience and testing different methods to solve the problem at hand. I was able to eventually fix the bug by changing the z-index of the header bar to zero, which enabled the PDF modal to stack itself on top of the bar while it was open.
The Future of Human Rights First — Asylum
My team was able to streamline user experience very well during our time working on this project as well as lay important foundations for future teams to expand on. On top of an improved UI, we implemented the capability to save specified cases as well as judges which can be displayed in their own specific page/table.
Other features that have been implemented by our team include:
Search/filter functionality on each judge/case table
Tabbing between a judge table and a case table
Download a PDF or CSV file
In the future, I believe the project will have implemented more functionality in terms of PDFs being able to be uploaded and scraped of information, making less work for users having to manually input information into the upload form. I also think it would be great to be able to create tags for cases for easier search capabilities. Lastly, I think enabling the page administrator to create/delete table columns as well as delete out of date cases could be a great additional feature. The biggest technical challenge I foresee for future teams is actually creating the upload fields to auto-populate based on a PDF being uploaded.
