Introspection Tool

About

Front End | Back End

Introspection Tool is a group project done during JumpStart. We used the MERN stack, PassportJS, Plotly, CircleCI, Cypress and Jest during the project.

Primarily, the project revolves around data visualization. As the website requires admin rights to view, you can visit our demo website to get a feel of what the data visualization looks like. (Best viewed on desktop)

Things I've Learned

AGILE

We practiced AGILE during the project, which includes test-driven development, pair programming, scrum and continous integration. I enjoyed working in the team and the responsibilities given to me. We faced challenges in setting up the CI pipeline at first.

One of the reasons (as seen above) is because our Cypress test timed out trying to ping the website before it has started.

Another was setting up the front end CI to use the same build across different jobs in the same workflow.

We also used feature toggles in our project, which meant that in our cypress tests, we had to make sure that the relevant tests were feature toggled as well.

Despite the added complexity, the CI pipeline and tests made us confident about our code and what went wrong when our builds failed.

Plotly

No one on our team had done data visualization before, and we did a spike on what tool to use, eventually settling on Plotly. Despite the poor documentation, plotly is a highly versatile tool, with one of the largest varieties of charts for a charting library.

Unfortunately, we had a rather unique use case that combined the scatter plot with a pie-chart, which meant smaller bundles of Plotly couldn't be used. If more time was allocated, one of the things I'm interested in is how to get the build to be smaller.

We render the chart with dynamic data fetched from the back end. A CSV can be uploaded by the admin, which then gets converted to JSON. The data is then fed to plotly to determine where each marker goes.

PassportJS

We used PassportJS's Google OAuth2.0 for authentication. Only users on the ThoughtWorks email domain can register and sign in. A session cookie is sent to the client, which maintains the session.

The implementation of PassportJS was rather straightforward due to good documentation and example repos available. The trickier part was mocking the log in for unit-testing and cypress. For the back end unit tests, we used jest.mock and .mockImplementation to mock the middlewares.

Unfortunately, we did not have enough time to resolve the cypress tests as the authentication was a feature added in the last sprint.

Git Merge and Testing

The pairs worked on independent features and we avoided unnecessary merge hell. We also ensured that we tested before pushing. If a build is broken, we took responsibility to fix it as soon as possible and to inform others of the broken build. As there was a period of time when the CI failed even though all tests passed and the build is fine, communication was especially important. We had a CI bot on slack that informed us when a build failed, and that was helpful as well.

Refactoring

I had fun refactoring the code. For instance, there were functions that were similar or redundant. I simplified them and made them more readable when possible. If more time was afforded, that would be the first thing I (and I think the rest) would love to do more of.