Bootcamp Week 4 – Collaboration and Workflow

This week, we were tasked with creating a website for a new company, using a provided Figma design as the basis for our implementation. I worked in a group of three, and together we came up with HappyToes, an eCommerce site that sells socks designed to make you feel happy.

How we approached the task

The task began with an in-person session where we were given a paper copy of the design. Using this design, we annotated the different sections to divide them into components and identify which ones required only CSS and which also needed JavaScript. From there, we used GitHub Projects to create and manage issues for the project.

Before starting work on the CSS and JavaScript, we created the HTML files for the three pages of the website, along with the corresponding CSS and script files for each page. We also set up the basic CSS needed to get started. From there, we were ready to develop the style and functionality of the site.

Using GitHub to collaborate

As a team, we decided to focus on the homepage first, as it was a “should” requirement for the task. We worked through the homepage in chronological order and assigned GitHub issues one at a time, based on each team member’s availability over the following week. From each GitHub issue, we created a new branch to work on our code separately from the main branch.

Since we had set up issues for separate components and communicated regularly when picking up new tasks, we were able to minimise conflicts. The only ones we encountered involved additions to the global.css file, which were very easy to resolve.

Once we completed our assigned GitHub issues, we created pull requests (PRs) detailing the changes we made and requested reviews from a member of the team.

Reviews were incredibly helpful, as having a second pair of eyes made it easier to spot coding errors or identify areas for improvement. In reflection, we could have made better use of code reviews, but it became more difficult as the team’s availability decreased due to commitments outside of the bootcamp.

The finished website

As a team, we decided to create a cut-off point where we would stop implementing new features so we could focus on preparing our presentation and fixing any last-minute bugs discovered during deployment.

There are still a few improvements we’d like to make as a team - mainly refining the responsive design to match the Figma layout more closely, but overall the website looks complete and functions as expected.

Overall thoughts and learnings

Overall, I found this week to be very insightful. As a longer task with a detailed brief, it offered a glimpse into how development projects are run in a real workplace. I also identified several areas for improvement for future group projects, such as creating CSS variables earlier, making greater use of GitHub reviews, and combining related CSS and JavaScript work into a single ticket.