For the past month I have been a part of a cross-functional team of developers working to develop an application for a non-profit organization known as Human Rights First. HRF is an independent advocacy and action group that steps in to demand reform, accountability, and justice in the name of human rights. Part of that is being able to protect vulnerable people that are fleeing from danger to come to America in hopes of a better life.
In order to aid in those efforts, our team has worked closely with stakeholders from HRF to develop an online platform meant to aggregate asylum case data from all around the country. By providing this aggregate reference data, asylum attorneys can notice trends and patterns relating to specific judges or geographical areas etc. they otherwise wouldn’t have. In turn attorneys are then able to better plan and strategize their cases, increasing the likely hood of granting their clients asylum status. Knowing how important this tool could be to many people’s lives was incredibly motivating but also nerve racking. I was a little anxious to touch the code base in the beginning out of fear of somehow ruining the already existing progress. Although with some time and unwavering tenacity, I have been able to contribute to the codebase during what has been the most fulfilling experience I have ever had as a developer.
Trying Something New
When this month long trek began I knew one thing for certain. Big or small, I wanted to implement something I never have before. Luckily I was able to do just that. My two main contributions were implementing a PDF export button that generated a custom pdf file and setting up a collapsing FAQ menu.
Setting up the FAQ was a fun endeavor. Mainly because I got try out a new React component library I had never used before, Ant Design. And I have to admit, after toying with it, it has become my new favorite React library. It is quick and simple to use while delivering polished and professional results. Implementing Ant Design turned what was initially nothing but scaffolding;
Into a professional looking page with significantly improved UX/UI.
Within the application we also have a table that contains all the aggregate case data that was scraped from user submitted case files. As a user, we want to be able to download all that data into a neat PDF file for easy reference. In theory it sounds simple enough, but in reality it took a decent amount of work. The biggest obstacle in achieving this was that the Material-UI table component being used had zero functionality to export PDF files. This meant I had to find a workaround, luckily React-PDF had the exact functionality I needed.
React-PDF is an extensive library, however I was only interested in one particular feature, the PDF renderer. This feature allows you to render custom PDF files on the fly; which you can build in plain jsx and then style using Styled-Components code. You essentially built out PDF files the same way you would build out a React.js application. I pre-processed the incoming case data by funneling it directly into my PDF download link component via prop drilling and also ran it through a pre-existing filtering function I found in another file in the codebase in order to allow the user to decide what data in particular they wanted in the PDF file via search queries.
Now, attorney’s that want a physical version of the aggregate data to reference can now export a custom PDF.
I am ecstatic to say that our team has brought this application to a minimum viable product state. Not only are the user tools properly functional, but all admin tools such as upload approvals and user management are fully functional as well. During our last stakeholder meeting, the stakeholder from HRF seemed incredibly pleased with the progress and she stated that she was soon to share the application with a group of fellow attorneys. So the next cohort will be able to work off real user feedback to greatly improve the application. Not by just adding any potential new features but also making small refinements that we as developers may have never thought about. I’m excited to see where this application will go next.
Greatest Dev Experience I’ve Ever Had
I’ve grown both technically and also interpersonally. I got to experiment with new libraries and take on challenges I haven’t faced before. All the while gaining the experience of working on a large team of diverse developers. It was a fun exercise, because some team members liked being in constant communication while others liked to just work on their own and you had to trust that they were going to deliver. Juggling all those different interpersonal interactions had somewhat of a learning curve, but I was quick to adjust and it is so much fun to see how everyone was so good at what they do yet do it all so differently. One of the things that helped me grow the most was being able to receive feedback as I contributed to the codebase.
Take the FAQ menu for example; a fellow team mate suggested I default the first panel to be open when the page loads. At first it didn’t seem like much of a change, but I figured I should give it a shot anyway. Especially since I’ve noticed that he really has a good eye for design. Surprisingly, it made a significant difference in terms of user experience. By having that first panel open, it guides the user’s eyes straight to it rather than them having to aimlessly poke around. This is also what had inspired me to add the accordion effect as well. Its this type of feedback and interaction that makes this type of team experience so valuable. Different perspectives and experiences coming together to achieve something great. I’ll always be grateful for having had the opportunity to work on such an important application and will never forget the experience of working with so many great people. This has undoubtedly been one of the most fulfilling experiences I’ve ever had as a developer.
