├── LICENSE ├── Level-1 ├── music-player │ └── index.js └── rick-morty-wiki │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── App.scss │ ├── Pages │ ├── Episodes.js │ └── Location.js │ ├── components │ ├── Card │ │ ├── Card.js │ │ ├── Card.module.scss │ │ └── CardDetails.js │ ├── Filter │ │ ├── Filter.js │ │ ├── FilterBTN.js │ │ └── category │ │ │ ├── Gender.js │ │ │ ├── InputGroup.js │ │ │ ├── Species.js │ │ │ └── Status.js │ ├── Navbar │ │ └── Navbar.js │ ├── Pagination │ │ └── Pagination.js │ └── Search │ │ ├── Search.js │ │ └── Search.module.scss │ ├── index.css │ ├── index.js │ └── reportWebVitals.js └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Joy Shaheb 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 | -------------------------------------------------------------------------------- /Level-1/music-player/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyShaheb/React-Projects/73a22937aacf99d96a3c9844efbfcdf75dcae8c4/Level-1/music-player/index.js -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/.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 | Article.md 8 | 9 | # testing 10 | /coverage 11 | 12 | # production 13 | /build 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/README.md: -------------------------------------------------------------------------------- 1 | # Tutorial 2 | 3 | ### Packages installation steps 4 | 5 | ``` 6 | npx create-react-app . 7 | 8 | npm install bootstrap 9 | 10 | npm install @popperjs/core --save 11 | 12 | npm install sass 13 | 14 | npm install react-paginate --save 15 | 16 | npm install react-router-dom 17 | 18 | npm start 19 | ``` 20 | 21 | ### Font Awesome CDN 22 | 23 | ``` 24 | 28 | 29 | ``` 30 | 31 | ### Google Font Families 32 | 33 | ``` 34 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Ubuntu:wght@300;400;500;700&display=swap'); 35 | 36 | font-family: 'Poppins', sans-serif; 37 | font-family: 'Ubuntu', sans-serif; 38 | ``` 39 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-rick", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@popperjs/core": "^2.10.2", 7 | "@testing-library/jest-dom": "^5.14.1", 8 | "@testing-library/react": "^11.2.7", 9 | "@testing-library/user-event": "^12.8.3", 10 | "bootstrap": "^5.1.3", 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "react-paginate": "^7.1.5", 14 | "react-router-dom": "^6.0.1", 15 | "react-scripts": "4.0.3", 16 | "sass": "^1.43.4", 17 | "web-vitals": "^1.1.2" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyShaheb/React-Projects/73a22937aacf99d96a3c9844efbfcdf75dcae8c4/Level-1/rick-morty-wiki/public/favicon.ico -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 22 | 23 | 32 | Rick & Morty WiKi 33 | 34 | 35 | 36 |
37 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyShaheb/React-Projects/73a22937aacf99d96a3c9844efbfcdf75dcae8c4/Level-1/rick-morty-wiki/public/logo192.png -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoyShaheb/React-Projects/73a22937aacf99d96a3c9844efbfcdf75dcae8c4/Level-1/rick-morty-wiki/public/logo512.png -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/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 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/src/App.js: -------------------------------------------------------------------------------- 1 | import "bootstrap/dist/css/bootstrap.min.css"; 2 | import "bootstrap/dist/js/bootstrap"; 3 | import React, { useState, useEffect } from "react"; 4 | 5 | import Search from "./components/Search/Search"; 6 | import Card from "./components/Card/Card"; 7 | import Pagination from "./components/Pagination/Pagination"; 8 | import Filter from "./components/Filter/Filter"; 9 | import Navbar from "./components/Navbar/Navbar"; 10 | 11 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 12 | import Episodes from "./Pages/Episodes"; 13 | import Location from "./Pages/Location"; 14 | import CardDetails from "./components/Card/CardDetails"; 15 | 16 | function App() { 17 | return ( 18 | 19 |
20 | 21 |
22 | 23 | } /> 24 | } /> 25 | 26 | } /> 27 | } /> 28 | 29 | } /> 30 | } /> 31 | 32 | 33 | ); 34 | } 35 | 36 | const Home = () => { 37 | let [pageNumber, updatePageNumber] = useState(1); 38 | let [status, updateStatus] = useState(""); 39 | let [gender, updateGender] = useState(""); 40 | let [species, updateSpecies] = useState(""); 41 | let [fetchedData, updateFetchedData] = useState([]); 42 | let [search, setSearch] = useState(""); 43 | let { info, results } = fetchedData; 44 | 45 | let api = `https://rickandmortyapi.com/api/character/?page=${pageNumber}&name=${search}&status=${status}&gender=${gender}&species=${species}`; 46 | 47 | useEffect(() => { 48 | (async function () { 49 | let data = await fetch(api).then((res) => res.json()); 50 | updateFetchedData(data); 51 | })(); 52 | }, [api]); 53 | return ( 54 |
55 |

Characters

56 | 57 |
58 |
59 | 67 |
68 |
69 | 70 |
71 |
72 |
73 |
74 | 79 |
80 | ); 81 | }; 82 | 83 | export default App; 84 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/src/App.scss: -------------------------------------------------------------------------------- 1 | .active { 2 | color: #0b5ed7 !important; 3 | font-weight: bold; 4 | border-bottom: 3px solid #0b5ed7; 5 | } 6 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/src/Pages/Episodes.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import Card from "../components/Card/Card"; 3 | import InputGroup from "../components/Filter/category/InputGroup"; 4 | 5 | const Episodes = () => { 6 | let [results, setResults] = React.useState([]); 7 | let [info, setInfo] = useState([]); 8 | let { air_date, episode, name } = info; 9 | let [id, setID] = useState(1); 10 | 11 | let api = `https://rickandmortyapi.com/api/episode/${id}`; 12 | 13 | useEffect(() => { 14 | (async function () { 15 | let data = await fetch(api).then((res) => res.json()); 16 | setInfo(data); 17 | 18 | let a = await Promise.all( 19 | data.characters.map((x) => { 20 | return fetch(x).then((res) => res.json()); 21 | }) 22 | ); 23 | setResults(a); 24 | })(); 25 | }, [api]); 26 | 27 | return ( 28 |
29 |
30 |

31 | Episode name :{" "} 32 | {name === "" ? "Unknown" : name} 33 |

34 |
35 | Air Date: {air_date === "" ? "Unknown" : air_date} 36 |
37 |
38 |
39 |
40 |

Pick Episode

41 | 42 |
43 |
44 |
45 | 46 |
47 |
48 |
49 |
50 | ); 51 | }; 52 | 53 | export default Episodes; 54 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/src/Pages/Location.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import Card from "../components/Card/Card"; 3 | import InputGroup from "../components/Filter/category/InputGroup"; 4 | 5 | const Location = () => { 6 | let [results, setResults] = React.useState([]); 7 | let [info, setInfo] = useState([]); 8 | let { dimension, type, name } = info; 9 | let [number, setNumber] = useState(1); 10 | 11 | let api = `https://rickandmortyapi.com/api/location/${number}`; 12 | 13 | useEffect(() => { 14 | (async function () { 15 | let data = await fetch(api).then((res) => res.json()); 16 | setInfo(data); 17 | 18 | let a = await Promise.all( 19 | data.residents.map((x) => { 20 | return fetch(x).then((res) => res.json()); 21 | }) 22 | ); 23 | setResults(a); 24 | })(); 25 | }, [api]); 26 | 27 | return ( 28 |
29 |
30 |

31 | Location : 32 | 33 | {" "} 34 | {name === "" ? "Unknown" : name} 35 | 36 |

37 |
38 | Dimension: {dimension === "" ? "Unknown" : dimension} 39 |
40 |
Type: {type === "" ? "Unknown" : type}
41 |
42 |
43 |
44 |

Pick Location

45 | 46 |
47 |
48 |
49 | 50 |
51 |
52 |
53 |
54 | ); 55 | }; 56 | 57 | export default Location; 58 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/src/components/Card/Card.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import styles from "./Card.module.scss"; 4 | import CardDetails from "./CardDetails"; 5 | 6 | const Card = ({ page, results }) => { 7 | let display; 8 | 9 | if (results) { 10 | display = results.map((x) => { 11 | let { id, image, name, status, location } = x; 12 | 13 | return ( 14 | 20 |
23 | 24 |
25 |
{name}
26 |
27 |
Last Location
28 |
{location.name}
29 |
30 |
31 |
32 | 33 | {(() => { 34 | if (status === "Dead") { 35 | return ( 36 |
39 | {status} 40 |
41 | ); 42 | } else if (status === "Alive") { 43 | return ( 44 |
47 | {status} 48 |
49 | ); 50 | } else { 51 | return ( 52 |
55 | {status} 56 |
57 | ); 58 | } 59 | })()} 60 | 61 | ); 62 | }); 63 | } else { 64 | display = "No Characters Found :/"; 65 | } 66 | 67 | return <>{display}; 68 | }; 69 | 70 | export default Card; 71 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/src/components/Card/Card.module.scss: -------------------------------------------------------------------------------- 1 | $radius: 10px; 2 | 3 | .card { 4 | border: 2px solid #0b5ed7; 5 | border-radius: $radius; 6 | } 7 | 8 | .content { 9 | padding: 10px; 10 | } 11 | 12 | .img { 13 | border-radius: $radius $radius 0 0; 14 | } 15 | 16 | .badge { 17 | top: 10px; 18 | right: 20px; 19 | font-size: 17px; 20 | } 21 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/src/components/Card/CardDetails.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { useParams } from "react-router-dom"; 3 | 4 | const CardDetails = () => { 5 | let { id } = useParams(); 6 | 7 | let [fetchedData, updateFetchedData] = useState([]); 8 | let { name, location, origin, gender, image, status, species } = fetchedData; 9 | 10 | let api = `https://rickandmortyapi.com/api/character/${id}`; 11 | 12 | useEffect(() => { 13 | (async function () { 14 | let data = await fetch(api).then((res) => res.json()); 15 | updateFetchedData(data); 16 | })(); 17 | }, [api]); 18 | 19 | return ( 20 |
21 |
22 |

{name}

23 | 24 | 25 | {(() => { 26 | if (status === "Dead") { 27 | return
{status}
; 28 | } else if (status === "Alive") { 29 | return
{status}
; 30 | } else { 31 | return
{status}
; 32 | } 33 | })()} 34 |
35 |
36 | Gender : 37 | {gender} 38 |
39 |
40 | Location: 41 | {location?.name} 42 |
43 |
44 | Origin: 45 | {origin?.name} 46 |
47 |
48 | Species: 49 | {species} 50 |
51 |
52 |
53 |
54 | ); 55 | }; 56 | 57 | export default CardDetails; 58 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/src/components/Filter/Filter.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Gender from "./category/Gender"; 3 | import Species from "./category/Species"; 4 | import Status from "./category/Status"; 5 | 6 | const Filter = ({ 7 | pageNumber, 8 | updatePageNumber, 9 | updateStatus, 10 | updateGender, 11 | updateSpecies, 12 | }) => { 13 | let clear = () => { 14 | updateStatus(""); 15 | updateGender(""); 16 | updateSpecies(""); 17 | updatePageNumber(1); 18 | window.location.reload(false); 19 | }; 20 | return ( 21 |
22 |
Filters
23 |
28 | Clear Filters 29 |
30 |
31 | 35 | 39 | 43 |
44 |
45 | ); 46 | }; 47 | 48 | export default Filter; 49 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/src/components/Filter/FilterBTN.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const FilterBTN = ({ input, task, updatePageNumber, index, name }) => { 4 | return ( 5 |
6 | 17 | 18 |
19 | 25 | 35 |
36 |
37 | ); 38 | }; 39 | 40 | export default FilterBTN; 41 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/src/components/Filter/category/Gender.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import FilterBTN from "../FilterBTN"; 3 | 4 | const Gender = ({ updateGender, updatePageNumber }) => { 5 | let genders = ["female", "male", "genderless", "unknown"]; 6 | return ( 7 |
8 |

9 | 19 |

20 |
26 |
27 | {genders.map((items, index) => { 28 | return ( 29 | 37 | ); 38 | })} 39 |
40 |
41 |
42 | ); 43 | }; 44 | 45 | export default Gender; 46 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/src/components/Filter/category/InputGroup.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const InputGroup = ({ name, changeID, total }) => { 4 | return ( 5 |
6 | 20 |
21 | ); 22 | }; 23 | 24 | export default InputGroup; 25 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/src/components/Filter/category/Species.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import FilterBTN from "../FilterBTN"; 3 | 4 | const Species = ({ updateSpecies, updatePageNumber }) => { 5 | let species = [ 6 | "Human", 7 | "Alien", 8 | "Humanoid", 9 | "Poopybutthole", 10 | "Mythological", 11 | "Unknown", 12 | "Animal", 13 | "Disease", 14 | "Robot", 15 | "Cronenberg", 16 | "Planet", 17 | ]; 18 | return ( 19 |
20 |

21 | 31 |

32 |
38 |
39 | {species.map((item, index) => { 40 | return ( 41 | 49 | ); 50 | })} 51 |
52 |
53 |
54 | ); 55 | }; 56 | 57 | export default Species; 58 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/src/components/Filter/category/Status.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import FilterBTN from "../FilterBTN"; 3 | 4 | const Status = ({ updateStatus, updatePageNumber }) => { 5 | let status = ["Alive", "Dead", "Unknown"]; 6 | return ( 7 |
8 |

9 | 19 |

20 |
26 |
27 | {status.map((item, index) => ( 28 | 36 | ))} 37 |
38 |
39 |
40 | ); 41 | }; 42 | 43 | export default Status; 44 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/src/components/Navbar/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NavLink, Link } from "react-router-dom"; 3 | import "../../App.scss"; 4 | 5 | const Navbar = () => { 6 | return ( 7 | 54 | ); 55 | }; 56 | 57 | export default Navbar; 58 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/src/components/Pagination/Pagination.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import ReactPaginate from "react-paginate"; 3 | 4 | const Pagination = ({ pageNumber, info, updatePageNumber }) => { 5 | let pageChange = (data) => { 6 | updatePageNumber(data.selected + 1); 7 | }; 8 | 9 | const [width, setWidth] = useState(window.innerWidth); 10 | const updateDimensions = () => { 11 | setWidth(window.innerWidth); 12 | }; 13 | useEffect(() => { 14 | window.addEventListener("resize", updateDimensions); 15 | return () => window.removeEventListener("resize", updateDimensions); 16 | }, []); 17 | 18 | return ( 19 | <> 20 | 38 | 53 | 54 | ); 55 | }; 56 | 57 | export default Pagination; 58 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/src/components/Search/Search.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./Search.module.scss"; 3 | 4 | const Search = ({ setSearch, updatePageNumber }) => { 5 | let searchBtn = (e) => { 6 | e.preventDefault(); 7 | }; 8 | return ( 9 |
12 | { 14 | updatePageNumber(1); 15 | setSearch(e.target.value); 16 | }} 17 | placeholder="Search for characters" 18 | className={styles.input} 19 | type="text" 20 | /> 21 | 27 |
28 | ); 29 | }; 30 | 31 | export default Search; 32 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/src/components/Search/Search.module.scss: -------------------------------------------------------------------------------- 1 | .input { 2 | width: 40%; 3 | border: 2px solid #0b5ed7; 4 | border-radius: 8px; 5 | box-shadow: 1px 3px 9px rgba($color: #000000, $alpha: 0.25); 6 | padding: 10px 15px; 7 | &:focus { 8 | outline: none; 9 | } 10 | } 11 | 12 | .btn { 13 | box-shadow: 1px 3px 9px rgba($color: #000000, $alpha: 0.25); 14 | } 15 | @media (max-width: 576px) { 16 | .input { 17 | width: 80%; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap'); 2 | 3 | body { 4 | margin: 0; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | } 8 | 9 | .ubuntu { 10 | font-family: "Ubuntu" !important; 11 | } 12 | 13 | code { 14 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 15 | monospace; 16 | } 17 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById("root") 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /Level-1/rick-morty-wiki/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React-Projects 2 | This repository carries all the projects Joy Shaheb made using React JS. The projects are divided across 3 | * Level-1 4 | * Level-2 5 | * Level-3 6 | 7 | ## Part of the React JS Series by Joy Shaheb on YouTube 8 | --------------------------------------------------------------------------------