https://github.com/jack-carling/shared-shopping
Categorized list in React with the possibility to save to database using MongoDB | e.g. todo list or shopping list
https://github.com/jack-carling/shared-shopping
mongodb react typescript
Last synced: 3 months ago
JSON representation
Categorized list in React with the possibility to save to database using MongoDB | e.g. todo list or shopping list
- Host: GitHub
- URL: https://github.com/jack-carling/shared-shopping
- Owner: jack-carling
- Created: 2021-07-15T08:19:34.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-06T15:19:19.000Z (over 3 years ago)
- Last Synced: 2025-01-23T17:15:39.225Z (5 months ago)
- Topics: mongodb, react, typescript
- Language: TypeScript
- Homepage:
- Size: 4.42 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Shared Shopping
## About
Shared shopping is my first React project where the user can create a list, categorize it if the user wishes to do so and also share it with someone to collaborate on the same list.
## Functionality
- Add items to list, if a a category is selected they will be automatically sorted and if not they will put as uncategorized.
- Categories will record the amount of times clicked to be able to sort by most used.
- Items in categories will automatically be color coded.
- Responsive for both desktop and mobile.
- If the list contains at least one item an edit button will toggle tools to allow for removing and editing of items already in the list.
- Default name of the list can be changed.
- Prompt in green next to input will indicate user that item was successfully added if list is large enough to otherwise go unnoticed.
- Everything is saved to local storage.
- Users can enable sharing and optionally password protect their lists to collaborate with someone.
## Screenshot
## Installation
```bash
npm install
```
For the backend you will need a [MongoDB Atlas](https://www.mongodb.com/cloud/atlas) account. Create a `.env` file in the root directory and insert `MONGO_DB=` followed by your connection string.
```bash
# Terminal 1 (frontend)
npm run dev
```
```bash
# Terminal 2 (backend)
npm run database
```
## Categories
- Baby
- Beer, Wine & Spirits
- Beverages
- Bread & Bakery
- Breakfast & Cereal
- Canned Goods & Soups
- Condiments/Spices & Bake
- Cookies, Snacks & Candy
- Dairy, Eggs & Cheese
- Deli & Signature Cafe
- Flowers
- Frozen Foods
- Fruits & Vegetables
- Grains, Pasta & Sides
- International Cuisine
- Meat & Seafood
- Miscellaneous
- Paper Products
- Cleaning Supplies
- Health & Beauty
- Personal Care
- Pet Care
- Pharmacy
- Tobacco