DEV Community: The Collab Lab

Collab Lab #66 Recap

Danielle Heberling — Sun, 07 Apr 2024 18:07:48 +0000

Overview

The Collab Lab is a non-profit organization that runs a program where early career developers can apply to work together on a team to complete a project led by mentors who work in the field.

The Team

Participants

Aloe Nelson
Emilio Campos
Hannah Wohl-Machado
Stefanie Caffarel

Mentors

Danielle Heberling
Jeremiah Fallin
Nick Zanetti

The Project

We were tasked to build a "smart" shopping list over the course of 10 weeks. During this time there was lots of pair programming, async communication over slack, code review, demos, and retrospectives.

Features

Login and customized views based off of whom logged in
Create a new list
Add an item to the list and set the urgency level (soon, kind of soon, not so soon)
Delete an item from the list
Mark an item as purchased
Search a list for an item
Share a list with another user

Tech Stack

JavaScript
React
Flowbite
Tailwind
Firebase - Auth, Database, and Hosting
Vite

The Finished Project

Login Page

Landing Page - select a list to view/edit

A Specific List Page

The source code for the app can be found on our GitHub repo.

You can view this app live at https://tcl-66-smart-shopping-list.web.app/.

Closing

We had a great 10 weeks learning from each other and are looking forward to continuing to build fun projects.

If you're looking to hire early career developers, I would highly encourage you to take a look at these folks' LinkedIn profiles.

The making of SmartBasket

KarenJParker77 — Sun, 18 Jun 2023 11:47:00 +0000

I tend to listen to podcasts while I’m in the car 🚗

It passes the time, right?

One morning I was listening to a woman being interviewed. She mentioned having been a mentor on a scheme for early career developers called The Collab Lab (TCL). Run as a non-profit, she explained, TCL invites applications from people across the world who have learnt some HTML, CSS, Javascript and React, either by completing a bootcamp or as a self-taught dev.

TCL teaches the skills that a bootcamp may not teach, but that are just as important; how we as developers collaborate within our teams – communication skills, pair programming, using GitHub, writing and reviewing pull requests and explaining our code to others.

Right there, I was sold on participating in TCL, and eagerly awaited the opportunity to apply.

So, how does it work?

TCL runs a number of cohorts at certain points throughout the year, with each cohort being made up of four early-career developers. Cohorts are predominantly based in North America but TCL sometimes runs cohorts in European and African time zones too, and we were one of those, with devs in the UK and Nigeria, and a brilliant support team based in Greece, Germany and the Netherlands.

Our cohort was

Const devs = [Cassandra, Mike, Sandra, Karen]
Const mentors = [Peter, Eva, Aristos, Ayu]

and our mentors were
Peter, Aristos, Eva and Ayu.

Kicking off

The Collab Lab begins with all of the cohorts getting together for a kick-off meeting with the driving forces behind TCL, Andrew and Stacie, running us all through the expectations and processes.

For us, that was at 4pm on a Saturday afternoon – a very respectable hour of the day on our continents, but much less so, we learned for some of our fellow TCL members over the pond! ☕

At this first meeting, it’s immediately striking how passionate, energetic, and supportive everyone is, in spite of the early hour for some. Everyone is just delighted to be there and the enthusiasm is infectious.

It’s also clear at this point – and as we go through the eight weeks – that TCL’s resources are seriously high quality. From the onboarding info, to the starter code, to the presentations and other material that goes alongside TCL, it’s meticulous, well thought out and pitched at just the right level to be both supportive and challenging.

Over the eight weeks of TCL, the aim is to work together to develop a smart shopping app in React. We take turns to pair programme with a different team mate each week, and work together on one pre-determined issue that has been set for us. The issues began gently (thanks TCL!) but quickly we were tackling coding that challenged us. The beauty of it being if one of us didn't know how to approach an issue, more often than not, the other person in the pair had an inkling of where to start, or at least what to google 😅 And of course our mentors were there as a friendly safety net.

A weekly timetable

Each week we joined an hour-long sync meeting with the rest of our team and our mentors. The sync followed the same format each week. Firstly, the pairs demonstrated what they’d worked on. It’s so beneficial to practice talking about code and the decisions you’d made in a safe (ie, not a job interview!) space, and to hear others doing the same.

Some weeks there were learning modules, and some weeks we had a retrospective session to review how we had collaborated, what we’d done well, and how we could improve. Just like a real team of developers 😉

Finally, the tasks for the next week were allocated, and then it was over to us to achieve the task for the week. Time management was key; we needed to deliver the functionality but also allow time for both people in the other pair to review our work and provide comments, for us to do the same for their work, and then to get our mentors’ sign off.

Introducing SmartBasket

So, as mentioned, each TCL cohort works together to create a smart shopping app, using React for the front end and Firestore behind the scenes. It’s worth mentioning that the final two weeks of TCL are a little more freestyle in terms of what’s to be achieved. By that point, the app should pretty much be functioning and the final stage is agreeing and implementing a look for it. We chose to use Tailwind CSS for our styling.

You can check out our Github repo here
Our completed, deployed project here
and finally here is our final sync, including the presentation of the app.

A word on our mentors

We all agreed that our mentors Aristos, Eva and Peter were great. They kept us on track, and in amongst their own jobs as senior devs, illness, exams and well, life, they were always there to guide us. Their positivity, technical knowledge and attention to detail really was second to none and inspired us all.

Each cohort also has a designated code of conduct rep. Ayu was ours and it was her responsibility to ensure we all felt safe and sound as we took part, and that everyone had a positive experience. Ayu checked in with us during the eight weeks and was friendly and super encouraging.

Thank you to you all 💚

All in all...

... a really excellent experience, highly recommended to anyone wanting to break in to the tech industry!

The Collab Lab turns 4 soon! And with time comes change.

Stacie Taylor — Tue, 13 Jun 2023 03:22:42 +0000

As of August, it will have been 4 years since we kicked off the first-ever project at The Collab Lab. We just wrapped up our 61st team! As of today, we’ve helped over 230 early-career developers—from incredibly diverse backgrounds—learn how professional software teams collaborate, teaching practical skills including pair programming, giving/receiving code reviews, and how to demo work to stakeholders, all of the stuff that’s all but impossible to simulate when you’re studying on your own.

What’s changing

For the last 3 years or so, we’ve been following a cadence of one cohort per quarter where we run between 4 and 7 teams of 4 developers each. That worked well as long as we were content to execute the current program. What it didn’t allow us much time for was program and curriculum development.

Not for nothing, that model was a big improvement over the early days when we’d kick off the next team when the current one was halfway through. 🤪🫠

The existing structure served us well, as long as we didn’t want to make too many improvements to the program…

“We’ve been wanting to make some meaningful changes to the structure of the program to better serve our community and given that we’re volunteer run, we need the extra time between cohorts to make these changes.” —Me to the Collab Lab board members in Q2 2023 😅

Our program as it’s currently structured is 8 weeks long. About a year ago, we added an optional 2-week career development program to the end of each project term. That gave us just 2 weeks before the next round of applications would open up and we’d be back on the hamster wheel of providing direct service to the next group.

So, with the enthusiastic consent of our Board of Advisors (Chiamaka Umeh, David Baker, EJ Mason, Yolanda Haynes, Mindy Zwanziger, & Shelley McHardy), we have decided to move from offering 4 cohorts per year to 2.

Sometimes, less truly is more.

By giving ourselves some breathing space between cohorts, we expect to create the capacity to make substantive changes to the program that will allow us to scale horizontally in a way that’s tough to pull off today. We fully expect that by the end of next year we will be able to serve even more early-career developers than we do today and at a higher level of quality.

What’s staying the same

What will never change as long as The Collab Lab exists is our commitment to helping early-career developers from diverse backgrounds make the jump into tech. In the current jobs environment, this is as tall a task as it’s ever been and we are more committed than ever to doing everything we can to ease that transition for as many people as possible.

Collab Lab #54 Recap

Matthew Foley — Fri, 24 Mar 2023 18:04:32 +0000

OVERVIEW:

The Collab Lab is a non profit organization that helps early career developers and, in particular, people in under-represented groups in tech, gain experience they need to break into tech. To achieve that, over the course of 8 weeks a team of 4 junior developers work collaboratively on a software project, under the guidance of volunteer mentors. The goal is for them to gain hands-on experience by working in a professional setting with code reviews, pair programming sessions, weekly meetings and retro sessions.

The project is a “smart” shopping list that learns your behavior over time and prioritizes the things that you are going to need and reminds you to buy them. The developers had to work both on the functionality of the application and the appearance of it. Check out the deployed app
here and the repository here!

Key Technologies and Tools:

HTML/CSS/JavaScript
UI Library: React
Hosting & Database: Firebase
UI Styling: Bootstrap

The Team

Collabies

Mentors

Day in Life of a Collabie

The team of developers (called Collabies) met with the team of Mentors each Saturday for eight weeks, for a one hour "Weekly Sync" call on Zoom. The first order of business during the call was for the Collabies to demonstrate the previous week's work with technical details, and then switching gears to either a Retrospective or a "Learning Module". In Retrospectives, both Collabies and Mentors took time to both celebrate and reflect on their prior two weeks experiences, being sure to document next steps. Learning Modules included talks delivered by Mentors on topics like Pair Programming, Source Control (Git), Communication for Developers, and Accessibility. Lastly during these calls, the Mentors would present the following week's work, managed as issues in GitHub. The Collabies would select their GitHub issues for the week, and get started!

Between Weekly Syncs, the Collabies self-organized for pair programming sessions and technical research, and sometimes divided up work for async tasks. Collabies made a good habit of starting Draft PRs early in their process, so that the Mentors and Peers could easily collaborate with them if they got stuck, or contribute suggestions along the way. Around the middle of the week, each pair of Collabies performed code review on the other pair's PR, and following that, the Mentors made their own code reviews. Once all was approved, the Collabies would SHIP IT, ready to present in the Weekly Sync!

In the 7th and 8th weeks, the routine changed - rather than the Mentors managing the process, the Collabies took over. At this point, the functional requirements were substantially completed, and the Collabies focused on the appearance of the application. They were given a goal of the app having a professional appearance, and they managed the entire process for the final two weeks, driving the project to completion! They created their own acceptance criteria, delegated their own work, did pair programming when necessary, and leaned on each other and the Mentors when they got stuck. They practiced some Product Management skills by managing feature priorities, and they also gained some experience of working in a team with velocity, keeping tabs on each other's work and avoiding merge conflicts.

A Few Words from the Collabies

From Ashelle Cancio

My experience with The Collab Lab was fantastic. The mentors were always helpful and genuinely cared about our success. They shared their own experiences as developers, which was inspiring, and I learned a lot when pair-programming with the other participants. Through the program, I got the hang of the Agile workflow and became familiar with using a Kanban board to manage our weekly issues. While I knew basic Git commands, we encountered some merge conflicts, which was actually helpful because this forced me to learn new commands. I also realized the importance of code reviews. Overall, I am more confident in my coding abilities and feel prepared to review other developers' code in future projects. I am grateful for the experience and the knowledge gained from the mentors and fellow collabies!

From Randall Bustamante

Working with the mentors and collabies on our shopping list app was the most rewarding experience I've had with coding thus far. Bootcamp was stressful and overwhelming. Despite it being in person, I didn't quite get the support I needed. The Collab Lab set this mentorship up perfectly! The mentors guided us perfectly. They didn't solve our problems, but they empowered us to find resources and succeed thanks to our own efforts. I learned A TON of knowledge that solidified skills I felt shaky on. I met amazing humans who gave their time to help others. I will forever be grateful for this experience. Thank you, DJ Taylor, Volha Hancharova and Matthew Foley. To my fellow collabies, huge thanks to Alexandria D'Antonio, Ashelle Cancio, and Sarah Jenkins for your collaboration and leadership! And a final shout out to Alex Morton for watching over us to make sure all was good and healthy.

From Alexandria D'Antonio

Being a part of this cohort was a transformative experience. Imposter syndrome was a huge hurdle I faced starting my journey as a software engineer. However, being a part of The Collab Lab was the clicking piece for me that confirmed I belong on this path. The experiences I've gained prior as a bootcamp graduate have all been short-term projects. Working with this amazing team for the last eight weeks showed me the collaborative dynamic of being in this kind of role. I loved it. I learned and applied new technical communication skills in writing pull requests, code reviews, and giving and receiving feedback. While having a lot of fun working with Sarah, Randall, and Ashelle, I also learned a lot from the different perspectives of my fellow Collabies. Instrumental to our success was the consistent support and guidance of our mentors Volha, Matt, and DJ. Each week, we were using new technical and documenting methods thanks to the mentors' thoughtful comments and recommendations. As a Collabie, I was able to build confidence in myself week by week during this program and will forever be thankful for this opportunity!

Conclusion

To wrap things up, everyone enjoyed the experience and there were all sorts of valuable learnings. The developers worked diligently to deliver a high quality application. Any organization would be lucky to have any of these developers on their team!

If you are an early-career developer, the application for the next cohort is ongoing and this is a huge opportunity. Apply!!!

The Collab Lab TCL-50 recap

Amaka — Sat, 24 Dec 2022 18:17:07 +0000

OVERVIEW:

The project is a “smart” shopping list that learns your behaviour over time and prioritizes the things that you are going to need and reminds you to buy them. The developers had to work both on the functionality of the application and the appearance of it.

Key technologies and tools: JS, React, HTML, CSS, Git, Github, Tailwind, Firebase

THE TEAM:

THE DEVELOPERS:

Adegunloye Iyimide
Klesta Luli
Racheal David
Victor Owiti

THE MENTORS:
Chiamaka Umeh
Reda Baha
Aristos Manolarakis

WHAT WE DID FOR THE PERIOD OF THE COHORT:

Over the period of eight weeks, every Sunday, the team met for a period of one hour to demo the week's features, do retrospectives, go over learning modules (like pair programming learning module, git learning module and accessibility learning module) and also assign tasks for the upcoming week. The developers(collabies) were paired in two to work on issues together each week. The pairs would meet during the week to pair program remotely and come up with solutions to their features after which they would make a PR on GitHub. At the end of the week, the pairs reviewed each other PRs, followed by final reviews by mentors and the features are merged into the main branch. The mentors occasionally checked in and held office hours to help the collabies unblock. At the end of the eight weeks, we had a fully functional smart shopping list that learns as you go! You can view the app here. Here's the final demo meeting, definitely worth a watch to see what this talented group of devs came up with.

Some of our developers were just starting out with React while others had built a project or two before collab lab. They were all super enthusiastic, collaborative and communicative. They helped each other unblock and were eager to learn. We the mentors definitely saw a lot of improvement over time, especially in the use of git, making PRs, merge conflict resolution and communication. This is what the developers had to say 👇👇.

WHAT THE DEVELOPERS HAD TO SAY:

Klesta: Being a self-taught developer, I applied for The Collab Lab because I wanted to learn how to work on a software development team. I learned how to work in an Agile environment by working consistently in weekly sprints. It was especially a great learning opportunity working with mentors who also brought their experience from their jobs in development.
We also got to do pair programming with other team members and mentors and at the end of every sprint, we had to demo the code and the application in production. These experiences were incredibly beneficial for me. I got to learn how to talk through my code, answer questions and demo the app as a developer putting myself in the shoes of a user. I felt much more comfortable going through live coding technical interviews because I was already familiar with talking through my code. I learned so much from team members and the mentors.

Iyimide: My experience at Collab lab was amazing. I gained robust experience in code review, agile methodology, pair programming and collaboration.
The mentorship was superb; I was part of a team where the mentors were always willing to support and help resolve any issues that surfaced. My teammates were outstanding; I learnt something new during every pair programming session.
The career-lab extension of the Collab lab is the icing on the cake. After all the experience garnered during the program, we were further prepped for job search, negotiation, LinkedIn profile optimization, and interviews. I'm glad I was a part of the program.

Michelle: My Collab Lab experience was really awesome. The mentors were always ready to help and jump on a call whenever we get stuck or needed help.
I got to learn how to collaborate with a team remotely. It was my first time working on a team project. Also, I learnt how to use the git commands, Create pull Request, Code reviews, Pair programming, and working on issues etc. The office hours and weekly sync meetings were great too. It gave me greater understanding of some topics that were presented, team communication, and presentation skills. Now, I'm confident that I'll do well working remotely

CONCLUSION:

To wrap things up, everyone enjoyed and learned a lot during this period. The developers put in a lot of effort, dedication and commitment to this project would be huge assets to your team!!! If you are hiring a junior developer, you can reach out to any of these hardworking and job-ready developers 😊.

If you are an early-career developer, the application for the next cohort is ongoing and this is a huge opportunity. Apply!!!

The Collab Lab TCL-49 Recap

🧩【ℂ𝕣𝕚𝕤𝕥𝕚𝕟𝕒】💡 — Thu, 15 Dec 2022 15:00:22 +0000

About the Collab Lab

The Collab Lab is an 8-week coding program for early career developers who want to work on real-world projects with guidance from experienced mentors filled with lots of pair programming, office hours, retrospectives, and code reviews. At the end of every cohort, there is an optional 2-week career lab session for all Collabies to prepare for interviews.

This article recaps the Collab Lab 2022 Q4 cohort for group tcl-49.

Contributors:

Cristina Padilla
Teri Eyenike
Debbie Otuagomah
Victoria Emoka

Mentors:

Golfo Vasiliou
Peter Mbanugo
Patrick Niyogitare

Project goal & work process

During 8 weeks, we worked on building a smart shopping list that learns about the user’s buying habits and helps them remember what to buy next. To create our “Shoppr” app, we used the following technologies: ReactJS, JavaScript, Firebase, Tailwind CSS, and Git. We didn’t only learn and improve our technical skills but also soft skills like communication, (remote) teamwork, and COLLABoration. Additionally, for project management and tracking our work, we used GitHub projects.

Every week we were paired with another collabie to work on an issue, and the pair-programming experience began. Different time zones can sometimes make teamwork a bit tricky, but we organized our schedules and synced to work together on the assigned issue. That way, we could look at the code from different perspectives and learn from our colleagues' problem-solving approaches. Luckily, we also had a weekly session with one of our mentors for potential questions/doubts.

By the end of the week, we didn’t only have our task solved and described on a PR but also had the chance to review our colleagues' code, which was very useful in getting an understanding of how to implement a different feature. The last step was meeting all together (collabies and mentors) to demo our tasks, discuss challenges and successes, suggest improvements during a retrospective, and learn something new with the great learning modules our mentors presented. For example, we learned how to make our app accessible.

Test our app here!

Our Collab Lab experience

My experience at the Collab Lab was highly positive. Before joining, my expectation was to get first contact with how to work on a real project with other developers. Still, I couldn’t have imagined how many other things I would learn on the way: not only technical aspects but also communication, organization, team collaboration, and of course, getting to know amazing people. I am so grateful for this opportunity!
Cristina

Going through The Collab Lab has been an incredible journey. From showing you how to do thorough code reviews to collaborating with brilliant developers and helping you pick up solid best practices, the program has it all. Aside from the technical nitty-gritty, I also learned how to communicate with members of a remote team in a helpful way that keeps everyone in sync and signals varying degrees of capacity. I learned how to work with design constraints and incorporate great feedback into a technical project. My teammates all taught me something new every week. Our mentors were exceptional in how they guided us and were generous with their knowledge. If you’re an early-career developer looking for real-world experience in a mistake-friendly environment, TCL is your best bet!
Debbie

The opportunity to work with fellow developers on a real-world project is gratifying, especially the code reviews and pair programming session with your teammates makes it one of the best ways to see how things work in a modern workplace. The Collab Lab experience will make you more proficient as you get to improve your communication as well as your technical skills. The best recommendation for any early career developer is to join TCL and become a true Collabie
Teri

Written with ❤️ by Teri Eyenike, Debbie Otuagomah & Cristina Padilla

What is The Collab Lab?

Nick Taylor — Wed, 26 Oct 2022 01:17:00 +0000

Curious about what The Collab Lab is?

Here's the TL;DR

The Collab Lab increases access to web development jobs for early-career developers and, in particular, people in under-represented groups in tech by providing experiential skills training in software team collaboration and career management.

I sat down with Stacie Taylor to dive deeper into all things Collab Lab.

// Detect dark theme var iframe = document.getElementById('tweet-1584893066971959297-433'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1584893066971959297&theme=dark" }

transcription from the podcast short:

The collab lab really gives you that kinda experience so that you can talk about, you know, when an interviewer is like, Tell us about a time you had to give somebody feedback.

You're like, Yeah, I was working on a team of developers, and here's a very realistic time when that happens. So it's kind of like giving your first job in a very safe, comfortable space so that you can take those insights into the job search and really impress people.

– Stacie Taylor, Engineering Team Lead at Zapier, Co-founder & mentor at The Collab Lab

We also discussed her origin story and we even talked about career advice. Thanks for the great conversation Stacie!

Here's the full podcast episode. Now go listen to it on that walk or run. 😎

The Collab Lab with Stacie Taylor

Nick Taylor is joined by Stacie Taylor, Engineering Team Lead at Zapier and Co-founder at The Collab Lab. Nick and Stacie discuss The Collab Lab, career advice, Stacie's origin story, and all kinds of fun tangents as well.Note: This interview was ...

nickscuts.buzzsprout.com

Photo by John Schnobrich on Unsplash

The Collab Lab TCL-44 Recap

Amaka — Fri, 01 Jul 2022 16:55:29 +0000

The Collab Lab is about collaborating to build an application by early-career developers with the guidance of experienced mentors. They get to do code reviews, pair programming, and retrospectives. This article is a recap of the collab lab 2022 Q2 cohort for group tcl-44.

The developers:

The Mentors:

Elit Cenk Alp

Golfo Vasiliou

Chiamaka Umeh

A Recap

Over the course of 8 weeks, four very energetic and enthusiastic early-career developers collaborated remotely to build an application called the smart shopping list. The smart shopping list learns a user's shopping habits and predicts when items are due to be bought next. At the beginning of every week, the developers were divided into 2 groups and assigned a task that they will implement during the week. After the implementation, they would make a pull request with a description of what the feature was about and screenshots where necessary. The pairs reviewed each other's pull requests and provided feedback. After that the mentors also reviewed and approved the pull requests before they were eventually merged into the main branch. During the weekend the whole team would have a sync meeting to go through the features implemented the past week and then tasks for the following week.
We also went through some learning modules on Accessibility, git and pair programming during the sync calls.

I and the other mentors watched the developers collaborate effectively on this project with so much enthusiasm and empathy. They all already had some form of experience building frontend applications prior to joining The collab lab. They all got to learn to use a new technology they were not familiar with before - firebase firestore. They also learned remote collaboration and most importantly communication.
We used slack as the primary communication platform and GitHub projects for project management.
As we progressed, the quality of code reviews, pull requests, and communication skills improved.
They were very eager to learn, they helped each other unblock, they went to research where it was necessary and delivered on the tasks they got each week.

This is what some of the developers had to say about the experience.

Before joining TCL the main thing I was missing was working with a team and organizing my work within it.
TCL helped me build confidence in dealing with git and GitHub, now I write well-structured pull requests and give feedback confidently through code review.
The other thing I've Improved during TCL is my communication skills, I learned how good communication through slack can lead to great visibility and everybody knows where the project is heading! - Reda

Before starting the Collab Lab, I just had a couple of solo projects. By the end of the cohort, not only my coding and teamwork skills improved immensely, but I also landed my first job as a Frontend Developer. I learnt a lot of about React, Git, Github, how working in a remote team works and how to appropriately talk about coding. All of this in a friendly and safe environment with awesome talented devs, which gave me the confidence to succeed at job interviews. All in all , participating in the Collab Lab is one the best decisions I ever made! - Jimena

The project demo

You can check out our last sync meeting where the developers presented the final finished application here and the project on Github here

Early career developers looking to be a part of The Collab Lab can visit our website for more information.

The Collab Lab TCL-39 Recap

Alejandro M. Coca — Thu, 31 Mar 2022 02:28:33 +0000

The Collab Lab (TCL) is a non-profit organization that provides an 8-week program to help early-career engineers gain experience working collaboratively on a software team by working remotely on real-world projects with other early-career. It's supported by volunteer mentors.

Goal the project

The goal was to work together to build a “smart” shopping list that learns your shopping habits over time, putting items you are most likely to need to buy in the near future at the top.

Tech stack & tools: React, React Hooks, React Router, Firebase, Git, GitHub, and Firebase Hosting.

The amazing, talented team

Dara Inampuez always took care and special attention a small details related project design, colors, and layout.
Elizabeth Rivera put a huge dedication, effort into building our project, and has great design, and communication skills.
Natalia Sacías was always willing to learn new things, grow as a professional, and help her teammates.
Jairo Espinel worked in a great way in our project helping, supporting his teammates anytime.

🌟 The TCL-39 team is an example of collaborative work, commitment, huge effort, dedication, and attention valuable topics like accessibility, code quality, and team best practices.

Features

Their project has the following features:

Create shopping lists
Join one existing shopping list
App navigation bar
Add new products to our shopping list
Display a view with all products in the list
Filter products by product name
Delete a product from the shopping list

1. Create shopping lists

On the home page, you can create a new, empty shopping list. You only need to click on the "Create a new list" button, and you will be redirected to the "Add product" view, and the app created and saved a token in localStorage and Firebase - Cloud Firestore.

2. Join a existing shopping list

If you have created a shopping list previously, you can access your list and add new items to it. On the home page, you will see a small form where you can write your token (it must have been created previously).

3. App navigation bar

The team created a navigation bar with two links ("List" and "Add product") and an "Exit" button. It's useful when you need to move between views, and remove the token value from localstorage.

4. Add new products to our shopping list

When you have a token, you can use it to join your shopping list. Also, you can use the "product" form to add a new item to your list. You should write a "product name" and choose some option for "How soon will you buy this again?" ("soon", "kind of soon", or "not soon"), and click on the "Submit" button.

5. Display all the shopping list

When you visit the "List" page, users can take a look at the items that they want to buy and/or the items they bought already. Also, every product has a color "marker". This color depends if you need to buy this product "soon", "kind of soon", or "not soon".

If a user wants to buy some product, you need to mark it as "checked".

In case your shopping list is empty, the app displays a message "Your shopping list is currently empty" and a link that redirects to the "add" view.

6. Filter products by product name

If you are looking for a specific product, you can use the product filter. The team built a filter form where you might write a product name and the app will return all products with some coincidence by product name.

7. Delete a product from the shopping list

When you don't want to buy some product again, you can click on the "Delete" button (on a "trash" icon). But before the product is removed from Firestore, you should see a confirmation window where the app will ask "Do you want to delete this product?". If you click on the "OK" button, this product will be removed. Otherwise, it doesn't remove from the shopping list.

TCL-39 workflow

The team followed the next steps:

Design wireframes
Figma prototypes.
Teamwork, pair programming
Sync/Async communication
Project management (GitHub projects)
Create feature branches, pull requests (PR), code reviews for the PRs
Accessibility (a11y)
Mobile First
Demos

If you want to know more about their project, this incredible team, or the built process, you can reach out to their TCL-39 mentors:

🎉🎉 The TCL-39 team has done an amazing job, worked with huge dedication, effort, and commitment. They built an incredible product 🏆.

We are sure that you won’t regret having them on your team or company!😄💯.

The Collab Lab TCL-34 Recap

Alejandro M. Coca — Fri, 24 Dec 2021 17:58:02 +0000

The Collab Lab (TCL) is a non-profit organization that provides an 8-week program for early-career developers supported by volunteer mentors. It’s a great space to practice collaboration, communication skills as it was a real work environment.

Goal the project

The goal of this project is to collaborate with your Collab Lab team to create a “smart” shopping list app that learns your buying habits and helps you remember what you’re likely to need to buy on your next trip to the store.

Tech stack: React & React Hooks, Firebase, Git, GitHub, and Firebase Hosting

The amazing, talented team

Isabella Soares: adaptability to new, different environments and good communication skills.
Mailliw Mogollon: a great initiative to help teammates, and always looking for new knowledge.
Susana Ruiz: curiosity about best practices, and working in a team.
Yancarlo Urdaneta: happy to face new challenges.

💯 This team is an example of teamwork, dedication, hard work, and a huge commitment to your goals 🌟.

Features

Something super important to mention is that the project experience is fully responsive (desktop & mobile version). They took care of every detail! 💚

1. Add/join a shopping list

They added a way to create new shopping lists that can be used to add products to buy. Also, they worked on a section where a user might write down a token shared (for instance it should already be registered in the database and add new products to the user list).

2. The Shopping list view

This is a page where users can take a look at the items that they want to buy and/or the items they bought already. This section includes filtering items by name and "checking" the items you have bought, so the algorithm can make estimations based on your previous purchases.

3. Add a product to the shopping list

The team created an accessible form (a11y) to let you add products to your shopping list, and allows you to pick when you are planning to buy the product (soon, kind of soon, or not soon) so the algorithm can estimate recommendations for your future purchases!.

4. Delete a product from the shopping list

To make your life easier, the team created a feature to delete products from the shopping list so you don’t need to have information that you don’t need anymore. They focused on accessibility to have a more inclusive experience.

You want to see their incredible work✨. Visit their 🚀 GitHub repository

TCL-34 workflow

One of the most important parts to mention is how they built this amazing app and what they needed to work together as a team. They were a supportive and collaborative team 🎉.

Teamwork, pair programming
Sync/Async communication
Project management
Create Pull Requests, code reviewing
Design wireframes, and user interfaces.

If you want to know more about them or the process, you can reach out to their TCL-34 mentors:

✨ The TCL-34 team has done an amazing job by creating this product in such a short amount of time and adding all the care, detail, dedication, support, and incredible teamwork that can be seen as the result of their work. 🎉🎉

They did an amazing job during these weeks and you won’t regret having them on your team or company! 🏆😄

The Collab Lab TCL-29

Kevin Falting — Thu, 30 Sep 2021 14:53:52 +0000

Over eight weeks, four highly motivated junior developers made the commitment to work together, participate in sprints with all the ceremony, and build a working smart to-do list. The results of the experience have been more than any of us thought!

🎉 TCL 29 Smart Shopping List 🎉

Github Repo

The junior developers are these wonderful people:

The mentors:

Every Sunday, we met for an hour to demo the week's work, go over a topic like code review or a11y standards, conduct a retro, and plan the work for the upcoming week. Each developer would be paired for the week and then be released to work on their assigned issue. Each team navigated their own schedules across timezones to find the time to pair program.

The result was something quite cool, a smart shopping list that learns as you go! Here's the final demo call, definitely worth a watch to see what this talented group of devs came up with.

Many of them were new to React and especially to working on a project with a team, and I've gotta say, that I'm very impressed with how quickly they slipped into a solid routine. If I hadn't known better, I would've thought them a bunch of remote working veterans! The patience and kindness each member lended to each other was a remarkable thing to see, and aside from the impressive coding chops this group showed, their positive and can-do attitude is something that sets them far above peers.

I mean, don't take my word for it, check out how well Pull Request descriptions were written, complete with testing steps and all. The conversations on the PRs during code review were golden. To be honest, I learned more about React from their code and questions than any other videos or blogs.

These four are certainly a capable group of developers and would be an asset to any team they join. 🙌

I'm only one of the mentors for this team, and the others had some even more gracious things to say. 😁

Luka:

TCL-29 was very engaged and hardworking group. Here are a couple of points I want to emphasize:

I think the team were supportive and considerate of each other. Throughout the program they demonstrated an amazing amount of teamwork by helping each other understand different programming concepts, as well as teaching one another something new. Their support especially was demonstrated when the program’s level of difficulty was increased and when implementing new user stories needed more engagement. During this time everyone was ready to go extra miles to explain potential ways to solve the issues. In addition, what I’ve seen in their PRs are: Well thought out comments and questions; praising each other’s work when credit was due and questioning aspects when things were unclear. All done in a tactful and empathetic way.

Another point I want to emphasize is their communication/demo skills. With the practice and confidence it was truly fantastic to see how well they articulated their code and thought process. Given the fact that English is not their Native Language for most of the participants, their communication skills were just superb. It was more enjoyable to see that their demo skills improved in an exponential rate.

Final point I want to mention is that the team was very independent. Even though mentors always encouraged to ask as many questions as possible, the developers always tried get to the answers themselves. I thought this was an expression of high professionalism - to stay resilient and flexible to ask for help when it was totally necessary.

Chiamaka:

The teammates took off really fast, they bonded easily and started contributing to the project almost immediately. One really amazing quality they all had is the zeal to learn. They also had a willingness to research what they didn't know about.

They were very hard working and never hesitated to ask questions when they weren’t clear about anything. They showed resilience and great team spirit during the project. They were ready to help each other unblock and put each other through.

All in all, it was a great experience for everyone, and if you're wanting to hire some junior devs, I wouldn't look any further than these four, I mean how many junior devs have experience working on a collaborative project?

If you're a developer and wanting to give back to the dev community, volunteer with The Collab Lab. It's a wonderful experience and there are few other ways to have such a huge impact. 💪

Weekly Syncs

Week 0
Week 1
Week 2
Week 3
Week 4
Week 5 (Forgot to hit record 😅)
Week 6
Week 7
Week 8

The Collab Lab TCL-28: The Road to Lettuce Know

Luis Augusto — Tue, 14 Sep 2021 00:11:24 +0000

For 8 weeks, TCL 28 cohort members worked together with the guidance of their mentors to create Lettuce Know, a smart shopping list application with a friendly UI.

Who are the TCL 28 Collabies and Mentors?

The Developers a.k.a. Collabies:

The Mentors:

What did they do?

the-collab-lab / tcl-28-smart-shopping-list

Overview

What is this project?

The goal of this project is to collaborate with your Collab Lab team to create a “smart” shopping list app that learns your buying habits and helps you remember what you’re likely to need to buy on your next trip to the store.

How does it work?

As a user, you will enter items (e.g., “Greek yogurt” or “Paper towels”) into your list. Each time you buy the item, you mark it as purchased in the list. Over time, the app comes to understand the intervals at which you buy different items. If an item is likely to be due to be bought soon, it rises to the top of the shopping list.

Check out an example

The app will work in many of the same ways as iNeedToBuy.xyz (on which our project is based) with the exception that we will not be implementing barcode…

View on GitHub

Over the span of 8 weeks, TCL 28 collaborated together remotely to create Lettuce Know, a smart shopping list which learns the user’s shopping habits and predicts when items are due for the next purchase using React, Firebase & Material UI.

What did that collaboration look like, exactly? Well, each week the Collabies would pair off in twos so they could work together on an assigned issue or story. They would be responsible for working through that story, asking for help from their fellow Collabies or mentors if needed, creating a descriptive pull request on GitHub which outlines what changes were made, completing code reviews, and then finally, merging the pull requests to the main branch.

Here are a sample of the various tickets that the Collabies worked on together:

Generated a new, unique token for users, and stored it inside Firebase Firestore. Also, users can share their tokens with their friends and make changes to their shopping lists.
Implemented a feature to mark an item on the shopping list as purchased so the app can learn how often the user buys different items. When a purchase is recorded, the estimated number of days until the next purchase date is calculated and recorded in the database.
Created a feature for sorting shopping list items in order of how soon the user is likely to need to buy each of them again so that it’s clear what the user needs to buy soon.
Created items schema and stored the item information and connected to user tokens.
Created a feature for preventing the user from typing a duplicate item, duplicate items are not added to Firestore.
Added a feature to filter the user's shopping list to make it easier to locate an item in the list.
Used accessibility tests (a11y) to make sure the app is accessible to all users.

What did they learn?

Before participating in The Collab Lab, our Collabies all had experience with frontend and backend development with varying technologies, however, they all shared experience with HTML, CSS, JavaScript, and React. In addition to using those skills to build their app, they also used some new technologies — Cloud Firestore, a NoSQL document-oriented online database, Material-UI, and SweetAlert.

But aside from learning to use Cloud Firestore and query documents in the database, the most important skills that the Collabies learned were communication and remote collaboration. With everyone living in various time zones and having different responsibilities during the week, communication was essential to being successful as a team. The Collabies utilized Slack and GitHub to schedule pair-programming sessions and communicate what changes were being made to the codebase at any given time. When one pair had a question on the story they were working on, they communicated that to the group and received the feedback they needed to continue solving the problem.

It wasn’t only essential to communicate progress on the project, but also to communicate our successes. Every two weeks, the Collabies and mentors participated in a retrospective, where everyone had the opportunity to share their appreciation for each other, what they thought went well, and what they thought could be better. There was always a lot of love that was shared during those meetings.

Week after week, the quality of code reviews, pull requests, merges, and communication skills improved. Pair-programming helped them talk through their code and articulate their thought processes verbally. By the time the cohort was just about wrapped, the group was getting weekly requirements knocked out early and started opening their own issues and making tickets.

Collabie Experience Highlight

During our first day, I immediately felt welcomed by both Andrew and Stacie’s positive radiance. I soon was introduced to the rest of my fellow Collabies and mentors. Ever since I met them, everyone has been super respectful, helpful, and supportive from start to finish. Throughout our pair programming sessions, our office hours on the weekdays, and our code reviews on Saturday, I soon fell in love with the routine I had for 8 weeks. Working together felt adventurous, as we tackled different issues together and admired our accomplishments at the end of each session. From their working style to their coding knowledge, I learned so much from each one of my talented teammates. Even though there may be times we do run into a bug, the other pair and mentors were there for guidance. Our mentors were super responsive, patient, and insightful, I am still shocked how they were able to do all this while balancing a job. Looking back, I really do think this is one of the best teams I have ever been on, and I am so thankful for this experience. :) — Sandy Dai

Lettuce Know Project Demo

You can check out our project demo here!