An open API service indexing awesome lists of open source software.

https://github.com/aadhar41/grocery-bud

A sleek and responsive React application designed to help you manage your grocery list efficiently. With built-in local storage persistence, your items remain saved even after a page refresh.
https://github.com/aadhar41/grocery-bud

bootstrap5 git github nodejs npm react-icons reactbootstrap reactjs

Last synced: 3 months ago
JSON representation

A sleek and responsive React application designed to help you manage your grocery list efficiently. With built-in local storage persistence, your items remain saved even after a page refresh.

Awesome Lists containing this project

README

          

# 🛒 Grocery Bud

A sleek and responsive React application designed to help you manage your grocery list efficiently. With built-in local storage persistence, your items remain saved even after a page refresh.

---

## 📸 Screenshots

| Item Added | Edit Item | Remove Item |
| :---: | :---: | :---: |
| ![Grocery Bud](public/screens/item-added.png) | ![Edit Item](public/screens/item-updated.png) | ![Remove Item](public/screens/item-removed.png) |

| Empty Input | Empty List |
| :---: | :---: |
| ![Empty Input](public/screens/empty-home-page.png) | ![Empty List](public/screens/empty-list.png) |

---

## ✨ Features

- **Add Items**: Quickly append new items to your grocery list.
- **Edit Items**: Update existing items with a single click.
- **Remove Items**: Delete specific items or clear the entire list at once.
- **Visual Alerts**: Real-time feedback via toast-style alerts for every action (add, edit, remove, or empty input).
- **Persistence**: Leverages the **Local Storage API** to ensure your data survives browser restarts.
- **Responsive Design**: Built with React Bootstrap for a seamless experience across devices.

---

## 🚀 Getting Started

Follow these steps to get the project up and running on your local machine.

### Prerequisites

- Node.js (v14 or higher recommended)
- npm or yarn

### Installation

1. **Clone the repository:**
```bash
git clone https://github.com/your-username/grocery-bud.git
cd grocery-bud
```

2. **Install dependencies:**
```bash
npm install
```

### Available Scripts

In the project directory, you can run:

#### `npm start`
Runs the app in development mode.
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload automatically when you make edits.

#### `npm run build`
Builds the app for production to the `build` folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

---

## 🛠️ Technologies Used

- **Frontend**: [React.js](https://reactjs.org/)
- **Styling**: [Bootstrap](https://getbootstrap.com/) & [React Bootstrap](https://react-bootstrap.github.io/)
- **Icons**: [React Icons](https://react-icons.github.io/react-icons/)
- **Storage**: Browser Local Storage API

---

## 📝 License

This project is open source and available under the [MIT License](LICENSE).