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