Building Bridges

Building bridges for what?

Recently, in Lambda School I have been working on a small team of web developers and data scientists to help a small organization with parts of their website. The organization is called Bridges To Prosperity. They build bridges in Rwanda to improve access to critical infrastructure.

Our role in the project was building out a single page application for their engineers to visualize current bridges, and bridges in planning as well as clearing displaying their current and projected impact.

What do you mean, there is already a site?

When we first started the project, my team and I created user stories, and wrote up an engineering outline to understand the full scope of what we needed in order to build the site from the ground up. Later, we were given more insight into the project, we learned that our job was to improve an existing website, not create one from scratch. This was challenging for our team who had developed a vision already of what the project would be.

Re-design

Now that we had access to the existing code base, the first thing we did was try to break it. If there is nothing else we can do to improve an existing software, maybe there are problems with it that affect a user's experience using it. We clicked on EVERYTHING. Very quickly we learned about parts of the website that needed to be re-designed. There was a drop down menu that hardly resembled one and would only work if you clicked an item in specific spots. There were filters in the map display that wouldn't show if you switched to a satellite view. Each problem and was an improvement to be made. We wrote them all down and made them into tasks and cards on our Trello project planning board.

Above is an example of one of our tasks. The site has a map, much like Google Maps only we implemented it using MapBox. The map displays bridges for the engineers, it has a filter to select between which types of bridges are being displayed. When we started the project, the text for these filters was colored to match qualities of the bridges being shown and it was very difficult to see. Furthermore, you needed to click the checkbox to toggle the filter. I made the text more visible by creating buttons for each filter property, now you can click the button to toggle it. This improves the touch screen usability. Each button uses the same colors as before but it appears less jarring, and more readable.

Project overview

Much of our work on this site consisted of graphical overhauls but many parts of the code needed cleaning as well. While planning this project we created an API contract with out data scientists so we could agree on what data we could get from them and what the data would look like. Despite this, it was still unclear what data if it would be possible to implement on their end as we arranged. That being said, most of our teams improvements were graphically/functionally oriented.

My contributions were as follows:

• Refactor React components to break up the size of RenderMap.js
• Install Material UI and remove AntD styling library.
• Create color theme in Material UI to match company colors.
• Overhaul filter styles for readability and usability.
• Host the project on AWS Amplify.
• Connect the host with a custom domain.
• Replace the province selection drop down menu with radio buttons.

Broken menu

As I said above, the drop down menu would only work if you clicked to open it, and then you needed to click the name of the province. If the user didn't click the province text, and they clicked the selection anywhere else, the menu would close and nothing else would happen.

This was quite easy to fix and creating the radio buttons in Material UI was quite easy. All the developer has to do is render a handful of pre-made components as part of the styling library and as you can see below I was able to simply set the state based on a user selection.

The results on the site:

Take me to your leader

No, seriously? Who are they? As a team, we started out with hardly any direction. We spent the first week planning and when half the week had passed we learned that most of our designs were already implemented in the existing site. While everyone working on the project met together several times each day, the web team had to meet with now established leader and try to coordinate our efforts. This created a communication challenge early on, at first we expected to receive more direction. Over time, we realized that it was in our hands. When this happened I messaged the web team and arranged some pair programming to get us all started since none of us really knew where to start on our own.

This became the start of it all. Our first pull request on GitHub was issued as a team. We all learned the review process together then as well as we reviewed the request during the call. I think taking the initiative to coordinate the team kicked us off and gave us the momentum to get work done.

Final thoughts

As it stands, the Bridges to Prosperity Bridge visualization site works. We very quickly eliminated all bugs that we found. We updated many of the styles with a more modern feel. We even added a tweaks to usability.

Features Shipped:

• Refactor React components to break up the size of RenderMap.js
• Install Material UI and remove AntD styling library.
• Create color theme in Material UI to match company colors.
• Overhaul filter styles for readability and usability.
• Host the project on AWS Amplify.
• Connect the host with a custom domain.
• Replace the province selection drop down menu with radio buttons.
• All buttons replaced with Material UI.
• Satellite view now renders bridges on the map.
• Graphs at the bottom of the page have been moved into a tab based view, a user can select which one they prefer.
• The default map has been replaced with a topographic one.
• Bridge details are now conditionally rendered.
• Bridge details now show images where available.
• The new data science API has been connected and is used for bridge data.
• The broken newsletter sign up section has been removed from the footer.

Looking forward

In the future of this project. I would like to see the components rendered inside the map view moved around to better accommodate different screen sizes. The table displaying bridge stats can be styled to be easier on your eyes, while retaining the meaning of the colors it uses. The newsletter could be fixed and added back to the footer as well. I noticed that the original footer had been an exactly copy of the one listed on https://www.bridgestoprosperity.org/

We talked as a team as well about moving the map filters outside the map view. While this may have been possible, it was not our priority. Moving it might help with responsiveness. Other challenges you could come across are adding more meaningful nodes on the map like hospitals or other infrastructure near bridges. Another feature we didn't have the data for until the final moment was a heat map to visualize areas which would receive greatest projected impact from a bridge.

A place of learning

Working on a small team of other developers to make the best out of this website was a fantastic learning experience. I can only predict that many developers are thrown into existing projects to learn the code base and have all their expectations shattered. Having this experience early with no "senior dev" to refer to helped me learn how to deal with little to no direction and still be productive. I learned how to turn from sitting ducks to a collaborative environment. The next time I'm working in a group of people like this, I will lead them to create a product worthwhile. During this project, this is what I think we accomplished.