Bridges to Careers

Simon Huang
6 min readOct 23, 2020

Bridges to Prosperity is a non-profit organization with an aim to build bridges in hopes of solving rural isolation. These bridges will connect communities such that they will be able to have more access to other communities to benefit them economically and socially. The product that our team is working on for their organization is a web application that will allow users to view the placements and effects of these bridges. We are implementing a map and a layout that will allow us to view images, information, and the effects of the bridges on the community. We will also be able to see previous, current, and future prospects, as well as their current status.

This is a new experience for the team and myself, and I am very excited going into this. This will be the first realistic situation where I will be working with a team on improving an existing feature. Going into the project, I encountered a few concerns, whether or not we will be able to live up to the standard that they are expecting, as well as exactly what they are expecting.

In the beginning, we were quite unsure of what we were expected to do. Our first week was primarily planning, which we have never done before. All of our previous team-based projects were all within a one week span, so a one month project was something different. During the second week, we were still unsure of what exactly we had to do, we were struggling quite a bit on what direction the projected was expected to go. After a few meetings, we finally understood what direction we were headed to and ever since, we have been on a roll.

Trello card for creation of the image card component

Here is an individual task that we have worked on. We broke this up into steps that allowed us to organize the order needed to finish the feature. Firstly, we knew we needed to find the actual images and put them into our database. This was a minor issue, but we had to convert all the links provided in an excel sheet to the database, which took a bit of programming. Then, we added it while implementing more rows for our migration so we will be able to access the links. Lastly, we made new components to properly display said images. This was a huge step forward for us, as this was one of the first features we added to our web application and it allowed us to understand each others’ workflows.

Teamwork Makes the Dream Work

Navigation and icon bar
Card components that displayed information for the selected bridge

The main contributions I’ve made are on the front end side of the application. I created the navigation bar, the current layout, and the different components to display all types of information about each bridge. I worked on the navigation bar with a team member, Manuel, to create a sliding effect using Material-UI. The rest of the components would be a card component to display the different stages of the bridges, an image of the bridge, and information about the bridge. After selecting a bridge, it will display the boxes on the bottom to display the information.

A technical challenge that the team has encountered was the implementation of the new table. The new table added many new rows, so our search function was now flawed. The previous search function would search for similar values for each key, while excluding certain keys. After the new table, we ran into problems whenever we tried to use the search function. It would throw an error saying we could not access a null element. This was because the new table had defaulted null values for the before and after image. We had to add more keys to the array of excluded keys. Afterwards, it was working, but there was now another problem. The problem was temporarily fixed, but after a few pull requests, we encountered another problem with the search function. It would now display all of them regardless of the search. This was due to the new rows having common default values. Since they had values, they did not trigger the null error. This was fixed similarly, by excluding those keys with the same default values.

Exclusion array to prevent searches for certain keys

Another technical challenge we encountered was the implementation of the sliding div component in the navigation bar. We were unfamiliar with the transitional components from Material-UI. Since it was new technology, we were very confused about the implementation of it. We approached it by first reading the documentation for the component. Then, we would look at examples to properly make use of this component.

States required to handle the slide component
Implementation of a sliding background for the navigation bar
Implementation of a sliding background to indicate hovering a link

Status Check

Ever since we adopted the project, we have added a navigation bar, informational cards including images about bridges, and fixed the search functionality. We have also added responsiveness for the layout for tablet and mobile view.

Navigation bar functionality
Bridge status displayed on map
Search functionality and flying to the marker
Bridge image, graph and information displayed upon selection

Since we are nearing the end of our time to work on this project, there are a few plans we would like to have implemented in the future if we were permitted. For starters, we would like to improve the mobile and tablet resolution responsiveness. Some components are not displayed the best it could be. Another feature we would like to be implemented would be the login page for the admins, such that they would be able to add new pointers to the map. The ability to add new pointers is available, but the login is not. We would also like to implement real data to the graphs being displayed, however, we would need the data science team to provide us with proper tables. This would undoubtedly bring upon technical challenges. The biggest challenge for the front end developer in the future would be the Okta login authentication. It is a new technology for most people in this coding boot camp, therefore, there will be a lot of technological research required to implement it well.

Overall, this project has taught me a lot. It taught me the communication skills I need to improve on and how to utilize them. I learned how to properly discuss the plans for the project and how to contribute to a peer programming session. I’ve been told I needed to improve on my communication skills, and I believe I have done so, and proved it, by communicating my intentions with the team, properly explaining the features I’ve implemented, and how I did it. This project pushes my career goals by allowing me a chance to learn how a working environment would feel like. It has shown me how important interpersonal skills are, as much as technical skills. It has also helped me realize that I have definitely learned a lot from the boot camp. This experience definitely helped defeat some of my impostor syndrome. Finally, with this project, I now feel very confident I can hop into a workplace and contribute efficiently.

--

--