https://github.com/ibrsec/product-list2-react

https://github.com/ibrsec/product-list2-react

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/ibrsec/product-list2-react
• Owner: ibrsec
• Created: 2024-04-02T13:07:55.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2024-04-02T13:59:44.000Z (about 2 years ago)
• Last Synced: 2025-02-26T07:44:19.627Z (over 1 year ago)
• Language: JavaScript
• Homepage: https://product-list2-react.vercel.app
• Size: 4.47 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


 

 






  

    

  


  
Product-List 2 React


  


    An awesome Product-List 2 React Project

    Explore the docs »

    


    


    View Demo

    ·

    Report Bug

    ·

    Request Feature

  



  📎 Table of Contents 📎 

  


    
About The Project

     

     
Overview

     
Quick Setup

     
Directory structure

     
Built With

    


    

  


---



## ℹ️ About The Project

[![product-list2-react](./src/img/project.gif)](https://product-list2-react.vercel.app/)

(back to top)


---



## 👀 Overview

📦 Used mock products data from data.jsx file 

🎯 Used React environment, components, use state, use effect hooks, uplifting state 

🖥 Select categories by clicking buttons 

🔩 Search products including categories       

(back to top)




## 🛫 Quick Setup

```sh

# clone the project

git clone https://github.com/ibrsec/product-list2-react.git

# enter the project directory

cd product-list2-react

# install dependency

npm install || yarn install

# develop

npm run dev || yarn start

```

(back to top)




## 📂 Directory structure 

```diff

product-list2-react  (folder)

  |          

  |---public (folder)

+ |---src (folder) 

  |     |---img (folder) 

  |     |          

  |     |         

  |     |---helper (folder)      

  |     |     └---data.jsx    

  |     |  

  |     |---components (folder) 

  |     |     |    

  |     |     |---header (folder) 

  |     |     |     |---Header.module.scss 

  |     |     |     └---Header.jsx 

  |     |     |    

  |     |     |---navbar (folder) 

  |     |     |     |---NavbarButtons.module.scss 

  |     |     |     └---NavbarButtons.jsx 

  |     |     |    

  |     |     |    

  |     |     |---navbar (folder)  

  |     |     |     └---Home.jsx 

  |     |     |    

  |     |     |---productCard (folder)  

  |     |     |     |---ProductCard.jsx 

  |     |     |     └---ProductCard.module.scss 

  |     |     |    

  |     |     |---productSection (folder)   

  |     |     |     └---ProductSection.jsx 

  |     |     |    

  |     |     └---searchBox (folder)   

  |     |           └---SearchBox.jsx 

  |     |          

  |     |           

  |     |          

  |     |

  |     |---App.js

  |     |---App.scss

  |     |---Index.js

  |     └---Index.scss

  |     

  |----index.html    

  |----package.json

  |----yarn.lock

  └----readme.md 

```

(back to top)


---



### 🏗️ Built With

 

 

  

  

  

  

 

  

 

(back to top)