├── .github ├── PULL_REQUEST_TEMPLATE.md └── workflows │ └── ci.yml ├── .gitignore ├── LICENSE.md ├── README.md ├── craco.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.js ├── App.test.js ├── assets │ └── github.svg ├── components │ ├── card.js │ ├── header.js │ ├── index.css │ ├── index.js │ ├── jumbotron.js │ └── mansory-wrapper.js ├── contributor │ ├── index.js │ ├── random-answer-image.js │ ├── random-cat-image.js │ ├── random-dog-image.js │ ├── random-fox-image.js │ ├── random-grayscale-image.js │ ├── random-lorem-pixel-image.js │ ├── random-meme-image.js │ ├── random-picsum-image.js │ ├── random-pokemon-image.js │ ├── random-tech-images.js │ ├── random-unsplash-image.js │ └── random-user-profile.js ├── example │ └── example-file.js ├── index.css ├── index.js ├── logo.svg ├── reportWebVitals.js └── setupTests.js ├── tailwind.config.js └── yarn.lock /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | Please include the details of the API used in this PR. 4 | 5 | ## Screenshot 6 | 7 | Optional 8 | 9 |
10 | Checklist 11 | 12 | - [ ] API used in this PR was not used in just-calling-random-api before. 13 | - [ ] API used in this PR is Public or I have permission to use it. 14 | - [ ] My contribution is working. 15 | - [ ] My contribution doesn't expose any API keys. 16 | - [ ] My changes don't generate any new warnings. 17 | - [ ] My changes don't affect any work done by other developers. 18 | 19 | To tick a box, replace `[ ]` with `[x]`. 20 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy 2 | 3 | on: 4 | push: 5 | branches: [master] 6 | 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | 11 | strategy: 12 | matrix: 13 | node-version: [12.x] 14 | 15 | steps: 16 | - name: Checkout repository 17 | uses: actions/checkout@v2 18 | 19 | - name: Set up Node.js ${{ matrix.node-version }} 20 | uses: actions/setup-node@v1 21 | with: 22 | node-version: ${{ matrix.node-version }} 23 | 24 | - name: Install dependencies 25 | run: npm install 26 | 27 | - name: Build 28 | run: npm run build 29 | 30 | - name: Deploy 31 | run: | 32 | git config --global user.name ${{ secrets.USERNAME }} 33 | git config --global user.email ${{ secrets.EMAIL }} 34 | git remote set-url origin https://${{ secrets.DEPLOYMENT }}@github.com/${{ github.repository }} 35 | npm run deploy 36 | env: 37 | user_name: "github-actions[bot]" 38 | user_email: "github-actions[bot]@users.noreply.github.com" 39 | github_token: ${{ secrets.DEPLOYMENT }} 40 | repository: ${{ github.repository }} 41 | -------------------------------------------------------------------------------- /.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.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Abdul Hakim 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 | 4 |
5 | Table of Contents 6 |
    7 |
  1. 8 | About The Project 9 | 12 |
    2. 13 |
  2. 14 | Getting Started 15 | 19 |
    3. 20 |
  3. Usage
    4. 21 |
22 |
23 | 24 | 25 | 26 | ## About The Project 27 | 28 | To welcome hacktoberfest we provide to create this repository to make you can contribute in hacktober fest with happy and make you more creative. 29 | 30 |

(back to top)

31 | 32 | ### Built With 33 | 34 | This app build with `React.JS` and `tailwind css` 35 | 36 | - [React.js](https://reactjs.org/) 37 | - [Tailwind Css](https://tailwindcss.com/) 38 | 39 |

(back to top)

40 | 41 | 42 | 43 | ## Getting Started 44 | 45 | How to contribute? Just fork this repository and then, create branch from forked repository, edit, create pull request, finish 46 | 47 | ### Prerequisites 48 | 49 | Please be sure to `have node.js` to run this app 50 | 51 | - [Node JS](https://nodejs.org/) 52 | 53 | ### Installation 54 | 55 | 1. Clone the repo 56 | ```sh 57 | git clone https://github.com/akimabs/random-call-api.git 58 | ``` 59 | 2. Install NPM packages 60 | ```sh 61 | npm install 62 | ``` 63 | 64 |

(back to top)

65 | 66 | 67 | 68 | ## Usage 69 | 70 | To start developing this app you can follow this step: 71 | 72 | 1. Type `npm start` and press `enter`, the app will appear automatically in development mode. 73 | 74 | 2. Copy file `src/example/example-file.js` to `src/contributor` and rename it. 75 | 76 | 3. Start developing your new file. 77 | 78 | 4. import your file to `index.js` 79 | 80 | 5. Finish, yeay~ Your development progress is done. 81 | 82 |

(back to top)

83 | 84 | 85 | 86 | ## Contributing 87 | 88 | Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**. 89 | 90 | If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". 91 | Don't forget to give the project a star! Thanks again! 92 | 93 | 1. Fork the Project 94 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`) 95 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`) 96 | 4. Push to the Branch (`git push origin feature/AmazingFeature`) 97 | 5. Open a Pull Request 98 | 99 |

(back to top)

100 | 101 | ### Contributors 102 | 103 | List generated with [contributors-img](https://contrib.rocks). [Updates every 24 hrs] 104 | 105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /craco.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | style: { 3 | postcss: { 4 | plugins: [require("tailwindcss"), require("autoprefixer")], 5 | }, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "random-call-api", 3 | "version": "0.1.0", 4 | "private": false, 5 | "homepage": "https://akimabs.github.io/random-call-api", 6 | "dependencies": { 7 | "@craco/craco": "^6.3.0", 8 | "@testing-library/jest-dom": "^5.11.4", 9 | "@testing-library/react": "^11.1.0", 10 | "@testing-library/user-event": "^12.1.10", 11 | "axios": "^0.22.0", 12 | "gh-pages": "^3.2.3", 13 | "react": "^17.0.2", 14 | "react-dom": "^17.0.2", 15 | "react-masonry-css": "^1.0.16", 16 | "react-scripts": "4.0.3", 17 | "web-vitals": "^1.0.1" 18 | }, 19 | "scripts": { 20 | "start": "craco start", 21 | "build": "craco build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject", 24 | "predeploy": "npm run build", 25 | "deploy": "gh-pages -d build" 26 | }, 27 | "eslintConfig": { 28 | "extends": [ 29 | "react-app", 30 | "react-app/jest" 31 | ] 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | ">0.2%", 36 | "not dead", 37 | "not op_mini all" 38 | ], 39 | "development": [ 40 | "last 1 chrome version", 41 | "last 1 firefox version", 42 | "last 1 safari version" 43 | ] 44 | }, 45 | "devDependencies": { 46 | "autoprefixer": "^9.8.7", 47 | "postcss": "^7.0.38", 48 | "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.16" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/random-call-api/98b3c79ab7339b07afb762b63c50a0d38278e266/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/FirmanKurniawan/random-call-api/98b3c79ab7339b07afb762b63c50a0d38278e266/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/random-call-api/98b3c79ab7339b07afb762b63c50a0d38278e266/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 "./App.css"; 2 | import { Header, MasonryWrapper } from "./components"; 3 | import { data_contributor } from "./contributor"; 4 | 5 | function App() { 6 | return ( 7 |
8 |
9 | 10 | {data_contributor.map((res, index) => { 11 | const Component = res; 12 | return ; 13 | })} 14 | 15 |
16 | ); 17 | } 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/assets/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/card.js: -------------------------------------------------------------------------------- 1 | export default function Card({ data, children }) { 2 | return ( 3 |
4 |
5 | 6 |
7 | Contributor's avatar 12 |

{data.username}

13 |
14 | 15 | 16 |
17 | Hyperlink icon 22 |

{data.apiName}

23 |
24 | 25 |
26 |

{data.apiDescription}

27 | {children} 28 |
29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /src/components/header.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import github from "../assets/github.svg"; 3 | 4 | export default function Header(props) { 5 | return ( 6 |
7 |
8 | 9 |

10 | Random Call APIs 11 |

12 | 13 |
14 | 19 | 20 | 21 |
22 |
23 |
24 |
25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /src/components/index.css: -------------------------------------------------------------------------------- 1 | .my-masonry-grid { 2 | display: -webkit-box; /* Not needed if autoprefixing */ 3 | display: -ms-flexbox; /* Not needed if autoprefixing */ 4 | display: flex; 5 | margin-left: -30px; /* gutter size offset */ 6 | width: auto; 7 | } 8 | .my-masonry-grid_column { 9 | padding-left: 30px; /* gutter size */ 10 | background-clip: padding-box; 11 | } 12 | 13 | /* Style your items */ 14 | .my-masonry-grid_column > div { 15 | /* change div to reference your elements you put in */ 16 | background: whitesmoke; 17 | margin-bottom: 30px; 18 | border-width: 1px; 19 | } 20 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import Header from "./header"; 2 | import Card from "./card"; 3 | import Jumbotron from "./jumbotron"; 4 | import MasonryWrapper from "./mansory-wrapper"; 5 | 6 | export { Header, Card, Jumbotron, MasonryWrapper }; 7 | -------------------------------------------------------------------------------- /src/components/jumbotron.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Message(props) { 4 | return ( 5 |
6 |
7 |

Hi, all

8 |

9 | Are you new to React.js? here is the place to try to learn to call API 10 | using React.js and contribute to open-source. Part of{" "} 11 | 16 | Hacktoberfest 17 | 18 |

19 |
20 |
21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /src/components/mansory-wrapper.js: -------------------------------------------------------------------------------- 1 | import Masonry from "react-masonry-css"; 2 | import "./index.css"; 3 | 4 | export default function MasonryWrapper({ children }) { 5 | const breakpointColumnsObj = { 6 | default: 4, 7 | 1100: 3, 8 | 700: 2, 9 | 500: 1, 10 | }; 11 | return ( 12 | 17 | {children} 18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /src/contributor/index.js: -------------------------------------------------------------------------------- 1 | import RandomFoxImage from "./random-fox-image"; 2 | import RandomCatImage from "./random-cat-image"; 3 | import RandomTechImages from "./random-tech-images"; 4 | import RandomPokemonImage from "./random-pokemon-image"; 5 | import RandomUnsplashImage from "./random-unsplash-image"; 6 | import RandomPicsumImage from "./random-picsum-image"; 7 | import RandomGrayscaleImage from "./random-grayscale-image"; 8 | import RandomLoremPixelImage from "./random-lorem-pixel-image"; 9 | import RandomAnswerImage from "./random-answer-image"; 10 | import RandomDogImage from './random-dog-image'; 11 | import RandomMemeImage from "./random-meme-image"; 12 | import RandomUserProfile from './random-user-profile'; 13 | 14 | export const data_contributor = [ 15 | RandomFoxImage, 16 | RandomCatImage, 17 | RandomTechImages, 18 | RandomPokemonImage, 19 | RandomUnsplashImage, 20 | RandomPicsumImage, 21 | RandomUserProfile, 22 | RandomGrayscaleImage, 23 | RandomLoremPixelImage, 24 | RandomAnswerImage, 25 | RandomDogImage, 26 | RandomMemeImage, 27 | ]; 28 | -------------------------------------------------------------------------------- /src/contributor/random-answer-image.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import { useState, useEffect } from "react"; 3 | import { Card } from "../components"; 4 | 5 | // BASEURL: https://yesno.wtf/api 6 | 7 | const BASE_URL = "https://yesno.wtf/api"; 8 | 9 | export default function RandomAnswerImage() { 10 | const [answer, setAnswer] = useState([]); 11 | const getAnswerRandom = async () => { 12 | try { 13 | const response = await axios.get(BASE_URL); 14 | setAnswer(response.data); 15 | } catch (error) { 16 | throw new Error(error.message); 17 | } 18 | }; 19 | useEffect(() => { 20 | getAnswerRandom(); 21 | }, []); 22 | return ( 23 | <> 24 | 33 | {answer.answer} 34 | 35 | 36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /src/contributor/random-cat-image.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import axios from "axios"; 3 | // components 4 | import { Card } from "../components"; 5 | // baseurl api's 6 | const BASE_URL = "https://aws.random.cat/meow" 7 | 8 | const RandomCatImage = () => { 9 | const [dispatching, setDispatching] = useState(false) 10 | const [randomImg, setRandomImg] = useState('') 11 | 12 | const getRandomCat = async () => { 13 | setDispatching(true) 14 | const response = await axios.get(BASE_URL); 15 | if (response.status !== 200) { 16 | throw new Error("Fetching err"); 17 | } 18 | setRandomImg(response?.data?.file) 19 | setDispatching(false) 20 | } 21 | 22 | useEffect(()=> { 23 | getRandomCat(); 24 | return () => { 25 | setDispatching(false) 26 | } 27 | },[]) 28 | 29 | return ( 30 | 39 | { 40 | dispatching ? ( 41 |

Loading...

42 | ) : ( 43 | techImage 48 | ) 49 | } 50 | 51 | ); 52 | }; 53 | 54 | export default RandomCatImage; 55 | -------------------------------------------------------------------------------- /src/contributor/random-dog-image.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import { Card } from '../components' 3 | import axios from 'axios' 4 | 5 | const RandomDogImage = () => { 6 | const [data, setData] = useState() 7 | const BASE_URL = 'https://dog.ceo/api/breeds/image/random' 8 | 9 | useEffect(() => { 10 | axios 11 | .get(BASE_URL) 12 | .then(res => setData(res.data)) 13 | .catch(err => console.log(err)) 14 | }, []) 15 | 16 | return ( 17 | 24 | {data && ( 25 | dogimage 30 | )} 31 | 32 | ) 33 | } 34 | 35 | export default RandomDogImage 36 | -------------------------------------------------------------------------------- /src/contributor/random-fox-image.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | 4 | import { Card } from "../components"; 5 | 6 | const BASE_URL = "https://randomfox.ca/floof/"; 7 | 8 | const RandomFoxImage = () => { 9 | const [data, setData] = useState({ image: "", link: "" }); 10 | const fetchData = async () => { 11 | const response = await axios.get(BASE_URL); 12 | if (response.status !== 200) { 13 | throw new Error("Fetching err"); 14 | } 15 | setData(response?.data); 16 | }; 17 | 18 | useEffect(() => { 19 | fetchData(); 20 | }, []); 21 | 22 | return ( 23 | 32 | foximage 37 | 38 | ); 39 | }; 40 | 41 | export default RandomFoxImage; 42 | -------------------------------------------------------------------------------- /src/contributor/random-grayscale-image.js: -------------------------------------------------------------------------------- 1 | import { Card } from '../components'; 2 | 3 | const RandomGrayscaleImage = () => { 4 | return ( 5 | 13 | grayscale 18 | 19 | ); 20 | }; 21 | 22 | export default RandomGrayscaleImage; 23 | -------------------------------------------------------------------------------- /src/contributor/random-lorem-pixel-image.js: -------------------------------------------------------------------------------- 1 | import { Card } from '../components'; 2 | 3 | 4 | 5 | const RandomLoremPixelImage =() => { 6 | return ( 7 | 16 | natureImage 21 | 22 | ) 23 | } 24 | 25 | export default RandomLoremPixelImage 26 | -------------------------------------------------------------------------------- /src/contributor/random-meme-image.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | 4 | import { Card } from "../components"; 5 | 6 | const RandomMemeImage = () => { 7 | const [img, setImg] = useState(''); 8 | const fetchData = async () => { 9 | const response = await axios.get('https://meme-api.herokuapp.com/gimme/1'); 10 | if (response.status !== 200) { 11 | throw new Error("Fetching err"); 12 | } 13 | setImg(response?.data.memes[0].preview[2]); 14 | }; 15 | 16 | useEffect(() => { 17 | fetchData(); 18 | }, []); 19 | 20 | return ( 21 | 30 | foximage 35 | 36 | ); 37 | }; 38 | 39 | export default RandomMemeImage; -------------------------------------------------------------------------------- /src/contributor/random-picsum-image.js: -------------------------------------------------------------------------------- 1 | import { Card } from "../components"; 2 | 3 | // avatar can get from here(avatar_url) 4 | // https://api.github.com/users/akimabs 5 | 6 | const RandomPicsumImage = () => { 7 | return ( 8 | 17 | random-pict 22 | 23 | ); 24 | }; 25 | 26 | export default RandomPicsumImage; 27 | -------------------------------------------------------------------------------- /src/contributor/random-pokemon-image.js: -------------------------------------------------------------------------------- 1 | import { Card } from '../components'; 2 | 3 | function randomInteger(min, max) { 4 | return Math.floor(Math.random() * (max - min + 1)) + min; 5 | } 6 | 7 | const RandomPokemonImage = () => { 8 | return ( 9 | 17 | pokemon 24 | 25 | ); 26 | }; 27 | 28 | export default RandomPokemonImage; 29 | -------------------------------------------------------------------------------- /src/contributor/random-tech-images.js: -------------------------------------------------------------------------------- 1 | import { Card } from "../components"; 2 | 3 | // avatar can get from here(avatar_url) 4 | // https://api.github.com/users/akimabs 5 | 6 | const RandomTechImage = () => { 7 | return ( 8 | 17 | techImage 22 | 23 | ); 24 | }; 25 | 26 | export default RandomTechImage; 27 | -------------------------------------------------------------------------------- /src/contributor/random-unsplash-image.js: -------------------------------------------------------------------------------- 1 | import { Card } from '../components'; 2 | 3 | const RandomUnsplashImage = () => { 4 | return ( 5 | 15 | unsplashImage 20 | 21 | ); 22 | }; 23 | 24 | export default RandomUnsplashImage; 25 | -------------------------------------------------------------------------------- /src/contributor/random-user-profile.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { Card } from "../components"; 3 | import axios from "axios"; 4 | 5 | const RandomUserProfile = () => { 6 | const [data, setData] = useState({}) 7 | const [loading, setLoading] = useState(false) 8 | 9 | const getRandomUserProfile = async () => { 10 | setLoading(true); 11 | const response = await axios.get("https://randomuser.me/api/"); 12 | if (response.status !== 200) { 13 | throw new Error("Fetching err"); 14 | } 15 | setData(response?.data?.results[0]) 16 | setLoading(false) 17 | } 18 | 19 | useEffect(() => { 20 | getRandomUserProfile(); 21 | return () => { 22 | setLoading(false) 23 | } 24 | }, []) 25 | 26 | return ( 27 | 36 | {loading ? ( 37 |

Loading...

38 | ) : ( 39 |
40 | profileImage 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 |
Name:{data?.name?.first} {data?.name?.last}
Gender:{data?.gender}
Phone:{data?.phone}
64 |
65 | )} 66 | 67 | ); 68 | }; 69 | 70 | export default RandomUserProfile; 71 | -------------------------------------------------------------------------------- /src/example/example-file.js: -------------------------------------------------------------------------------- 1 | import { Card } from "../components"; 2 | 3 | // avatar can get from here(avatar_url) 4 | // https://api.github.com/users/akimabs 5 | 6 | const RandomFoxImage = () => { 7 | return ( 8 | 17 | {/* Add ypur component here */} 18 | 19 | ); 20 | }; 21 | 22 | export default RandomFoxImage; 23 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], 3 | darkMode: false, // or 'media' or 'class' 4 | theme: { 5 | fontFamily: { 6 | body: ["Montserrat", "sans-serif"], 7 | }, 8 | extend: {}, 9 | }, 10 | variants: { 11 | extend: {}, 12 | }, 13 | plugins: [], 14 | }; 15 | --------------------------------------------------------------------------------