React App

├── .gitignore ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── assets └── project-image.jpg ├── index.css ├── index.js └── store ├── store.js └── users ├── UsersList.js └── usersSlice.js /.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ![](https://img.shields.io/badge/Microverse-blueviolet) 4 | 5 |

6 | 7 | 8 |

9 | 10 | 25 | 26 | > # Template 27 | 28 | | Desktop Veiw Representation| 29 | |---------------------------------------| 30 | |

Client

66 |

HTML
CSS
JavaScript
ReactJS
API

73 | 74 | ### Key Features 75 | 76 | - **[Responsive layout]** 77 | - **[UX/UI accessibility]** 78 | - **[Dynamic data]** 79 | 80 |

(back to top)

81 | 82 | 83 | 84 | ## 🚀 Live Demo 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 |

(back to top)

90 | 91 | 92 | 93 | ## 💻 Getting Started 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 |

(back to top)

157 | 158 | 159 | ## 👥 Authors 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 169 | 170 | - [ ] **[Add About page]** 171 | - [ ] **[Add Contact page]** 172 | 173 |

(back to top)

174 | 175 | ## 🤝 Contributing 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 |

(back to top)

182 | 183 | ## ⭐️ Show your support 184 | 185 | 186 | If you like this project, give it a star. 187 | 188 |

(back to top)

189 | 190 | 191 | ## 🙏 Acknowledgments 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 |

(back to top)

197 | 198 | 199 | ## ❓ FAQ (OPTIONAL) 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 |

(back to top)

210 | 211 | 212 | ## 📝 License 213 | 214 | This project is [MIT](./LICENSE) licensed. 215 | 216 |

(back to top)

217 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ab-noori/react-redux-api/fb8dc062b2d8157e14c8223ea786914c2f98f4fd/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |

32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ab-noori/react-redux-api/fb8dc062b2d8157e14c8223ea786914c2f98f4fd/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ab-noori/react-redux-api/fb8dc062b2d8157e14c8223ea786914c2f98f4fd/public/logo512.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /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/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 | 9 |

10 | 11 |

12 | 13 | ); 14 | }; 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /src/assets/project-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ab-noori/react-redux-api/fb8dc062b2d8157e14c8223ea786914c2f98f4fd/src/assets/project-image.jpg -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | 9 | 10 | 11 | ); 12 | 13 | -------------------------------------------------------------------------------- /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/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

; 15 | } 16 | 17 | if (error) { 18 | return

Error: {error}

; 19 | } 20 | 21 | return ( 22 |

25 | {user.name.first} {user.name.last} 26 |

29 | ); 30 | }; 31 | 32 | export default UsersList; 33 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------