{"id":24837273,"url":"https://github.com/mr-mudgal/product-list-react-app","last_synced_at":"2026-04-12T05:35:44.600Z","repository":{"id":205160387,"uuid":"713550647","full_name":"mr-mudgal/Product-List-React-App","owner":"mr-mudgal","description":"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.","archived":false,"fork":false,"pushed_at":"2025-01-19T20:03:38.000Z","size":612,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T04:14:04.214Z","etag":null,"topics":["deploy-repo","deployment","github","github-pages","javascript","javascript-library","node-js","nodejs","nodemon","react","reactjs"],"latest_commit_sha":null,"homepage":"https://mr-mudgal.github.io/Product-List-React-App/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mr-mudgal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-02T18:45:59.000Z","updated_at":"2025-01-19T20:13:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"2fec4ec2-0bd9-4ce5-ac06-26757f41784b","html_url":"https://github.com/mr-mudgal/Product-List-React-App","commit_stats":null,"previous_names":["mr-mudgal/product-list-react-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mr-mudgal/Product-List-React-App","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-mudgal%2FProduct-List-React-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-mudgal%2FProduct-List-React-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-mudgal%2FProduct-List-React-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-mudgal%2FProduct-List-React-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mr-mudgal","download_url":"https://codeload.github.com/mr-mudgal/Product-List-React-App/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-mudgal%2FProduct-List-React-App/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31705574,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-12T05:11:36.334Z","status":"ssl_error","status_checked_at":"2026-04-12T05:11:27.332Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["deploy-repo","deployment","github","github-pages","javascript","javascript-library","node-js","nodejs","nodemon","react","reactjs"],"created_at":"2025-01-31T05:53:41.927Z","updated_at":"2026-04-12T05:35:44.568Z","avatar_url":"https://github.com/mr-mudgal.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Product Listing React App\n\n**Live App: [Product Listing React App](https://mr-mudgal.github.io/Product-List-React-App/)**\u003cbr\u003e\nDeployed on GitHub Pages (gh-pages).\n\nThis app is created using React.JS.\\\n\\\nThis app list the demo products which are stored in a JSON file 'products.json', which is taken from [dummyjson.com](https://dummyjson.com).\\\n\\\nYou 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.\\\n\\\nIt can also **filter the products** for you on the basis category. The filtering criteria can also be modified to add more filters.\\\n\\\nThis React App contains total of 100 products which are divided into 10 pages (10 products per page). **Pagination** is done by _react-paginate_ module.\\\n\\\nIt is a simple UI yet interactive \u0026 responsive and added few hover tweaks.\\\n\\\n**Have a Good Time testing\\experiencing the app.**\n\nThe following is a screenshot of the application:\n![Screenshot from 2023-11-02 19-42-05](https://github.com/mr-mudgal/Product-List-React-App/assets/100049039/96f7ce3e-5661-43d4-9772-c077c00ace89) \n\n## Running the Product List React App in your system.\nTo run the application follow the following steps:\n1. Clone the repository in your system by executing command: `git clone https://github.com/mr-mudgal/Product-List-React-App.git`.\n2. Then move to the new folder created by the clone command by executing the command: `cd Product-List-React-App`.\n3. Make sure you have _Node.JS_, _npm_ \u0026 _react_ installed.\n   - You can download the _Node.JS_ from: [Install Node.JS](https://nodejs.org/en)\n   - You can install _npm_ from: [Install npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n   - You can install _react_ from: [Install react](https://create-react-app.dev/docs/getting-started/)\n4. 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_\n5. 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.\n   * 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)\n6. 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.\n7. To deploy the application run ```npm run deploy```. The script for deployment is written in 'package.json', by\n   default it is for GitHub pages (gh-pages) you can modify based on your needs.\n\nThe top of the page is fixed in position and give a blur background effect.\n\n**That's It. Create an issue for any changes you would like to make.**\n\n### Thank You\n\u003cp align=\"center\" style=\"font-size: xx-large; font-family: 'Courier New', monospace\"\u003e\u003ca href=\"https://github.com/mr-mudgal\" style=\"color: green\"\u003emr-mudgal\u003c/a\u003e\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmr-mudgal%2Fproduct-list-react-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmr-mudgal%2Fproduct-list-react-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmr-mudgal%2Fproduct-list-react-app/lists"}