Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gitusergb/dl
The Product Directory Listing app is a web tool for managing and displaying products, built with React, Redux Toolkit, and styled-components, featuring add, edit, filter, paginate, and bulk action capabilities in a clean, responsive interface.
https://github.com/gitusergb/dl
api html javascript react-redux-toolkit styled-components
Last synced: about 1 month ago
JSON representation
The Product Directory Listing app is a web tool for managing and displaying products, built with React, Redux Toolkit, and styled-components, featuring add, edit, filter, paginate, and bulk action capabilities in a clean, responsive interface.
- Host: GitHub
- URL: https://github.com/gitusergb/dl
- Owner: gitusergb
- Created: 2024-08-04T05:57:45.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-08-09T14:54:08.000Z (3 months ago)
- Last Synced: 2024-09-30T10:23:58.392Z (about 2 months ago)
- Topics: api, html, javascript, react-redux-toolkit, styled-components
- Language: JavaScript
- Homepage: https://stalwart-bombolone-48e624.netlify.app/
- Size: 206 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Product Directory Listing
---
[DL Netlify Link](https://stalwart-bombolone-48e624.netlify.app/)
---
## Description
The Product Directory Listing app is a web tool for managing and displaying products, built with React, Redux Toolkit, and styled-components, featuring add, edit, filter, paginate, and bulk action capabilities in a clean, responsive interface.
## Features
- **Home Page**: Displays a list of products with options for quick edit and adding product details.
- **Add Product Modal**: Allows users to add new products by selecting product type, material, and grade.
- **Quick Edit**: Enables users to quickly edit product details directly in the list.
- **Filtering**: Users can filter the product list based on product type and material.
- **Search**: Users can search for products using a search bar.
- **Pagination**: Supports pagination to view products in chunks of 10 per page.
- **Bulk Actions**: Users can select multiple products and perform actions on them.
---
---
## Installation
1. Clone the repository:
```
git clone https://github.com/gitusergb/dl.git
```
2. Navigate to the project directory:
```
cd dl
```
3. Install dependencies:
```
npm install
```
## Usage
1. Start the development server:
```
npm start
```
2. Open your browser and navigate to `http://localhost:3000`.
## Technologies Used
- **React**: For building the user interface.
- **Redux Toolkit**: For state management.
- **Styled-Components**: For styling the application.
- **API**: Fetches product data from the provided API.(`https://bb-nwfw.onrender.com/hw`)
## Components
- **ProductList**: Displays the list of products with filtering, search, and pagination.
- **AddProductModal**: Modal for adding new products.
- **Filter**: Filters the product list based on selected criteria.
- **ProductRow**: Displays individual product details with quick edit options.
- **Pagination**: Handles pagination of the product list.
## Styles
Global styles and responsiveness are handled in `App.css` using media queries.
## Contribute
Contributions are welcome! Please open an issue or submit a pull request.
### created by
Gauri Bidwai
## Thank You !