During Sprint Three, my main focus was on restructuring the frontend. While two teammates continued working on the data transfer subproject and reporting logic, I worked with another teammate on getting the frontend functional. Since we shifted our focus away from the database issue in sprint two, we have made more progress on our issues and had more achievable goals.
Before restructuring, I spent some time debugging the frontend/backend connection, which we thought was a blocker for my teammate. I tested switching the backend Docker image from the main branch to our latest reportingAPI branch, but ran into further issues. I felt we should resolve the pipeline issues and update the frontend structure before troubleshooting the connection issue, especially since it was not a blocker for UI development. I created a new branch from an earlier commit and fixed a CSpell error in the pipeline before focusing on the frontend.
The main blocker at the start was that the frontend was outdated. It used an older file structure and lacked Vite, which did not align with the other projects, like guestinfofrontend. My teammate had trouble developing the frontend UI because it was outdated and could not preview the changes. To help him with the UI, I began restructuring the frontend and set up the development and preview environments. Before restructuring, I confirmed that Vue 3 and Vite would work so my teammate could preview his changes to the UI live. Once that was done, I started working on frontend-dev-up and frontend-prod-up scripts, ensuring they worked properly. When setting up Vite, I had used the newest version, which caused some compatibility issues. I downgraded Vite so it would work with node:14 Alpine used in the other projects.
Despite the frontend/backend connection not being fixed yet, we were able to update the frontend’s file structure, set up Vite, and develop the new UI.
Our decision to move the data transfer to a new subproject allowed us to have more achievable goals for sprint three. My teammate and I communicated consistently and collaborated effectively on the front end. Using the guestinfofrontend structure as a reference made the process much smoother.
I believe too much time was spent on the frontend/backend connection issue during sprint two and at the start of sprint three. It was not a blocker for the issues we were working on, and we could have started earlier on the frontend restructure. Also, I understood less of the progress made outside the frontend changes with my teammate, so there could have been better communication between us on the other issues.
I should have been more careful when implementing Vite and Vue 3 for my teammate. In a rush to get the development and preview running, I neglected to check on the versions used in guestinfo to see if they match. Although it was not a big issue to switch to an older version, it added more time that could have been used elsewhere.
I chose the “Use the source” pattern, which discusses the importance of reading and understanding existing code to gain knowledge and improve skills. During Sprint Three, I had to examine and understand the guestinfofrontend so I could update the file structure in the reporting frontend. I was able to use the existing code as a guide for setting up Vite and restructuring the project, deepening my understanding of the frontend as a whole.
Gitlab Commits:
- Reverted to an earlier commit on a new branch and fixed the CSpell error before focusing on the frontend.
- Set up Vite for UI development and preview.
- Reorganized file structure to match guestinfofrontend and fixed compatibility issues.
- Small pathing fix.
From the blog CS@Worcester – KindlCoding by jkindl and used with permission of the author. All other rights reserved by the author.