What I Learned From Project Collaboration With The Collab Lab
Tags: webdev, beginners, watercooler, collaboration
Published: 2021-12-01 11:25:00

Hello Fellow CodeNewbies 👋,

I did a collaboration program this past eight weeks with [The Collab Lab](https://the-collab-lab.codes/).
And those eight weeks ended. It's a wrap! 🎉

![celebration gif](https://media.giphy.com/media/ZmgSpGW4p8EUspn0Uk/giphy.gif)

It was one great experience for me as a self-taught web developer to build an app with other developers.
This experience enriches my knowledge in the web development world. I learned so many things. Not only technical but also how to collaborate in a team. I also discovered more about myself, my strengths, and other things that need improvement.

I want to share my journey with The Collab Lab in this article.

## What is The Collab Lab?

The Collab Lab is a non-profit project collaboration program for early-career developers run by volunteers.
Their primary focus is guiding the participants to *collaborate* in creating a React project.

## Why and how I (finally) applied to join a cohort of The Collab Lab

I have heard about The Collab Lab for a while and wanted to join the program.
I am a self-taught web developer. So, I don't have any experience working with other developers to build a project.

When I started learning React, I thought I would apply to this program when I was ready.
But also around that time, a friend of mine who was doing a cohort encouraged me to apply.
So I submitted my application a couple of days before the application period was over. I didn't even think of getting accepted.
But my heart jumped with excitement when I received the e-mail that I got accepted into the [Fall cohort 2021](https://getbootstrap.com/docs/5.0/getting-started/introduction/)! 😍

## How the collaboration works

We are a team of 4 working together to create a smart shopping list app. We developed this app with React and Firebase as the database.

The collaboration program is based on [Agile methodology](https://stackify.com/agile-methodology/).
Every week, we have two issues to work on. And two developers are assigned to each issue.
The fundamental commitment of The Collab Lab is that we spend 5 hours a week, sync & async, to get the work done.
Before our sprint at the end of the week, we must push our task and create a pull request on GitHub. The other team and one of our mentors will do a final check and code review before it's merged into the `main` branch.
Then at the end of the week, we will do the sync meeting, demo our tasks, and walk through our code.

## What I learned

### Git and GitHub

It's not that I'm learning this for the first time. But I'm getting much more comfortable using git and [GitHub](https://github.com/).
We learned how to write a pull request and use the comment section for communication. We also learned (the hard way) that we better avoid any command using `--force` 😆.

### React

Yes. As I mentioned before, I started to pick up [React](https://beta.reactjs.org/) not long before I got accepted. So with this opportunity, I learn much more about React from collaborating with my teammates and our mentors.

### Firebase

My team's task for the first week was setting up [Firebase](https://firebase.google.com/). Then we had to connect the Firebase with React to add and get data from the database.

I had never worked with Firebase before. I had to learn Firebase from scratch in such a short time. Adding to the note, Firebase v9 launched that week. So there were only a few resources about it. Although it was stressful to figure things out, it was also fun. I collaborated across teams to work on this.

### Bootstrap

We have to style our app as our last task. We agreed to use a CSS framework instead of vanilla CSS to keep a simple styling. Our choice goes to [React-Bootstrap](https://react-bootstrap.github.io/) with [Bootstrap v5.0](https://getbootstrap.com/docs/5.0/getting-started/introduction/). We chose it because the documentation is clearer and it has many resources.

I have never used Bootstrap before. It was the first time I learned and used it in a project. But it wasn't too painful to pick it up on the go.

### Accessibility

We have to make our app as accessible as we can. 
As I want to dive more into accessibility, this is an excellent opportunity for me to learn more about it by doing.
I used [WAVE](https://wave.webaim.org/), [Lighthouse](https://developers.google.com/web/tools/lighthouse/), [Axe DevTools](https://www.deque.com/axe/devtools/), and [NVDA](https://www.nvaccess.org/download/) to audit the accessibility. And I learned so much about it!

### Pair program

As a self-taught, this is one of the things that I cannot get. I have one experience with [mob programming](https://en.wikipedia.org/wiki/Mob_programming). And I know it's not for me. I get lost and anxious with mob programming 😅. 
But [pair programming](https://en.wikipedia.org/wiki/Pair_programming) is different.

During the program, I did some pair programming with my teammates.
I'm still uncomfortable and need to practice it more, but I like it better than mob programming. I learned so much from pair programming. I learned how to listen, ask questions, discuss approaches, and many more. 

### Delegate tasks

Every week, we work in a team of 2 to finish an issue. In the beginning, we tended to work on an issue ourselves, had a meetup, and chose which one we would push to the repo. But along the way, we learned to work together, break and delegate tasks.

I was responsible for the logic of dynamic background colors and aria labels one time. My teammate was responsible for the logic part of sorting the items. Then we decided who would demo the app and walk through the codebase on the sprint.
Another time, for the final task of styling, each of us was responsible for styling one component. We coordinated and decided on the design, color, and font type that we would use before working on our tasks.

### (Remote) Communication

We live in different countries and continents. That's why communication plays a vital role in our collaboration.

I learned that communication is not only about how we deliver our thoughts through words. It's not only about the way we talk to someone.
Communication is also about listening, being respectful, and having empathy.

Respect people's time. Tell them when we have to cancel an appointment and not leave them waiting. Take time to listen. Have some empathy. Not everyone can let out what's in their mind as fast or as straightforward as they want to. That sounds simple, but sometimes we fail to do so.

### Sync communication

Once in a while, we sync communication through Zoom or Google Meeting. We did pair programming or walk-through of our code and unblocked some problems.

My team is based in the European/African timezone. The good thing is that we don't have such substantial time differences. But we all have our activities outside this collaboration program. So when we need to do a sync meeting, we would set up a meetup time and be there at the agreed time.

### Async communication

Async communication happens mostly on Slack and sometimes on GitHub. When we have problems or questions, we will communicate them via Slack. And whoever could help can do so in the thread.
Sometimes over-communicating and making sounds on Slack is better than being quiet.

### Ask questions

As a self-taught, I'm used to not asking questions as soon as I get stuck. I try to work on things alone for so long before asking questions (or giving up 🙈).

But when we're collaborating, we better ask questions as soon as we get stuck and not wait for days.
There is a big possibility that one task depends on the other task. If we wait to ask questions, we could delay the progress of the whole team.

I learned that I would ask for help after one or two hours when I get stuck. I include in my question what I want to achieve, the code blocks, approaches I have tried, and the errors I get.

### Support system

In teamwork, the support system is one of the essential things besides communication. And I know in a heartbeat that this is where I want to be if I ever land a job one day. A community-based company that treats its employees as people first. A company that gives its employees support as they need it.

I had some rough times during the program. And I reached out to the founder, Andrew, and my mentors. They sat together to listen to me, acknowledged my feeling, gave their advice, and cheered me up.
My mentors, even the founder of The Collab Lab, gave their time to sit with me had made me feel appreciated. That is, channeling what is troubling me is important to them, that they listened to me, that I'm one of them. And that became my strength to move on and push through. Because I know I have the whole village to support me in this journey.

## What I need and want to improve

- I need to get back to learning React (and Firebase). 
- I want to improve my knowledge of accessibility.

    (This is one of my happy places 😄).
- I want to practice pair programming more whenever I have the chance.
- I need to learn to do code reviews. 
- I need to practice more to walk through code.

    (I often get panic attacks even before I start. Then I most likely would ramble and jump back and forth 😆.)

## Final words

I learned a lot through The Collab Lab. It was one great experience!
How we learned and achieved so much within eight weeks.
The road wasn't always smooth, but we learned together 😊.
And I couldn't be more proud to say that I'm one of Collabies alumni! 💖

*To my TCL-35 teammates ([Fatima](https://twitter.com/fatima_ola1), Dana & Edema) and mentors (David, [Chiamaka](https://twitter.com/techgirlamaka), [Golfo](https://twitter.com/faysvas) & [Alex](https://twitter.com/alexlsaltt)), thank you for the beautiful times! We did it, Guys!* 🎉

*To [Andrew](https://twitter.com/segdeha) and [Stacie](https://twitter.com/the_real_stacie), thank you so much for your positive vibes and support! 💙*

---

Thank you for reading!
Last, you can find me on [Twitter](https://twitter.com/@AdiatiAyu). Let's connect! 😊