It's crazy how a bunch of fresh graduates from different Universities became a team to build a fantastic website, let’s start by introducing:

• Lester a.k.a. “The Baguio cowboy and back-end lover” who’s an Information Technology (IT) graduate from the University of the Cordilleras.
• Aji a.k.a. "The curious one", is a Computer Science (CS) graduate, a batchmate of Lester, and is also from the same University. Fond of CSS-related stuff and is always ordering answers for breakfast.
• JP (John Patrick) a.k.a. "The Tech Lead", is also a CS major from the University of Santo Tomas whose strengths are JavaScript, React, TypeScript, and Client-side development.
• Evangel a.k.a "The Support", IT degree holder from the Baguio College of Technology.

Referring to us as one, you can just call us Team Maki and this is a feature story of how we built the website you’re currently viewing.

Right from the beginning, we knew that building this website wouldn’t be easy, some of us are not used to working with a team since we’ve been focusing on developing our own skills. We have different levels of skill and experience thus we can teach and learn from each other, and that’s exactly what happened. Throughout the development of this website, we initially identified each other's strengths but we also had weaknesses and difficulties that became roadblocks. Nonetheless, we managed to overcome these blockers with multiple solutions that made this website work like a charm. 

“It’s time to push yourselves even further, this task requires end-to-end solutions, so it’s best to learn as much as you can everyday.” -Kane

From Aji's perspective, this Bootcamp is like a University plus or a University premium. It taught us things standard education wasn’t able to do. Even if we consider ourselves bachelor or degree holders the team still had masses of realizations and learnings from just a single project. There’s just too much knowledge and discoveries that we can’t even write them all. But all this is simply just an introduction. So as usual, let's start from the beginning.

Prior events

If you ever stumbled upon our individual stories, all of us started the Bootcamp with a specific project. This was an initial test for demonstrating our current skills and knowledge to determine our strengths and weaknesses.

After numerous tasks and before crafting this website, we worked on our current weaknesses and shortcomings at the time. JP and Lester focused on improving CSS and styling while Aji and Evangel focused on improving their JavaScript (JS) skills and logic. 

Lester and JP were assigned to a group making the CatWiki app project. The project serves as an exercise to improve their CSS skills, while still implementing React w/ Typescript using NextJS as well as integrating data from a custom backend using GraphQL made by one of the team members. According to JP, he was able to improve his CSS skills from the CatWiki project as he also learned a lot from his team members who are quite experienced and have knowledge of other concepts in using NextJS that he wasn’t familiar with at the time. 

From time to time, we also got comfortable with using Github as a team, since one of the members, JP, has been using Git individually for the most part. I guess everyone gained the knowledge of how a team effectively operates in the same repository.

Afterward, everyone moved on to the eCommerce app project, using the same tools we’ve been using for the past projects and combining some libraries and frameworks we wanted to integrate on our own. This project made it clear that we are very comfortable with creating client-side interfaces and using the current technologies.

“Unless you try to do something beyond what you have already mastered, you will never grow”

Roadblocks

Just like any project, we experienced problems that hindered the team from reaching their daily, weekly, or even their general goal. But remember, it’s never a problem if there is no solution.

At the early stages of development, since some of us weren’t accustomed to using Git, the team decided to start off slow. The team planned to temporarily focus and work on a single page (specifically the home page), with each member working on different sections of the page. This made the use of Git commands more emphasized but more conflicts were present. The team was able to get a feel for using Git, but this process gave us backlogs for the other tasks and pages.

At the mid-stages of development, we soon suffered the consequences of the poor task planning and delegation of the project. The codebase of our project was messy and didn’t have common ground in terms of organization and syntax.

Our initial plan of assigning the tasks per page or section had backfired later on. The team realized that the reusability of the components for the website should’ve been a priority and that each member of the team should’ve played with their strengths and skills on areas where they apply.

Not really a blocker, but the team noticed that the performance and SEO of the project were poorly optimized. Of course, we shouldn’t just think as developers but we should also keep in mind the user experience, and this is a very important factor to consider.

Task prioritization was unclear and resulted in a lot of backlogs.

Solutions

The team had to make changes and adjustments in managing the project and the prioritization of tasks. The team prioritized the heavy planning and architecture of the website, from the client-side to the server-side. Reusability, optimization, and organization of code and database were carefully considered before we got our hands dirty.

The team designated a QA role to monitor the current output and development of the project. Evangel was assigned to be the team’s QA. JP, who halfway through the development stepped up and became the team leader also mentioned that he personally thought it was very beneficial to have a QA in the team, since as a member of the team who does a lot of coding and testing on the engineering side, he tends to miss some pesky bugs in the background while implementing features and it saves him a lot of time when a member can fill in the support role and check how the output looks overall, especially in device responsiveness. “For me, being a quality assurance for our team is not that easy and I learned a lot from it. Sometimes I may not know what I am doing but I am glad I have our team that guided and supported me all throughout.” implied Evangel.

As stated earlier, JP was assigned to take the role of the technical leader for the project. Initially, the team unanimously assigned Lester to take the lead role, but eventually, a lot of the tasks piled up from our backlog as he was also handling the project’s backend / CMS, and having to manage the team and the project overall is too much to handle for a single member of the team. We figured it would be best that JP would handle the management and planning of the project’s engineering plans.

Initiative and taking necessary actions. As a team, we decided to hold our own meetings outside of our daily standups so that we could address any problems, blockers, suggestions, and conflicts within the project. It really helped a lot with the progress of our project, as we were able to work effectively and efficiently.

We also did a lot of refactoring in our project, especially implementing reusability for the components of the website. Determining the components that needed reusability helped out a lot in our development progress.

Reflections and Learnings

As a team, we realized the importance of careful planning and solid architecture before proceeding with the construction of our project’s codebase.

Individually, we figured out that each one of us still lacks certain skills, for thinking of and managing step-by-step tasks for developing projects.

Having specified roles and responsibilities that align with one’s strengths tremendously helped the team operate efficiently and improve our project output’s quality.

Communication is always vital. During one of our team’s sprint retrospectives, we realized that we actually had good communication and this is one of the main reasons why we managed to overcome blockers and avoid conflicts. There are a hundred or even thousands of reasons why communication is very important, so whatever it is you’re going to do in life, build up your communication skills and be a team player.

The members of team Maki believe that the training they experienced before and during here at Goodfrontend company, either as a solo or with a team has made a good contribution for the development of building the Good Frontend website, not only does it stop there but it also made a huge impact to their coding journey as a whole.

This website is a product of hard work and dedication by 4 aspiring front-end developers. It wouldn’t be possible without the help of their mentors, Kane and Karl.