https://github.com/mr-mudgal/product-list-react-app

A simple, interactive, and responsive Product Listing Application built with React.JS and deployed on GitHub Pages (gh-pages). This app showcases sorting, filtering, and pagination functionalities with a seamless user experience.
https://github.com/mr-mudgal/product-list-react-app

deploy-repo deployment github github-pages javascript javascript-library node-js nodejs nodemon react reactjs

Last synced: 2 months ago
JSON representation

A simple, interactive, and responsive Product Listing Application built with React.JS and deployed on GitHub Pages (gh-pages). This app showcases sorting, filtering, and pagination functionalities with a seamless user experience.

• Host: GitHub
• URL: https://github.com/mr-mudgal/product-list-react-app
• Owner: mr-mudgal
• Created: 2023-11-02T18:45:59.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2025-01-19T20:03:38.000Z (over 1 year ago)
• Last Synced: 2025-03-26T04:14:04.214Z (about 1 year ago)
• Topics: deploy-repo, deployment, github, github-pages, javascript, javascript-library, node-js, nodejs, nodemon, react, reactjs
• Language: CSS
• Homepage: https://mr-mudgal.github.io/Product-List-React-App/
• Size: 598 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Product Listing React App

**Live App: [Product Listing React App](https://mr-mudgal.github.io/Product-List-React-App/)**


Deployed on GitHub Pages (gh-pages).

This app is created using React.JS.\

\

This app list the demo products which are stored in a JSON file 'products.json', which is taken from [dummyjson.com](https://dummyjson.com).\

\

You can **sort the products** on the basis of pricing, from 'lower to higher' or 'higher to lower'. The sorting criteria can be modified, it's just demo/dummy so included just one criterion.\

\

It can also **filter the products** for you on the basis category. The filtering criteria can also be modified to add more filters.\

\

This React App contains total of 100 products which are divided into 10 pages (10 products per page). **Pagination** is done by _react-paginate_ module.\

\

It is a simple UI yet interactive & responsive and added few hover tweaks.\

\

**Have a Good Time testing\experiencing the app.**

The following is a screenshot of the application:

![Screenshot from 2023-11-02 19-42-05](https://github.com/mr-mudgal/Product-List-React-App/assets/100049039/96f7ce3e-5661-43d4-9772-c077c00ace89) 

## Running the Product List React App in your system.

To run the application follow the following steps:

1. Clone the repository in your system by executing command: `git clone https://github.com/mr-mudgal/Product-List-React-App.git`.

2. Then move to the new folder created by the clone command by executing the command: `cd Product-List-React-App`.

3. Make sure you have _Node.JS_, _npm_ & _react_ installed.

   - You can download the _Node.JS_ from: [Install Node.JS](https://nodejs.org/en)

   - You can install _npm_ from: [Install npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)

   - You can install _react_ from: [Install react](https://create-react-app.dev/docs/getting-started/)

4. After you have completed above requirements run this command in the cloned directory terminal: `npm install`. This would install the dependencies in a new directory _node_modules_

5. After that run the React App using the command `npm start`. This would start compiling the React App and will open the browser automatically to display the Product List React App.

   * If it does not open the browser automatically and show the React App, then open a browser and visit this link in your local machine: [http://localhost:3000](http://localhost:3000)

6. You can scroll down to see the pagination feature, or use sort and filter option from the drop down menu at the top of the page.

7. To deploy the application run ```npm run deploy```. The script for deployment is written in 'package.json', by

   default it is for GitHub pages (gh-pages) you can modify based on your needs.

The top of the page is fixed in position and give a blur background effect.

**That's It. Create an issue for any changes you would like to make.**

### Thank You

mr-mudgal