Give Me Your Tired Masses:
The Joys and Struggles of a Coding School Project
First, some background…
I have been attending Lambda School since June of 2020. What initially began as a foray into video game design evolved into a pursuit into all things programming, which led me to Lambda! It hasn’t been an easy endeavor, but the juice is well worth the squeeze.
For this project, our team worked with Human Rights First (HRF), an independent and non-profit organization that actively advocates for those who long to live their lives free from tyranny, oppression, and violence. Our specific task was to work with their Asylum Case Analyzer. This web application allows a user, in this case, one of the HRF attorneys or their staff, to upload court case documents from various attorneys and judges, and store pieces of information alongside them, such as relevant demographics (country of origin, gender, sexual orientation, religion, political opinion, etc.), as well as the outcome of the individual case. This allows the team at HRF to anticipate the outcome of upcoming cases of asylum seekers given the particular judge assigned to the case, and plan their advocacy efforts accordingly.
When we inherited the codebase from previous teams, there was the layout for the functionality of the application overall, however, several pieces were still not operational, and all the data that was being displayed was simply placeholder (or “dummy”) data that allowed us to see how the program was responding. That is where our fun began. I entered into this section of Lambda after being in the Computer Science module for three long months. While ultimately grateful for the practice, it definitely left me a bit rusty in the React.js department. Building intuitive and responsive web applications is where my passion and interests lie, so what a better way to get back on that bicycle than working in React on an established project.
Diving in…
As a self-identified Front End developer, I love delving into the aesthetics and User Experience of a website, so I joined a couple of other teammates to handle the Front End User Experience, starting with the Login page.
Using the company's main page as inspiration, I wanted to create a modern and uplifting feel that was congruous with the rest of the site. Personally, If I were to encounter a part of a website that seemed too “off” or different from the rest of the site, it would make me suspicious of the security and validity of that part of the site. To alleviate this potential feeling for other users, I made sure that the colors, styles, and spirit of the organization came through in this login page, particularly as this is the first piece of our project users will encounter. Next up was tackling the Dashboard page.
I worked with my Teammate, Mark, on this section of the project. He took to updating the styling of the page, bringing it up to par with the HRF website, and creating an overall clean look with the actual logo, and streamlining the Header bar. Here is where our work was cut out for us.
Technical Difficulties…
Originally, the Upload button took you to a separate page where there was a Drag-and-Drop section to upload PDF documents of court cases and other documents. While the structure was in place, this was not functional. This was my first task in functionality. Utilizing a design library called ANT Design, I got rid of the need to navigate away from the user dashboard by implementing the Upload feature into a pop-up modal (seen below).
With this feature, a user could upload a file with a supported type (in this case, PDF and CSV) and add it to the database accompanied by pertinent data relevant to that case, and provides a much smoother experience for the user. This, however, brought some issues with its implementation: how could I put an entire web page into a modal when I just needed this form? A little React magic was the answer.
The previous team had followed good React practices by making each feature or function a separate Component. In this case, the UploadFile component was the one that was being displayed when the Upload button navigated away from the dashboard, so on line 26 of the code snippet here, I routed that Component to display in the modal when it was opened.
My next step was wiring the button to display the modal instead of taking the user to a different page. Lines 1, 3 through 5, 16, and 20 accomplish this by assigning the showModal function to the Upload button. Now, when the Upload button is clicked, the full UploadFile form is rendered inside the Modal. From here, the Front End connects to the Back End and stores the files and information in a database that was constructed by our Back End and Data Science team.
Where to now?
Working with this amazing team, we were able to build something great. As of now, we have:
- A functional login page with separate credentials for standard users and one Admin
- An upload feature (still in-progress) to add documents to the database
- A functional dashboard page to sort, search, and display the various uploaded cases
- An export feature to export displayed data to a CSV file for further use
- A data scraper (in progress) to pull data from PDF files to auto-populate forms for ease of use
- A Collections feature that allows users to create and access curated folders to store selected cases
- A Tagging system to assign tags or add new tags to each uploaded document for future searching and sorting
Moving forward, all that needs to be done is to wire the various components together. This could prove to be challenging as the future teams would need to make sure the incoming data is aligned with the various tables/fields in the database, that way the search and sort functionality will execute properly. With the help of the Back End and the Data Science teams, the dummy data used in the table could be replaced with the actual data imported from the HRF team and assist these wonderful advocates in helping those in great need.
There was a lot of great work that went into this project and I am so proud of our team and our dynamic as a team. This turned out to be much more than just a school project- this feels like contributing to something that has a real-world impact and helping to support those that are out on the front lines defending our Rights as fellow Human Beings.