Random Profiles Pagination and Accordion Project

An awesome Random Profiles Pagination and Accordion Project Explore the docs »

View Demo · Report Bug · Request Feature

📎 Table of Contents 📎

1. About The Project
2. Overview
3. Quick Setup
4. Directory structure
5. Built With

---

ℹ️ About The Project

(back to top)

---

👀 Overview

📦 Used random users api for random profiles data
🎯 Used React environment, components, use state, use effect, context api hook, sass
🖥 Used javascript for pagination and accordion

(back to top)

🛫 Quick Setup

# clone the project
git clone https://github.com/ibrsec/accordion-react.git

# enter the project directory
cd accordion-react

# install dependency
npm install || yarn install

# develop
npm run dev || yarn start

(back to top)

📂 Directory structure

accordion-react  (folder)
  |          
  |---public (folder)
+ |---src (folder) 
  |     |---img (folder) 
  |     |     |    
  |     |---scss (folder) 
  |     |     |---_reset.scss  
  |     |     └---_variable.scss   
  |     |  
  |     |---components (folder)
  |     |     |---contex (folder)
  |     |     |     └---Users.jsx
  |     |     |    
  |     |     |---header (folder)
  |     |     |     |---Header.jsx
  |     |     |     └---Header.scss 
  |     |     |    
  |     |     └---main (folder)
  |     |           |---pagination (folder)
  |     |           |     |---PaginationCount.jsx
  |     |           |     └---PaginationCount.scss
  |     |           |
  |     |           |---cardContainer (folder)
  |     |           |     |---CardContainer.jsx
  |     |           |     └---CardContainer.scss
  |     |           |
  |     |           |---card (folder)
  |     |           |     |---CardEach.jsx
  |     |           |     └---CardEach.scss
  |     |           |
  |     |           └---pagination (folder)
  |     |                 |---PaginationCount.jsx
  |     |                 └---PaginationCount.scss
  |     |           
  |     |
  |     |---App.js
  |     |---App.scss
  |     |---Index.js
  |     └---Index.scss
  |     
  |----index.html    
  |----package.json
  |----yarn.lock
  └----readme.md 

(back to top)

---

🏗️ Built With

(back to top)