My Proudest Work at Procurify as a Co-op Student
Written by Sei Young Andres Lee
Hello reader! My name is Sei Young Andres Lee and I’m a 4th year student at the University of British Columbia studying the combined major of Computer Science and Math.
My co-op experience at Procurify was my introduction to a Canadian software company. At Procurify, I worked as a Full Stack Software Engineer Co-op for the spend team. The spend team’s mission is to make it simple for customers to understand their spending data so they can make informed purchasing decisions.
While working with the spend team, I tackled projects of various complexity and size. However, one body of work that I’m the most proud of was actually the result of a bug. The work I completed not only resulted in fixing the issue for the client, it also contributed to our engineering team’s AngularJS to React migration.
I would like to discuss more about my experience working on this project and why I’m proud of it.
Introduction to the project
At the end of 2021, I was assigned an AngularJS bug that was causing a poor user experience. The user would experience duplicated approver options being rendered when they searched for specific approvers. This behavior occasionally happened when a search term was typed in or deleted quickly. The bug is displayed on the gif below.
In order to debug this, I went into the network tab to inspect the network requests being made by this component. Here I was able to pinpoint whether or not the duplicated options were showing due to a problem in the back end or the front end.
Next, I looked into the AngularJS code base and started debugging. I did this by console logging places I thought would affect the approvers being shown. Eventually, I found out that there was a debounce being made after each change to the search parameters. This means that there would be a slight wait time for each request to be made, which would result in duplicate and incorrect names being shown because the code would sometimes attempt to make multiple changes to the state of the approvers simultaneously.
Potential solution alignments
After finding the root cause, I decided that I could tackle this problem in three different ways, each with different benefits and trade-offs.
1. The first solution
The first solution we came up with was to increase the debounce time to decrease the probability of simultaneous API requests occuring. The benefit of this solution is that changes are minimal, making the scope and complexity of the project simple. However, increasing the timeout wouldn’t fix the issue, it would only reduce the frequency of the bug occuring.
2. The second solution
Secondly, I could fix the issue in the underlying select component that the user select component is built on-top of. This would result in fully fixing the bug. However, the drawback here is that the scope and complexity would increase, especially since the select dropdown component is used as a base for many other components across the AngularJS code in our app.
To make matters worse, this part of our AngularJS codebase has limited test coverage, which would mean manually testing across the app. This highlights the importance of having unit testing to ensure that future changes do not negatively affect the app.
On top of the risk of introducing an app-wide change, it didn’t make sense to update AngularJS code as our team is moving away from AngularJS and towards React. This meant that my fix would not be in use after the migrating process is completed.
3. The third solution
After discussing these options with my Team Lead and mentor, Sherman Hui, we realized we could solve two problems at once with a third option. We could fix the issue by creating this same component in React and then use that component in the existing AngularJS codebase. On top of not introducing more AngularJS code, we reduced about 380 lines of AngularJS code in our app.
The scope of the problem would be much smaller than the second solution because we are replacing this specific dropdown with a React version. We would also be able to fulfill our goal of adding test coverage, as writing tests with Jest and Testing Library is easy.
After reviewing all the provided options with Sherman, I decided that this should be the solution to go with. To make sure I had enough time to test and implement this approach, I used the first solution as a temporary fix. By doing so, I could improve the customer experience by reducing the frequency in which the issue happened while working on a permanent solution.
Now it was time for me to break down and write the actual solution that I had chosen. I broke down the project into three checkpoints, which are the following:
- Firstly, I coded the component in ReactJS and tested that it looked and worked like the Angular component. The testing would be done with Jest, a testing library, and Storybook, a tool that helps developers build UIs and components in isolation.
- Next, we used the newly-created React component and built a bridged version. We call React components that are embedded in AngularJS bridged components. To create one, we run a helper script that uses a library. This embeds React components into AngularJS pages.
- Lastly, when the component was added to the AngularJS page, I tested to ensure the bug no longer occurred on the page. We also use feature flags to safely introduce code changes like this to our app. This ensures there are no production incidents and that we remove the old AngularJS component and replace it with the brand new React component!
The work went from looking this:
To looking like this after the bridging process:
What I learned and why I’m proud of this project
I am extremely proud of this piece of work because I contributed towards Procurify’s long-term goals of removing AngularJS code. I wrote a reusable React component that will be used by many other pages in our application. This is very rewarding because I left a mark of my hard work at Procurify.
Additionally, I gained experience and familiarity working with AngularJS and ReactJS, as well as learned how to plan and manage a large-scale project.
I also learned how it is helpful for myself and my team to break down a big project into smaller manageable tasks. This allows the team to see my progress and have a general understanding of what I’m working on each day. Additionally, it helped me stay focused on one task and not fall behind.
Another benefit of splitting my work is that I can follow a roadmap and understand the specifics of each task. Ultimately, I also learned a lot about AngularJS. More specifically, I learned why many organizations, including Procurify, are moving away from AngularJS and working to migrate their code bases to more modern platforms like ReactJS.
The way that imports have to be injected and how the logic is connected to each HTML file is significantly more work and complex than a simple React tsx file. This made me realize that I should just focus on refining my React skills.
Finally, I broadened my knowledge on ReactJS. I learned about the different conventions of testing front-end code; I learned how to mock certain requests to the backend; and I learned the importance of making my code more readable. Overall, I feel super excited to apply the industry experience I’ve gained at Procurify in my future roles.
Overall experience working at Procurify
If I could describe my experience at Procurify with one word I would choose the word “well-rounded.”
I gained a variety of experience, from learning about best practices on our front end and back end codebases, to learning about how to work efficiently in an async and remote environment. I’m glad that I got to work with everyone on the spend team, as well as meet and collaborate with other teams across Procurify.
I truly believe that Procurify as a mission-driven organization and as a community is perfect for any developer who aspires to learn and grow to create the best app possible.
If any reader is considering working here, I strongly recommend it. I have not only grown in my coding skills, but I’ve also in my ability to collaborate and generate new ideas with my fellow colleagues.
Procurify is a leading all-in-one spend management solution that helps mission-driven organizations deliver tracking, accountability, and end-to-end workflows for expenses and spending.
We’re always hiring new team members. To find out more about how you can get involved with life at Procurify, visit here: www.procurify.com/careers.