Skip to content

Commit e713e6c

Browse files
authored
Merge pull request #72 from the-collab-lab/ar-readme-issue-29
Ar readme issue 29
2 parents 7e30991 + 38900be commit e713e6c

File tree

8 files changed

+37
-49
lines changed

8 files changed

+37
-49
lines changed

README.md

Lines changed: 37 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,60 @@
11
## Overview
22

3-
This README file explains The Collab Lab’s smart shopping list project and provides instructions for developing it locally.
3+
This README file explains SnapShop: a smart shopping list application by Emma Ma, Sarah Mekonnen, Marcos Perez, and Allison Randel through The Collab Lab.
44

5-
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).
5+
The Collab Lab is an online collaboration for developers to exercise coding, technical project management, and peer programming skills.
66

77
## What is this project?
88

9-
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.
9+
The goal of this project is to collaborate with Collab Lab teammates to create a “smart” shopping list app that learns user buying habits and helps remember what users will likely need to buy on their next trip to the store.
1010

11-
### How does it work?
11+
## Tech Stack
1212

13-
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.
14-
15-
### Check out an example
16-
17-
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).
18-
19-
📺  Check out a video demo of the example app here:
20-
[![](https://cdn.zappy.app/33815167c45d74c3ae5af232de633add.png)](https://www.youtube.com/watch?v=mwj74mE9s64&t)
13+
**Programming languages:** JavaScript, HTML, CSS <br>
14+
**Front End:** React, TailwindCSS, Daisy UI, Material UI <br>
15+
**Back End:** Firebase, Node.js <br>
16+
**Project management:** GitHub, Google Workplace, Miro, Slack <br>
2117

2218
<hr>
2319

24-
## Set up the project
25-
26-
### Install Node and NPM
27-
28-
`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.
29-
30-
💡 **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!
20+
**Welcome** ![welcome](src/images/welcome.png)
3121

32-
### Clone the project locally
22+
**Home** ![home](src/images/home.png)
3323

34-
On GitHub, navigate to the repo for your cohort’s project (you’re probably there right now), then:
24+
**User's Lists** ![list](src/images/list.png)
3525

36-
1. Click on the "Code" tab. It may already be selected.
37-
2. Click the green "Code" button to reveal a "Clone" popup.
38-
3. The "HTTPS" tab should be automatically selected. If not, click "HTTPS."
39-
4. Click the copy button to copy the url of this repository to your clipboard.
40-
![screenshot of "Code" tab on GitHub](_resources/images/00_get_repo_url_from_gui.png)
26+
**Adding an Item** ![example-add-item](src/images/example-add-item.png)
4127

42-
From your terminal, `cd` into the directory where you want this project to live.
43-
![screenshot of how to navigate folders in terminal](_resources/images/01_cd_dev_directory.jpg)
28+
**Added Item** ![example-added-item](src/images/example-added-item.png)
4429

45-
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.
46-
![screenshot of how to git clone](_resources/images/02_git_clone_and_cd.jpg)
30+
**Share a List** ![share-list](src/images/share-list.png)
4731

48-
### Install the project’s dependencies
49-
50-
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`
51-
52-
![screenshot of npm ci in the terminal](_resources/images/03_install_dependencies.jpg)
53-
54-
### Access the project in your browser
55-
56-
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`.
57-
![screenshot of the react project](_resources/images/04_local_dev_landing_page.jpg)
32+
<hr>
5833

59-
🎉 You did it! You’re ready to start contributing!
34+
## How to use
35+
36+
1. Sign in using a Google email address <br>
37+
2. Create a list using voice to text or by typing <br>
38+
3. Select that list, and start adding items <br>
39+
4. You can add items by clicking “Add Item” and using voice to text or by typing <br>
40+
5. Select the frequency you expect to buy that item again: Your options are `Soon`, `Kind of Soon`, and `Not Soon` <br>
41+
6. Click Submit <br>
42+
7. Go back to your list to see your items <br>
43+
8. You can go back to the Home page and share your list with a friend by inputting their email address <br>
44+
9. When a user shares a list with you, you can click into it and check off items <br>
45+
10. You can also unfollow that list without deleting the list permanently <br>
46+
11. Your items will move categories as your shopping habits develop and time goes on <br>
47+
12. When you’re done with a list, you can remove it from your collection <br>
6048

61-
## Review basic git commands you'll use in this project
49+
<hr>
6250

63-
- [Git Presentation](https://youtu.be/zeC5iwsHllk) ([slides](https://docs.google.com/presentation/d/1onRsF-5NQbky8BOac5cGsJunjBisvauQPEC4hOWPaGI/edit#slide=id.p))
51+
### Future Plans
6452

65-
## Make your first contribution
53+
- Update alert formatting: make them consistent <br>
54+
- Ability to rename lists <br>
55+
- Add items to your list using scan to text <br>
56+
- Ability to add images to your list <br>
6657

67-
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.
58+
### Credits
6859

69-
1. Get this project set up locally by following [the setup instructions](#set-up-the-project).
70-
2. Add your name to the [CONTRIBUTORS.md](CONTRIBUTORS.md) file.
71-
- 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!
72-
- 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.)
60+
Thank you to our mentors Nathan Brown, Devin Jaggernauth, and Mindy Zwanziger for your constant support throughout our project -- your leadership and wisdom is greatly appreciated!

src/images/add-item.png

137 KB
Loading

src/images/example-add-item.png

156 KB
Loading

src/images/example-added-item.png

182 KB
Loading

src/images/home.png

181 KB
Loading

src/images/list.png

176 KB
Loading

src/images/share-list.png

60.9 KB
Loading

src/images/welcome.png

71.5 KB
Loading

0 commit comments

Comments
 (0)