The Collab Lab TCL-39 Recap
Tags: collablab, earlycareerdevelopers, webdev, react
Published: 2022-03-31 02:28:33


![TCL-39 team](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjnwir54354cpqa4jxfh.png)

**[The Collab Lab (TCL)](https://the-collab-lab.codes/about-us/)** 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](https://www.linkedin.com/in/dara-inampuez-a97b29191/) always took care and special attention a small details related project design, colors, and layout.
- [Elizabeth Rivera](https://www.linkedin.com/in/elizabeth-rivera-ura-51427712b/) put a huge dedication, effort into building our project, and has great design, and communication skills.
- [Natalia Sacías](https://www.linkedin.com/in/natalia-sacias/) was always willing to learn new things, grow as a professional, and help her teammates.
- [Jairo Espinel](https://co.linkedin.com/in/jairo-espinel-angel-69718958) 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`](https://developer.mozilla.org/es/docs/Web/API/Window/localStorage) and [Firebase - Cloud Firestore](https://firebase.google.com/products/firestore).

![Create shopping lists](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/557ve0of972eiwqj5d9c.png)

### 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).

![Join a existing shopping list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/urup8nvcvcc5xnsh1ajr.png)

### 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`.

![App navigation bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwaefyhxeu9qsudrg1r5.png)

### 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.

![Add new products to our shopping list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3qprp9vcoavwg5n6e1f.png)

### 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"**.

![Display all the shopping list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2bwf651sv329hfz77p1.png)

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**.

![The shopping list is empty](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xomojsnzyy4agj7l5l1d.png)

### 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.

![Filter products by product name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jp41tbn8no2pw3ht1bjv.png)

### 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.

![Delete a product - Window confirmation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0a9j5gcswgo0cme94bkc.png)

## 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](https://github.com/the-collab-lab/tcl-39-smart-shopping-list)**, this incredible team, or the built process, you can reach out to their TCL-39 mentors:

- [Camila Parada Valderrama](https://www.linkedin.com/in/candrepa1/)
- [Fauricio Valencia](https://www.linkedin.com/in/fauricio-valencia/)
- [Alejandro Coca](https://www.linkedin.com/in/alejandromcocarojas/)

🎉🎉 _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!**😄💯.