Skip to content

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

Repository files navigation

Meat Cheese Bread (MCB) Netlify Status

Meat Cheese Bread is a React/Firestore web application that tcl-16 collaborated on as part of The Collab Lab's Winter 2021 cohort. Over an 8-week period we created a “smart” shopping list app that learns your buying habits and helps you remember what you will likely to need to buy on your next trip to the store.

Multi device mockup of Meat Cheese Bread

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.

Want to see more?

Interact with the live site and/or watch the video demo! You can join an existing list with: actor racy artie

Getting Started

Download Node and NPM

Clone project locally

  • On GitHub, click the green "Clone or download" button and copy the web URL. screenshot of how to copy the web URL for a GitHub repo
  • From your terminal, cd into the directory where you want this project to live. screenshot of how to navigate folders in terminal
  • Once you’re in the directory, type git clone followed by the web URL you just copied to your clipboard from GitHub. screenshot of how to git clone
  • Then navigate into the project by typing cd followed by the project directory’s name. screenshot of how to cd into the project directory

Update dependencies

  • Once you have the project locally and you are in the project directory, you’ll want to update all the project’s dependencies. To do so, type the following into your terminal: npm update screenshot of npm update in the terminal
  • Maybe take a sip of coffee or check in on Twitter, this could take a minute -- don’t worry.

Access the project in your browser

  • After you’ve cloned the project locally and updated the dependencies, run the project by typing the following into your terminal: npm start. You should be able to see the project at localhost:3000

Features

User

  • Join an existing list (log in)
  • Create a new list (sign up)
  • Switch lists (sign out)
  • See their token to share and re-access their list
  • Remain logged in if they never logged out

List

  • If there are no items on the list, prompts the user to add an item
  • Add items with the name and how soon they plan on buying them
  • Add items only if they are not present on the list (including different punctuation)
  • See all of the items on their list
  • Items are color-coded and sorted by the estimated number of days until next purchase, with the soonest at top and latest at the bottom except for if its “inactive”. Items with the same number of estimated days until next purchase are sorted alphabetically.
  • When updating the item as "purchased", updates last purchase date and marks as "purchased" for 24 hours
  • Learns overtime when the user should anticipate when to buy items on their list based on how many times the user bought it and the intervals between purchase dates
  • Delete items from the list

Tech Stack

Tools

Contributors


Kevin Davis

Waverley Leung

Jessica Salbert

Maeesha Rahman

Acknowledgements

We would like to thank:

  • Eddie Solar
  • Melina Mejía Bedoya
  • Skyler Shaw
  • Andrew Hedges
  • Stacie Taylor
  • TCL Winter 2021 Cohort
  • everyone at The Collab Lab

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published