Developing a SPA for the non-profit, Eco-Soap Bank -Reflections of a Web Developer
Tags: react, css
Published: 2020-08-28 14:52:00

During my education at Lambda School, I had the opportunity to work on a cross-functional team of Web and iOS developers to develop products for the non-profit organization, Eco-Soap Bank. Their needs involved the development of a map widget for displaying data, critical to high-lighting the success of their mission, as well as an iOS app for allowing hotels to participate in said mission.

Eco-Soap Bank's mission is to recycle minimally used soap bars from hotels into clean new soap, that is then sent to poorer countries with more lax sanitation standards to help fight preventable diseases and save human lives. Due to our (perhaps unnecessarily high) sanitation standards, hotels throw out tons of perfectly good soap every day. This non-profit seeks to mitigate that loss and send it to countries who desperately need it.

That's where we come in. Eco-Soap's problem stems from the fact that they don't have a good medium for sharing the success of their mission, as well as a good platform for connecting with hotels that are interested in participating in the program. My job, as a Web Developer, is to create a single-page application to house a map that allowed for dynamically changing data points, as well as the creation and maintenance of the administrative users who have access to the application.

Prepping for this task felt very intimidating, as I had never had the opportunity to tackle a problem such as this. I had limited experience implementing a widget before, let alone developing one for a real company with important deadlines to be met. But once the team and I broke down the task into releases and smaller tasks, those fears quickly subsided.

Breaking down the larger goal into individual tasks helped quantify an otherwise daunting task. Dividing up our releases to focus on, first the admin dashboard, and then the map as the second. The final release is dedicated to bug fixes and quality control.


In the Trenches

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q5pa3coq7msgamd4zss5.png)
After the planning phase was finished, it was now time to start getting our hands dirty on the actual project. Initially, it was 2 other web devs and I working on our same project, but one of them decided to go on a hiatus from the project, leaving just me and my partner, Mario, to finish the product. At first, this only added to the stress of the overall project, as that developer seemed to be the one who grasped everything and had a plan for the project. Once he left, it was left up to Mario and I to figure out how best to complete the project to the specifications of the stakeholder.

Initially, we tried splitting up and working separately but it quickly became clear that we would need to work closely. We began pair programming daily, each working on a shared repository simultaneously using Live Share and Git Mob for VS Code. These tools allowed us to type in real time on the same project and share credit among the commits and pushes to Github.

One problem we really struggled for a while to figure out was how to create a map using our selected API, Mapbox. The documentation was fairly decent, as far as general implementation goes, but usage specifically with React was difficult to find. Through trial and error, however, Mario and I were able to get it working on a trial repository. We decided to keep working in this repository, adding the changes and functionality we would need before transferring it over to the final product to avoid development issues with the rest of the project.


Hitting a Brick Wall


Drama has ensued and pulled the brakes hard on the train of progress. Our API, who has a small pay wall, is apparently not acceptable, or at least preferable, to Eco-Soap Bank. This has been demotivating, to say the least. Today's work accomplished little as we resumed the search of the web for suitable API's. Option after option keeps getting blocked by financial requirements.

After a full day's search, we've decided to hang the stakeholders preferences and make the best product possible. Utilizing the MapBox API will give us the tools we need to give the users an experience they could not otherwise have. More importantly, this enthused Mario and I again and encouraged us to start working again. We're ready to tackle this product and continue giving it our all, as opposed to what we otherwise might have been. 

From here on out, the main decisions that were stopping us have been decided. All that's left to do is put our heads down and crank out a final product for the consumers, or at least, our portfolios. Whatever the final product turns out to be, I know it will be something we'll be proud of.


Post Completion Reflection


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7pv0y9mjff99s1e3q26g.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/teytvukj2mqdwsm33830.png)
In the last month of working, we caught fire. We implemented (and re-implemented [several times]) the Mapbox API and got markers displaying record information for each location. We hammered out a bottom tab that included a gallery for pictures and videos, as well as relevant text information. Individual pages for creating and modifying map records, record types, and admin users fell before out mighty keyboard strokes. Together, Mario and I reached a minimum viable product with plenty of bells and whistles to make it shine as well. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/phe2wkjyvj7b62efetar.png)

Looking back, a lot of the fears I had about what these past few weeks were going to look like still were challenges we had to overcome. But overcome we did. It feels good to be able to look back at the progress we made, rather than fear for what the future might hold. Now, I can focus on conquering new fears that are on my agenda: The Job Search.

I already know finding a job will be challenging to say the least. Our society still clings to archaic measures of intelligence and skill, specifically in this case, college degrees. As someone who is technically certified, I'm already aware of the inherent bias that will plague me as I search for positions. But I'm sure I will be able to overcome even that. If I've learned anything over the past 9 months, it's that I can accomplish anything I set my mind to. As difficult as it may be, I will be able to do what needs to be done to further my goals. And that is the most valuable skill I could ever develop.