https://github.com/pktcodes/grocery-bud-react-project-v2

Grocery Bud using React
https://github.com/pktcodes/grocery-bud-react-project-v2

css ecmascript grocery-list html javascript john-smilga nanoid react react-hooks react-toastify usestate vite

Last synced: about 1 month ago
JSON representation

Grocery Bud using React

• Host: GitHub
• URL: https://github.com/pktcodes/grocery-bud-react-project-v2
• Owner: pktcodes
• Created: 2023-08-09T21:32:45.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-08-10T05:19:39.000Z (over 1 year ago)
• Last Synced: 2024-11-08T23:58:17.923Z (3 months ago)
• Topics: css, ecmascript, grocery-list, html, javascript, john-smilga, nanoid, react, react-hooks, react-toastify, usestate, vite
• Language: CSS
• Homepage: https://react-grocery-bud-v2-prod.netlify.app/
• Size: 25.4 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Grocery Bud 🛍️

> PROD [Live] : https://react-grocery-bud-v2-prod.netlify.app/

#### Grocery Bud consists of a straightforward user interface where there is a

- **Input** box which takes the names of a grocery item and adds it to the list along with the page title *Grocery Bud*.

- Functionality is 

  - By default when the application loads, the input will be empty.

  - Once an item name is provided in the input and click **`Submit`**, the item gets added to the list with an toast **Item Added To The List**.

  - Every single item added to the list has **`Checkbox`** and **`Delete`** buttons along with the name.

  - If the user wants to edit an item to complete, the `Checkbox` button can be clicked which gives a strikethrough indicating that item is completed.

  - If the user wants to delete an item, the `Delete` button can be clicked which deletes the item from the list with an alert **Item Deleted**.

  - **Local storage** has been implemented to persist the data when the user revisits the application and the sorting order of the other items don't get affected when an item is edited or deleted.

- Styles are handled by `index.css` and toast messages are implemented using `React Toastify`

- To run the project locally, clone the repo, `npm install` to install the dependencies, and `npm run dev` to start up the development server on default port 5173.

- 

#### Languages

HTML, CSS, JavaScript, ECMAScript, React - Hooks ~ useState

#### Packages

[Nano ID](https://www.npmjs.com/package/nanoid)

[React Toastify](https://www.npmjs.com/package/react-toastify)

#### Deployment / Hosting

Netlify

---

_Note: I have developed this project ~ [11] as part of React 18 Tutorial and Projects Course (2023) taught by John Smilga._