generated from the-collab-lab/smart-shopping-list
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a5f6c70
commit fe14e67
Showing
1 changed file
with
155 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,66 +1,185 @@ | ||
| # Overview | ||
| <a name="readme-top"></a> | ||
|
|
||
| <br /> | ||
| <div align="center"> | ||
| <a href="https://github.com/the-collab-lab/tcl-56-smart-shopping-list"> | ||
| </a> | ||
|
|
||
| <h3 align="center">Smart Shopping List</h3> | ||
|
|
||
| <p align="center"> | ||
| 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. | ||
| <br /> | ||
| <a href="https://github.com/the-collab-lab/tcl-56-smart-shopping-list"><strong>Explore the docs »</strong></a> | ||
| <br /> | ||
| <br /> | ||
| · | ||
| <a href="https://github.com/the-collab-lab/tcl-56-smart-shopping-list/issues">Report Bug</a> | ||
| · | ||
| <a href="https://github.com/the-collab-lab/tcl-56-smart-shopping-list/issues">Request Feature</a> | ||
| </p> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
| <!-- TABLE OF CONTENTS --> | ||
| <details> | ||
| <summary>Table of Contents</summary> | ||
| <ol> | ||
| <li> | ||
| <a href="#about-the-project">About The Project</a> | ||
| <ul> | ||
| <li><a href="#built-with">Built With</a></li> | ||
| </ul> | ||
| </li> <li> | ||
| <a href="#getting-started">Getting Started</a> | ||
| <ul> | ||
| <li><a href="#prerequisites">Prerequisites</a></li> | ||
| <li><a href="#installation">Installation</a></li> | ||
| </ul> | ||
| </li> | ||
| <li><a href="#usage">Usage</a></li> | ||
| <li><a href="#roadmap">Roadmap</a></li> | ||
| <li><a href="#optimizations">Optimizations</a></li> | ||
| <li><a href="#lessons-learned">Lessons Learned</a></li> | ||
| <li><a href="#contributing">Contributing</a></li> | ||
|
|
||
| </ol> | ||
| </details> | ||
|
|
||
|
|
||
|
|
||
| <!-- ABOUT THE PROJECT --> | ||
| ## About The Project | ||
| <div align="center"> | ||
| <img src="https://user-images.githubusercontent.com/102399239/241094621-ce38ef45-ce4b-4b12-98ff-657eb51057bb.png" alt="a shopping list application with vegetable food items on it" width="400px"/> | ||
| </div> | ||
|
|
||
| <br> | ||
| 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. | ||
|
|
||
| This README file explains The Collab Lab’s smart shopping list project and provides instructions for developing it locally. | ||
|
|
||
| If you’re a Collab Lab developer, WELCOME! We’re so excited to work with you and collaborate on something amazing. Be sure to read [the setup instructions](#set-up-the-project) and then [make your first contribution](#make-your-first-contribution)! For additional details on how your cohort will operate, please check out the [project brief](PROJECT-BRIEF.md). | ||
|
|
||
| ## What is this project? | ||
| ### Built With | ||
|
|
||
| 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. | ||
| <p align="right">(<a href="#readme-top">back to top</a>)</p> | ||
|
|
||
| ### Check out an example | ||
|
|
||
| The app will work in many of the same ways as [iNeedToBuy.xyz](https://app.ineedtobuy.xyz/) (on which our project is based) with the exception that we will not be implementing barcode scanning (that feature would add a lot of scope to the project and wasn’t all that useful). | ||
|
|
||
| :tv: Check out a video demo of the example app here: | ||
| [](https://www.youtube.com/watch?v=mwj74mE9s64) | ||
| <!-- GETTING STARTED --> | ||
| ## Getting Started | ||
|
|
||
| ## Set up the project | ||
| :bulb: **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! | ||
|
|
||
| ### Install Node and NPM | ||
| ### 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](https://nodejs.org/en/) or using a Node version manager like [nvm](https://github.com/nvm-sh/nvm) on a macOS or Linux device or [nvm-windows](https://github.com/coreybutler/nvm-windows) on a Windows device. | ||
|  | ||
|
|
||
| :bulb: **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! | ||
| `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](https://nodejs.org/en/) or using a Node version manager like [nvm](https://github.com/nvm-sh/nvm) on a macOS or Linux device or [nvm-windows](https://github.com/coreybutler/nvm-windows) on a Windows device. | ||
|
|
||
| ### Clone the project locally | ||
|
|
||
| On GitHub, navigate to the repo for your cohort’s project (you’re probably there right now), then: | ||
| ### Installation | ||
|
|
||
| 1. Click on the "Code" tab. It may already be selected. | ||
| 2. Click the green "Code" button to reveal a "Clone" popup. | ||
| 1. Click the green "Code" button to reveal a "Clone" popup. | ||
| 3. The "HTTPS" tab should be automatically selected. If not, click "HTTPS." | ||
| 4. Click the copy button to copy the url of this repository to your clipboard. | ||
|  | ||
|
|
||
| From your terminal, `cd` into the directory where you want this project to live. | ||
|  | ||
|
|
||
| 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. | ||
|  | ||
| 4. From your terminal, `cd` into the directory where you want this project to live. | ||
| 5. 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` | ||
|
|
||
|  | ||
|
|
||
| <p align="right">(<a href="#readme-top">back to top</a>)</p> | ||
|
|
||
| ### 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`. | ||
|  | ||
|
|
||
| :tada: You did it! You’re ready to start contributing! | ||
| <!-- USAGE EXAMPLES --> | ||
| ## Usage | ||
|
|
||
| - Create a new list or join an existing list | ||
| - Add items to your shopping list | ||
| - Shop for your items and update them purchased by clicking the square input box | ||
| - Delete items that are no longer in your rotation or have become inactive(over 60 days since last purchased) | ||
|
|
||
|
|
||
|
|
||
| <p align="right">(<a href="#readme-top">back to top</a>)</p> | ||
|
|
||
|
|
||
|
|
||
| <!-- ROADMAP --> | ||
| ## Roadmap | ||
|
|
||
| - [x] [Added react-router-dom navlinks component #16](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pull/16) | ||
| - [x] [Render names of list #17](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pull/17) | ||
| - [x] [Generate list token for create new list button #18](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pull/18) | ||
| - [x] [Add item to list #19](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pull/19) | ||
| - [x] [Create join list feature](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pull/20) | ||
| - [x] [Filter List view](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pull/21) | ||
| - [x] [Create an update list items feature](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pull/22) | ||
| - [x] [Welcome prompt](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pull/23) | ||
| - [x] [Calculate next purchase feature for items](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pull/24) | ||
| - [x] [Added check for duplicate item list](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pull/25) | ||
| - [x] [Delete item feature](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pull/26) | ||
| - [x] [Sort list by purchase urgency and alphabetical order](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pull/27) | ||
| - [x] [Create input to allow users to name their list](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pull/32) | ||
| - [x] [Add unit tests to important date calculating and converting functions](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pull/32) | ||
| - [x] [onChange now clears submit message](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pull/34) | ||
| - [x] [Update font style and color](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pull/36) | ||
| - [x] [Make Chippy a component](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pull/38) | ||
| - [x] [Comprehensive refactor of functions dealing with dates and tests refinement](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pull/40) | ||
| - [x] [Fix: address conditional logic to render inactive items](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pull/41) | ||
| - [x] [Color contract accessibility fix](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pull/43) | ||
|
|
||
|
|
||
| See the [open issues](https://github.com/the-collab-lab/tcl-56-smart-shopping-list/issues) for a full list of proposed features (and known issues). | ||
|
|
||
| <p align="right">(<a href="#readme-top">back to top</a>)</p> | ||
|
|
||
| ## 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 <a href="https://github.com/the-collab-lab/tcl-56-smart-shopping-list/pulls?q=is%3Apr+is%3Aclosed">pull requests</a> for detailed documentation about the process, tools, and lessons learned throughout the course of development. | ||
| <!-- CONTRIBUTING --> | ||
| ## 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 | ||
|
|
||
|
|
||
| <!-- CONTACT --> | ||
| ## Questions? Contact the contributors | ||
|
|
||
| - Annemarie Luceroni - [@alucernoni](https://github.com/alucernoni) | ||
| - Ashley Valentine - [@fakehouseplant](https://github.com/fakehouseplant) | ||
| - Drake Nguyen - [@draknguyen4000](https://github.com/drakenguyen4000) | ||
| - Yire Morlans - [@yiremorlans](https://github.com/yiremorlans) | ||
|
|
||
|
|
||
|
|
||
| <p align="right">(<a href="#readme-top">back to top</a>)</p> | ||
|
|
||
|
|
||
| ## Make your first contribution | ||
|
|
||
| You’ll want to make your first contribution to this repo before your kick-off call! This will help make sure you’re ready to go on day one. | ||
|
|
||
| 1. Get this project set up locally by following [the setup instructions](#set-up-the-project). | ||
| 2. Add your name to the [CONTRIBUTORS.md](CONTRIBUTORS.md) file. | ||
| - Do this from your local environment and not from GitHub in your browser. The purpose (aside from highlighting our amazing team) is to make sure your local environment is set up properly! | ||
| - Commit to the `main` branch and push it up to the remote repo. (Over the next 8 weeks, we will rely on feature branches as we collaborate on the project, but for this task committing to main will do just fine.) |