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! 🏆😄

DEV Community: Alejandro M. Coca

The Collab Lab TCL-39 Recap

Goal the project

The amazing, talented team

Features

1. Create shopping lists

2. Join a existing shopping list

3. App navigation bar

4. Add new products to our shopping list

5. Display all the shopping list

6. Filter products by product name

7. Delete a product from the shopping list

TCL-39 workflow

The Collab Lab TCL-34 Recap

Goal the project

The amazing, talented team

Features

1. Add/join a shopping list

2. The Shopping list view

3. Add a product to the shopping list

4. Delete a product from the shopping list

TCL-34 workflow