Smart Shopping List

An accessible and mobile friendly smart shopping list that learns your buying habits and helps you remember what you’ll likely to need to buy on your next trip to the store.
Explore the docs »

· Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Optimizations
6. Lessons Learned
7. Contributing

About The Project

The goal of this project is 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. 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.

Built With

(back to top)

Getting Started

💡 Note: This project requires the latest Long Term Support (LTS) version of Node. If you have an earlier version of Node, now would be a great time to upgrade!

Prerequisites

npm is distributed with Node.js, which means that when you download Node.js, you automatically get npm installed on your computer. You can install Node by downloading it from the Node.js website or using a Node version manager like nvm on a macOS or Linux device or nvm-windows on a Windows device.

Installation

1. Click the green "Code" button to reveal a "Clone" popup.
2. The "HTTPS" tab should be automatically selected. If not, click "HTTPS."
3. From your terminal, cd into the directory where you want this project to live.
4. Once you’re in the directory, type git clone followed by the web URL you just copied to your clipboard from GitHub. Then cd into the directory that is created.

Install the project’s dependencies

Once you’ve cloned the project locally and you’re in the project directory, you’ll want to install the project’s dependencies. To do so, type the following into your terminal: npm ci

(back to top)

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.

Usage

• Create a new list or join an existing list.
  • You can find the name of your list in Chippy's dialog box. Share your list with anyone!
• Add items to your shopping list based on how frequent you typically purchase these items.
• See a label (Soon, Kinda Soon, Not Soon, Inactive) for each item.
  • Soon: 7 days or fewer until the next purchase
  • Kinda Soon: between 7 & 30 days until the next purchase
  • Not Soon: 30 days or more until the next purchase
  • Inactive: 60 days have passed since the last purchase
• Label is assigned based on the smart shopping algorithm prediction of when the item will need to be purchased again. This is calculcated based on three factors:
  • total purchases
  • date last purchased
  • date next purchase prediction
• Shop for your items and mark them as purchased by clicking the square input box.
• Filter through your list of items using the search bar.
• Delete items that are no longer in your rotation or have become inactive(over 60 days since last purchased).

(back to top)

Roadmap

• Added react-router-dom navlinks component #16
• Render names of list #17
• Generate list token for create new list button #18
• Add item to list #19
• Create join list feature
• Filter List view
• Create an update list items feature
• Welcome prompt
• Calculate next purchase feature for items
• Added check for duplicate item list
• Delete item feature
• Sort list by purchase urgency and alphabetical order
• Create input to allow users to name their list
• Add unit tests to important date calculating and converting functions
• onChange now clears submit message
• Update font style and color
• Make Chippy a component
• Comprehensive refactor of functions dealing with dates and tests refinement
• Fix: address conditional logic to render inactive items
• Color contract accessibility fix

See the open issues for a full list of proposed features (and known issues).

(back to top)

Optimizations

As the application grows with users it will need to scale. Future optimizations will implement user authentication to allow users to login to see available shopping lists. Update feature will be improved to be toggable or inherit similar UI behavior as delete function, which prompts the user before commiting to update the item(which triggers the smart shopping list algorithm and sets a new date prediction)

Lessons Learned

Challenges and lessons learned were documented throughout the creation of this application. Please see the pull requests for detailed documentation about the process, tools, and lessons learned throughout the course of development.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Questions? Contact the contributors

• Annemarie Luceroni - @alucernoni
• Ashley Valentine - @fakehouseplant
• Drake Nguyen - @draknguyen4000
• Yire Morlans - @yiremorlans

Special thanks to our mentors @Collab Lab

• Aditya Dalal
• Nicole Schnurr
• Michaela Rochon

(back to top)