├── public
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── robots.txt
    ├── manifest.json
    └── index.html
├── src
    ├── assets
    │   └── project-image.jpg
    ├── store
    │   ├── store.js
    │   └── users
    │   │   ├── UsersList.js
    │   │   └── usersSlice.js
    ├── index.js
    ├── App.js
    ├── index.css
    └── App.css
├── .gitignore
├── package.json
├── LICENSE
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ab-noori/react-redux-api/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ab-noori/react-redux-api/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ab-noori/react-redux-api/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/assets/project-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ab-noori/react-redux-api/HEAD/src/assets/project-image.jpg


--------------------------------------------------------------------------------
/src/store/store.js:
--------------------------------------------------------------------------------
 1 | import { configureStore } from "@reduxjs/toolkit";
 2 | import usersReducer from './users/usersSlice';
 3 | 
 4 | const store = configureStore({
 5 |     reducer: {
 6 |         users: usersReducer,
 7 |     }
 8 | })
 9 | 
10 | export default store;


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | 
 6 | const root = ReactDOM.createRoot(document.getElementById('root'));
 7 | root.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>
11 | );
12 | 
13 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Provider } from 'react-redux';
 3 | import UsersList from './store/users/UsersList';
 4 | import store from './store/store';
 5 | 
 6 | const App = () => {
 7 |   return (
 8 |     <Provider store={store}>
 9 |       <div className="App">
10 |         <UsersList />
11 |       </div>
12 |     </Provider>
13 |   );
14 | };
15 | 
16 | export default App;
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/store/users/UsersList.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react';
 2 | import { useSelector, useDispatch } from 'react-redux';
 3 | import { fetchUsers } from './usersSlice';
 4 | 
 5 | const UsersList = () => {
 6 |   const { users, isLoading, error } = useSelector((state) => state.users);
 7 |   const dispatch = useDispatch();
 8 | 
 9 |   useEffect(() => {
10 |     dispatch(fetchUsers());
11 |   }, [dispatch]);
12 | 
13 |   if (isLoading) {
14 |     return <div>Loading...</div>;
15 |   }
16 | 
17 |   if (error) {
18 |     return <div>Error: {error}</div>;
19 |   }
20 | 
21 |   return (
22 |     <ul>
23 |       {users.map((user) => (
24 |         <li key={user.login.uuid}>
25 |           {user.name.first} {user.name.last}
26 |         </li>
27 |       ))}
28 |     </ul>
29 |   );
30 | };
31 | 
32 | export default UsersList;
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-redux-api-1",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@reduxjs/toolkit": "^1.9.5",
 7 |     "@testing-library/jest-dom": "^5.16.5",
 8 |     "@testing-library/react": "^13.4.0",
 9 |     "@testing-library/user-event": "^13.5.0",
10 |     "axios": "^1.4.0",
11 |     "react": "^18.2.0",
12 |     "react-dom": "^18.2.0",
13 |     "react-redux": "^8.1.0",
14 |     "react-scripts": "5.0.1",
15 |     "web-vitals": "^2.1.4"
16 |   },
17 |   "scripts": {
18 |     "start": "react-scripts start",
19 |     "build": "react-scripts build",
20 |     "test": "react-scripts test",
21 |     "eject": "react-scripts eject"
22 |   },
23 |   "eslintConfig": {
24 |     "extends": [
25 |       "react-app",
26 |       "react-app/jest"
27 |     ]
28 |   },
29 |   "browserslist": {
30 |     "production": [
31 |       ">0.2%",
32 |       "not dead",
33 |       "not op_mini all"
34 |     ],
35 |     "development": [
36 |       "last 1 chrome version",
37 |       "last 1 firefox version",
38 |       "last 1 safari version"
39 |     ]
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Abdul Ali Noori
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/store/users/usersSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 2 | import axios from 'axios';
 3 | 
 4 | export const fetchUsers = createAsyncThunk('users/fetchUsers', async () => {
 5 |   try {
 6 |     const response = await axios.get('https://randomuser.me/api/?results=5');
 7 |     return response.data.results;
 8 |   } catch (error) {
 9 |     return error.response.data;
10 |   }
11 | });
12 | 
13 | const initialState = {
14 |   users: [],
15 |   isLoading: false,
16 |   error: undefined,
17 | };
18 | 
19 | const usersSlice = createSlice({
20 |   name: 'users',
21 |   initialState,
22 |   reducers: {},
23 |   extraReducers: (builder) => {
24 |     builder
25 |       .addCase(fetchUsers.pending, (state) => {
26 |         state.isLoading = true;
27 |         state.error = undefined;
28 |       })
29 |       .addCase(fetchUsers.fulfilled, (state, action) => {
30 |         state.isLoading = false;
31 |         state.users = action.payload;
32 |       })
33 |       .addCase(fetchUsers.rejected, (state, action) => {
34 |         state.isLoading = false;
35 |         state.error = action.error.message;
36 |       });
37 |   },
38 | });
39 | 
40 | export default usersSlice.reducer;
41 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <a name="readme-top"></a>
  2 | 
  3 | ![](https://img.shields.io/badge/Microverse-blueviolet)
  4 | 
  5 | <div align="center">
  6 | 
  7 | 
  8 | </div>
  9 | 
 10 | <!-- Open pull request using the following structure
 11 | 
 12 | ## Pronject Title: Branch title.............
 13 | 
 14 | ### 🌟Features:
 15 | 
 16 | > - [ ] - [`i`]() ...........
 17 | > - [ ] - [`ii`]() ...................
 18 | > - [ ] - [`iii`]() ...................
 19 | > - [ ] - [`iiii`]() ...................
 20 | > - [ ] - [`iiiii`]() ...................
 21 | 
 22 | ### [ 🚀 Project Demo](#)
 23 | 
 24 | -->
 25 | 
 26 | > # Template
 27 | 
 28 | | Desktop Veiw Representation|
 29 | |---------------------------------------|
 30 | |<div align="center"><img src="./src/assets/project-image.jpg" alt="screenshot" width="auto" height="auto"/></div>|
 31 | 
 32 | <!-- TABLE OF CONTENTS -->
 33 | 
 34 | # 📗 Table of Contents
 35 | 
 36 | - [📖 About the Project](#about-project)
 37 |   - [🛠 Built With](#built-with)
 38 |     - [Tech Stack](#tech-stack)
 39 |     - [Key Features](#key-features)
 40 |   - [🚀 Live Demo](#live-demo)
 41 | - [💻 Getting Started](#getting-started)
 42 |   - [Setup](#setup)
 43 |   - [Prerequisites](#prerequisites)
 44 |   - [Install](#install)
 45 |   - [Usage](#usage)
 46 |   - [Run tests](#run-tests)
 47 |   - [Deployment](#triangular_flag_on_post-deployment)
 48 | - [👥 Authors](#authors)
 49 | - [🔭 Future Features](#future-features)
 50 | - [🤝 Contributing](#contributing)
 51 | - [⭐️ Show your support](#support)
 52 | - [🙏 Acknowledgements](#acknowledgements)
 53 | - [❓ FAQ (OPTIONAL)](#faq)
 54 | - [📝 License](#license)
 55 | 
 56 | <!-- PROJECT DESCRIPTION -->
 57 | 
 58 | # 📖 [Template] <a name="about-project"></a>
 59 | 
 60 | > **[Temaplate]** is a project template with ready README file for creating react applications.  
 61 | 
 62 | ## 🛠 Built With <a name="built-with"></a>
 63 | 
 64 | ### Tech Stack <a name="tech-stack"></a>
 65 | - <summary>Client</summary>
 66 |     <ul>
 67 |       <li><a href="https://reactjs.org/">HTML</a></li>
 68 |       <li><a href="https://reactjs.org/">CSS</a></li>
 69 |       <li><a href="https://reactjs.org/">JavaScript</a></li>
 70 |       <li><a href="https://reactjs.org/">ReactJS</a></li>
 71 |       <li><a href="https://reactjs.org/">API</a></li>
 72 |     </ul>
 73 | 
 74 | ### Key Features <a name="key-features"></a>
 75 | 
 76 | - **[Responsive layout]**
 77 | - **[UX/UI accessibility]**
 78 | - **[Dynamic data]**
 79 | 
 80 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
 81 | 
 82 | <!-- LIVE DEMO -->
 83 | 
 84 | ## 🚀 Live Demo <a name="live-demo"></a>
 85 | 
 86 | > - [Live Demo on Gh-pages](https://ab-noori.github.io/math-magicians/)
 87 | > - [Live Demo on Render](https://math-magicians-ab.onrender.com)
 88 | 
 89 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
 90 | 
 91 | <!-- GETTING STARTED -->
 92 | 
 93 | ## 💻 Getting Started <a name="getting-started"></a>
 94 | 
 95 | To get a local copy up and running, follow these steps:
 96 | 
 97 | ### Prerequisites
 98 | 
 99 | In order to run this project you need:
100 |   - A browser of you choice.
101 |   - A text editor of your choice.
102 |   - An installed node.js on your local system
103 | 
104 | ### Setup
105 | 
106 | Clone this repository to your desired folder:
107 | 
108 | - Use the following Commands:
109 | 
110 |       cd your-desired-folder
111 |       git clone git@github.com:ab-noori/template.git
112 | 
113 | 
114 | ### Install
115 | - Install this project with:
116 | 
117 |        npx create-react-app my-app
118 |        cd my-app
119 |        npm start
120 | 
121 | 
122 | ### Usage
123 | - Use following commands to run on your local system:
124 | 
125 |       npm run build
126 |       npm run deploy
127 | 
128 | ### Run tests
129 | - Run the following script and style test:
130 | 
131 |       npx eslint "**/*.{js,jsx}"
132 |       npx eslint "**/*.{js,jsx}" --fix
133 | 
134 |       npx stylelint "**/*.{css,scss}"
135 |       npx stylelint "**/*.{css,scss}" --fix
136 |  
137 | ### Deployment
138 | - 1- install `'gh-pages'` with following command:
139 | 
140 |       npm i -D gh-pages
141 | 
142 | - 2- Add `'homepage'` to project's jason file:
143 | 
144 |       "homepage": "https://ab-noori.github.io/repo-name",
145 | 
146 | - 3- Add the following scripts to project's jason file:
147 | 
148 |       "predeploy": "npm run build",
149 |       "deploy": "gh-pages -d build "
150 | 
151 | - 4- Finally run the following command:
152 | 
153 |       npm run deploy
154 | 
155 | 
156 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
157 | 
158 | 
159 | ## 👥 Authors <a name="authors"></a>
160 | 
161 | 👤 **Abdul Ali Noori**
162 | 
163 | - GitHub: [@ab-noori](https://github.com/ab-noori)
164 | - Twitter: [@AbdulAliNoori4](https://twitter.com/AbdulAliNoori4)
165 | - LinkedIn: [abdul-ali-noori](https://www.linkedin.com/in/abdul-ali-noori-384b85195/)
166 | 
167 | 
168 | ## 🔭 Future Features <a name="future-features"></a>
169 | 
170 | - [ ] **[Add About page]**
171 | - [ ] **[Add Contact page]**
172 | 
173 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
174 | 
175 | ## 🤝 Contributing <a name="contributing"></a>
176 | 
177 | Contributions, issues, and feature requests are welcome!
178 | 
179 | Feel free to check the [issues page](https://github.com/ab-noori/.../issues).
180 | 
181 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
182 | 
183 | ## ⭐️ Show your support <a name="support"></a>
184 | 
185 |  
186 |   If you like this project, give it a star.
187 | 
188 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
189 | 
190 | 
191 | ## 🙏 Acknowledgments <a name="acknowledgements"></a>
192 | 
193 |   I would like to thank Microverse and my coding partners. Also I want to give credit to [`Nerd's lesson`](https://www.youtube.com/@Nerdslesson)
194 | YouTub Channel, it's [`react tutorial`](https://www.youtube.com/watch?v=cd3P3yXyx30) is really helpfull.
195 | 
196 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
197 | 
198 | 
199 | ## ❓ FAQ (OPTIONAL) <a name="faq"></a>
200 | 
201 | - **How to make it mobile friendly?**
202 | 
203 |   - Put a viewport tag in the header
204 | 
205 | - **How to design the site?**
206 | 
207 |   - Draw a mockup before start to code
208 | 
209 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
210 | 
211 | 
212 | ## 📝 License <a name="license"></a>
213 | 
214 | This project is [MIT](./LICENSE) licensed.
215 | 
216 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
217 | 


--------------------------------------------------------------------------------