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:
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.
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
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 (
"Add product") and an
"Exit" button. It's useful when you need to move between views, and remove the token value from
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?" (
"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
"kind of soon", or
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.
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
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!😄💯.
Top comments (3)
It was so rewarding being part of this team. Totally worth it!!!
Nice work TCL-39 team!