I’m working on adding functionality to dmvboardgames.com which will allow users to join groups and see information about the groups they are a part of. After implementing backend logic as described in my previous post, I worked on end-to-end testing with the UI.


When doing end-to-end testing, I realized some adjustments needed to be made to the backend to make sure data showed up correctly on the UI. I also deleted some unused code and did some refactoring to improve readability.

As usual, I ran all the backend integration tests to make sure everything was working as expected.

Below is a preliminary version of the user member page with some test data. I plan to update this page to include the day and time of each event and improve the styling.

When working on the UI, I’m relying on the following design choices to help reduce complexity.

• Using a multi-page web site instead of a SPA(Single Page Application). Since dmvboardgames.com consists of multiple independent web pages, changes are isolated. I don’t have to be concerned about breaking unrelated functionality when I make a change.
• Isolating component CSS styles with shadow DOM. This allows me to have styles scoped to those components only using standard CSS. Also, if I’m looking for a component style to update, I can find it in the component’s style definition. Here is an example from the member data component.
  
• Using a framework for common tasks. On the UI, I use a framework places.js I developed for state-based UIs, managing asynchronous data fetching, and setting up components to use shadow DOM. Here is the source code for places.js: https://github.com/gatherspiel/places-js