Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/raiyanjiyon/react-water-bottles
https://github.com/raiyanjiyon/react-water-bottles
css localstorage react
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/raiyanjiyon/react-water-bottles
- Owner: RaiyanJiyon
- Created: 2024-10-21T05:19:28.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-10-25T12:36:07.000Z (3 months ago)
- Last Synced: 2024-10-25T20:48:51.245Z (3 months ago)
- Topics: css, localstorage, react
- Language: JavaScript
- Homepage: https://legendary-rabanadas-aa6b57.netlify.app/
- Size: 86.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Memorable Water Bottle Shop
This project is a simple e-commerce web app for showcasing and purchasing water bottles. The app is built using **React** and styled with **plain CSS**. Users can add water bottles to their cart by clicking the **Purchase** button, which dynamically updates the total cart count and stores the purchased items in **local storage**.
## Features
- **Dynamic Cart Updates**: When a user clicks the "Purchase" button, the selected bottle is automatically added to the cart. The total count of added items is updated at the top.
- **Local Storage**: All purchased items are saved in the browser's local storage, ensuring that the cart data persists across sessions.
- **Responsive Layout**: The app's grid layout displays all available water bottles with a purchase button for each one.
- **Dynamic Bottle Image Display**: The images of the purchased bottles are added dynamically to the cart and updated in real-time.
## Technologies Used
- **React**: For building the UI components and managing the state.
- **CSS**: For styling the components and ensuring a responsive design.
- **Local Storage**: To persist the user's cart data.
## How It Works
1. **Add to Cart**: When a user clicks on the "Purchase" button below any water bottle, the following occurs:
- The selected bottle's details (name, price, etc.) are saved in the local storage.
- The total number of items in the cart is updated and displayed at the top.
- The bottle's image is dynamically added to the cart section, giving a real-time visual of what the user has added.
2. **Cart Persistence**: Even if the user refreshes the page or closes the browser, the cart data will still be available thanks to local storage. When the app loads, it retrieves the stored data and updates the cart accordingly.
## Installation and Setup
1. Clone the repository:
```bash
git clone https://github.com/RaiyanJiyon/React-Water-Bottles.git
```
2. Navigate to the project directory:
```bash
cd memorable-water-bottle-shop
```
3. Install the dependencies:
```bash
npm install
```
4. Run the project:
```bash
npm start
```
5. Open your browser and go to `http://localhost:3000` to view the app.
## Future Improvements
- **Checkout Functionality**: Adding a checkout page where users can view their cart and proceed with the purchase.
- **Search and Filter**: Implementing search and filter options to make it easier for users to find specific bottles.
- **Price Calculations**: Dynamically calculating the total cost of all items in the cart.