Lambda Labs: A Retrospective
This past month or so has been the final technical portion I’ve undertaken during my time at Lambda School. For those who don’t know, Lambda School is a 6-month intensive coding bootcamp in which we learn the fundamentals of web development. The final month is something called “Labs.” We pair up with classmates across different educational tracks in order to complete a product for a non-profit organization.
For my team, we worked with an organization called Human Rights First. They assist immigrants seeking asylum in the US. We were tasked to create a web application that could accept PDF documents, convert the contents to plaintext and create a searchable table in order to monitor, track and analyze court case outcomes. Our team was made up of web developers and data science students. After dissecting what we would need to accomplish this task, my workload was mainly front-end oriented. I officially took on the role of building out:
- Our general UI
- The upload page in order to accept and send PDFs to the backend
- A dashboard to search and analyze the outcomes
The User Experience
We settled on using Ant Design for our design library. We felt it had the best balance of professional design and feature-set. But when looking for our design vision, the non-profit organization gave us plenty of room to use our imagination, but they did specify a few things:
- Mobile use was going to be used sparingly
- They wanted the coloring to resemble the New York Mets
- Ease of use was very important to them
Knowing this, we put pen to paper in order to draw up a general wireframe. This would help guide us as we started to code and guide our vision.
After we divvied up our work, I was delegated the task of creating our upload and dashboard pages. In terms of UX, my goal was to keep the upload page as simple as possible. Get in, get out. Quickly and successfully. I drew up this in our wireframe:
Short, simple and sweet.
Next up, our dashboard. Now the future vision for this will likely contain metrics and analyses to help decipher a ton of information on the fly so we took that into consideration for the wireframe. Lastly, we opted for a standard table format because it’s familiar and easy enough to learn how to use. This was the wireframe:
Our guiding principle was simplicity over all, and we feel like we hit the mark with the purpose that this application will serve.
The Upload Page
The upload page presented a unique challenge. We needed to figure out a way that we can we create a functional page that can manage multiple, large PDF and/or CSV uploads. Ant Design to the rescue. This simple bit of code helped set up the general UI setting up their out-of-the-box table.
We can choose what files we wish to accept in-line. In this case, PDFs and CSVs. We can also pass additional parameters in as props. By passing this through our props:
This allowed us to handle:
- Multiple file uploads
- Our HTTP request location
- Set stages and change the status for when a file is uploading, finished or errors out
Here’s what the flow looks like:
As the product develops, it’s important to consider a few things. The first that comes to mind is scaling. Are there limits? When we send larger files, how will they transfer quickly and efficiently? What will this look like if we need to open this up to additional filetypes? For now, this will suffice in the short-term but our team wanted to be thoughtful about the future of the product.
When discussing our dashboard, we wanted to create options in order to allow for search for specific judge names, sort through cases by each case’s unique ID, preview and download PDF files and export the data as a CSV. Ant Design has a table component so that was able to give us a solid base in order to accomplish this. With a little out of the box customization, we can add in-table search with props.
With a little more magic sauce, we can add filtering as well.
We were able to incorporate more advanced features such as CSV export, PDF preview and download as well. CSV Export was a small NPM module that was an extension of Ant Design called ant-table-extensions. This gave us quick export ability for our table. For PDF previewing, we used the popular module react-pdf-viewer. Our use case is simple, but the module is very comprehensive. This opens the door for countless opportunities down the line as we build onto this. Lastly, we can allow users to download the file using a simple HTTP request.
This is the basic flow of our dashboard. It allows users to filter, sort and search across different columns.
As a team, our biggest technical challenge was presumed to be the data science process of intaking a new pdf, scanning that to plain text and sending that back in an organized way. This continues to be a hurdle, but we’re excited about the progress we’ve made and what it can look like with more than a couple weeks to work on it.
Unfortunately, I have to let this project go after 4 weeks. I’m excited to see what further Labs teams can do, but selfishly, I’d love to continue to work on it with my team. It was a great pleasure to work with this team. The experience of building something in a team setting is invaluable for me, and I was so pleased with the outcome. I look forward to being able to do more projects like this in a professional setting.