If at first you don’t succeed, it’s probably Redux
One Promise at a Time
All of us deep down long to help our fellow man. It lives vibrantly in our instincts to pick people up when they fall and offer a helping hand to those in need. We don’t always rise to that occasion though. With a busy world and what feels like never enough time it’s easy to focus on our own lives and families and that’s okay. So, where does that leave other families that need help? Well, that’s where Family Promise comes in.
Started by Karen Olson in 1986, Family Promise's mission has been to help homeless and low-income families achieve sustainable independence through a community-based response. I was lucky enough to work with such an amazing organization. I was so excited to be a part of this organization's growing process and not going to lie also a little nervous. With such a successful and active company that helps people in need, you want to make sure everything you add to it will empower the employees and volunteers to help more people easily and effectively.
Put me in Coach
Immediately starting this project, I wanted to hit the ground running and learn as much as possible and help Family Promise help more people. As we meet with stakeholders to talk about the project they wanted us to work on the vision started to take shape. Family Promise provides help services like temporary housing, meals, and others to more than 125,000 family members annually. When you’re helping that many families, you want to keep track of all the services you provide, where they are, and most importantly are they helping. That’s where our team came in.
Enter Service Tracker
The project our team worked on for Family Promise was the Service Tracker. This would be a tool for Family Promise to help evaluate, log, track, and analyze various services they’re providing to families across the nation. This Service Tracker would help streamline how Administrators and Program Managers view, track, log, and evaluate services in any given location. This also presented a few challenges for our team.
What’s in Store?
Or should I say the Redux store? Jumping into the code I choose to work on the Front End development team. I wanted to make a clean, easy-to-understand, and functional table and forms for the services tab in the Service Tracker. Admittedly this required a fair bit more functionality than I had anticipated, but I was driven to make it happen. After a few days of planning, the objectives were clear. We needed to provide Administrators and Program Managers with the ability to add new services and service types and empower them to edit/update and delete them if needed. Furthermore, add a display of all the services that currently exist in a user-friendly table that would allow the user to see and filter through the table with relative ease. Sounds simple enough, right? not so much. My first initial look into the code base presented me with my first big challenge. Almost no Redux had been set up. The store existed, but nothing was in it, no state, nothing connected at all.
Deep End it is
As soon as I saw that Redux required a fair bit of work, I paired with two other developers to tackle the problem step by step. This began with systematically going through all reducers and actions for services, service types, and providers, ensuring everything was properly formatted and connected to the appropriate components. We faced a fair bit of errors initially, but with diligence and attention to detail, and great teammates, we overcame that and connected everything to the store. Phew, now it was time to tackle the forms.
Together with my teammates Andrew and Chase, we aligned the values in the forms to match what the API was expecting. A process made even more difficult since we were writing in antd design, which none of us had ever worked with before. We also wanted to bring a little more functionality to the form when selecting recipients, service type, and providers. We settled on making those input fields into dropdown menus that displayed all the existing members of the prospective input. This required us to interact with three different APIs and made the challenges we were facing with the state a little harder when we wanted all this data all at once. We accomplished this because of all the work we put into organizing the Redux store early on in the project.
Everyone at the Table,
Our next big challenge came when making the service table. We talked at length about how this should look, what the table should contain, and had to ask ourselves questions like. “Is this going to help the user find what they need?” and “what would I be looking for if I was using this service tracker?”. After a day or two of planning and close collaboration with our team on the back end, we decided on the fields we felt were the most important. This would give the user the most helpful information at a glance and the ability to filter through that table by a field of their choosing. We accomplished this by implementing a state called sortedInfo, and filteredInfo that we altered and changed at the press of a button on the screen that allowed the user to filter between names, service type, status, units, and more.
Where we Stand,
As the month progressed, we were able to add more and more to this amazing project, but there is only so much time to work on your project. As it stands, we were able to streamline the services tab. Giving the user the ability to add new service types and log new services displayed on a clear, easy-to-read table empowers the user to filter through different metrics. Another team on the Front end was able to accomplish the same for the recipient's tab. Given more time, I would have loved to have been able to build a map in this table that would display services at their given locations allowing the user to see trends in what areas require the most help and what services are most required. This could be a difficult feature to implement with a constantly shifting state. Still, I hope that new developers coming onto this project will be excited about adding to a clear and functional codebase that truly makes a difference in helping families out of poverty and into prosperity.