├── public ├── favicon.ico └── index.html ├── src ├── assets │ ├── screenshot.jpg │ └── undraw-designer.png ├── components │ ├── Label.js │ ├── Nav.js │ ├── Card.js │ ├── Banner.js │ ├── Resources.js │ └── App.js ├── index.js ├── styles │ ├── Banner.css │ ├── Label.css │ ├── Nav.css │ ├── Card.css │ ├── Resources.css │ └── App.css ├── index.css └── data.js ├── README.md ├── .gitignore ├── LICENSE └── package.json /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vlipatdev/frontend-resources/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vlipatdev/frontend-resources/HEAD/src/assets/screenshot.jpg -------------------------------------------------------------------------------- /src/assets/undraw-designer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vlipatdev/frontend-resources/HEAD/src/assets/undraw-designer.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Front-end Resources 2 | 3 | :book: A curated collection of usefool tools and websites for front-end web developers 4 | 5 | Website: https://vlipatdev.github.io/frontend-resources/ 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/components/Label.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | import '../styles/Label.css'; 4 | 5 | class Label extends Component { 6 | render() { 7 | return
{this.props.label}
; 8 | } 9 | } 10 | 11 | export default Label; 12 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { HashRouter } from 'react-router-dom'; 4 | 5 | import App from './components/App'; 6 | 7 | import './index.css'; 8 | 9 | ReactDOM.render( 10 | 11 | 12 | , 13 | document.getElementById('root') 14 | ); 15 | -------------------------------------------------------------------------------- /.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/styles/Banner.css: -------------------------------------------------------------------------------- 1 | .Banner { 2 | min-height: 4rem; 3 | width: 100%; 4 | background: #7289da; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | padding: 1rem 2rem; 9 | text-align: center; 10 | } 11 | 12 | .Banner-text { 13 | color: white; 14 | font-size: 1.4rem; 15 | } 16 | 17 | .Banner-link, 18 | .Banner-link:visited, 19 | .Banner-link:hover { 20 | color: white; 21 | } 22 | 23 | @media screen and (max-width: 768px) { 24 | .Banner-text { 25 | font-size: 1.2rem; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/styles/Label.css: -------------------------------------------------------------------------------- 1 | .Label { 2 | font-size: 1.2rem; 3 | padding: 3px 5px; 4 | border-radius: 3px; 5 | font-weight: 600; 6 | text-transform: uppercase; 7 | display: inline-block; 8 | margin-right: 10px; 9 | margin-top: 10px; 10 | } 11 | 12 | .open-source { 13 | color: #6a1b9a; 14 | background: #f3e5f5; 15 | } 16 | 17 | .free { 18 | color: #0277bd; 19 | background: #e1f5fe; 20 | } 21 | 22 | .premium { 23 | color: #ad1457; 24 | background: #fce4ec; 25 | } 26 | 27 | @media screen and (max-width: 768px) { 28 | .Label { 29 | font-size: 1rem; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | box-sizing: border-box; 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | body { 9 | margin: 0; 10 | font-family: 'Nunito', sans-serif; 11 | -webkit-font-smoothing: antialiased; 12 | -moz-osx-font-smoothing: grayscale; 13 | font-size: 1.6rem; 14 | overflow-x: hidden; 15 | } 16 | 17 | *, 18 | *::before, 19 | *::after { 20 | transition: all 0.2s; 21 | box-sizing: inherit; 22 | margin: 0; 23 | padding: 0; 24 | } 25 | 26 | code { 27 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 28 | monospace; 29 | } 30 | -------------------------------------------------------------------------------- /src/components/Nav.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { NavLink } from 'react-router-dom'; 3 | 4 | import '../styles/Nav.css'; 5 | 6 | class Nav extends Component { 7 | render() { 8 | return ( 9 |
10 | {this.props.data.map((el, idx) => ( 11 | 18 | {el.type} 19 | 20 | ))} 21 |
22 | ); 23 | } 24 | } 25 | 26 | export default Nav; 27 | -------------------------------------------------------------------------------- /src/components/Card.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | import Label from './Label'; 4 | 5 | import '../styles/Card.css'; 6 | 7 | class Card extends Component { 8 | render() { 9 | return ( 10 | 11 |

{this.props.title}

12 |

{this.props.description}

13 |
14 | {this.props.labels.map((label, idx) => ( 15 |
18 | 19 | ); 20 | } 21 | } 22 | 23 | export default Card; 24 | -------------------------------------------------------------------------------- /src/components/Banner.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | import '../styles/Banner.css'; 4 | 5 | class Banner extends Component { 6 | render() { 7 | return ( 8 |
9 |

10 | If you liked this list, you can support me by downloading my first React Native app: 11 | {' '} 12 | 16 | ⚛ Science News 17 | 18 | . Thank you! 19 |

20 |
21 | ); 22 | } 23 | } 24 | 25 | export default Banner; 26 | -------------------------------------------------------------------------------- /src/styles/Nav.css: -------------------------------------------------------------------------------- 1 | .Nav { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | flex-wrap: wrap; 6 | width: 60%; 7 | margin-top: 3rem; 8 | font-size: 1.8rem; 9 | } 10 | 11 | .Nav-navlink { 12 | padding: 0.75rem 1.25rem; 13 | margin: 5px; 14 | text-decoration: none; 15 | background: #ffffff; 16 | border: 1px solid rgba(143, 155, 179, 0.16); 17 | border-radius: 3px; 18 | color: #7289da; 19 | } 20 | .Nav-navlink:hover, 21 | .active { 22 | color: #ffffff; 23 | background: #7289da; 24 | box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); 25 | } 26 | 27 | @media screen and (max-width: 768px) { 28 | .Nav { 29 | width: 95%; 30 | font-size: 1.6rem; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | Front-end Resources 17 | 18 | 19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /src/styles/Card.css: -------------------------------------------------------------------------------- 1 | .Card { 2 | height: auto; 3 | width: 30%; 4 | box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05); 5 | display: inline-flex; 6 | flex-direction: column; 7 | border-radius: 5px; 8 | padding: 1.5rem; 9 | margin: 1rem 1.5rem; 10 | background: #ffffff; 11 | cursor: pointer; 12 | text-decoration: none; 13 | color: #000000; 14 | } 15 | .Card:hover { 16 | transform: scale(1.05); 17 | box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); 18 | } 19 | 20 | .Card-title { 21 | font-size: 1.8rem; 22 | margin-bottom: 3px; 23 | } 24 | 25 | .Card-description { 26 | font-size: 1.6rem; 27 | margin-bottom: 5px; 28 | color: #8f9bb3; 29 | } 30 | 31 | @media screen and (max-width: 976px) { 32 | .Card { 33 | width: 40%; 34 | } 35 | } 36 | 37 | @media screen and (max-width: 768px) { 38 | .Card { 39 | width: 100%; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/styles/Resources.css: -------------------------------------------------------------------------------- 1 | .Resources { 2 | background: rgba(114, 137, 218, 0.05); 3 | padding: 5rem 3rem 1rem 3rem; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | } 9 | 10 | .Resources-heading { 11 | text-align: center; 12 | margin-bottom: 3rem; 13 | font-size: 2.5rem; 14 | text-transform: uppercase; 15 | } 16 | 17 | .Resources-card-container { 18 | display: flex; 19 | justify-content: space-evenly; 20 | flex-wrap: wrap; 21 | width: 100%; 22 | max-width: 1366px; 23 | } 24 | 25 | .Resources-filler { 26 | width: 30%; 27 | margin: 1.5rem; 28 | } 29 | 30 | @media screen and (max-width: 976px) { 31 | .Resources { 32 | padding: 5rem 2rem 0 2rem; 33 | } 34 | 35 | .Resources-filler { 36 | width: 40%; 37 | } 38 | } 39 | 40 | @media screen and (max-width: 768px) { 41 | .Resources-filler { 42 | height: 0; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/styles/App.css: -------------------------------------------------------------------------------- 1 | .App-header { 2 | text-align: center; 3 | min-height: 25rem; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | padding: 5rem 0; 9 | } 10 | 11 | .App-icon { 12 | height: 15rem; 13 | width: auto; 14 | } 15 | 16 | .App-heading { 17 | font-size: 3rem; 18 | font-weight: 700; 19 | } 20 | 21 | .App-subheading { 22 | color: #8f9bb3; 23 | width: 85%; 24 | font-size: 2rem; 25 | margin-top: 0.5rem; 26 | margin-bottom: 2rem; 27 | } 28 | 29 | .App-button-container { 30 | display: flex; 31 | } 32 | 33 | .App-button-divider { 34 | width: 1rem; 35 | } 36 | 37 | .App-footer { 38 | height: 7.5rem; 39 | display: flex; 40 | flex-direction: column; 41 | justify-content: center; 42 | align-items: center; 43 | font-size: 1.4rem; 44 | } 45 | .App-footer a, 46 | .App-footer a:visited { 47 | text-decoration: none; 48 | color: #000000; 49 | font-weight: 600; 50 | } 51 | 52 | @media screen and (max-width: 768px) { 53 | .App-heading { 54 | font-size: 2.4rem; 55 | } 56 | 57 | .App-subheading { 58 | font-size: 1.6rem; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Val Lipat 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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend-resources", 3 | "version": "0.1.0", 4 | "homepage": "https://vlipatdev.github.io/frontend-resources", 5 | "private": true, 6 | "dependencies": { 7 | "gh-pages": "^2.2.0", 8 | "react": "^16.13.1", 9 | "react-dom": "^16.13.1", 10 | "react-router-dom": "^5.2.0", 11 | "react-scripts": "^3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject", 18 | "predeploy": "npm run build", 19 | "deploy": "gh-pages -d build" 20 | }, 21 | "eslintConfig": { 22 | "extends": "react-app" 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | }, 36 | "devDependencies": { 37 | "eslint-config-airbnb": "^18.1.0", 38 | "eslint-config-airbnb-base": "^14.1.0", 39 | "eslint-plugin-import": "^2.20.2", 40 | "eslint-plugin-jsx-a11y": "^6.2.3", 41 | "eslint-plugin-react": "^7.20.0", 42 | "eslint-plugin-react-hooks": "^2.5.1" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/components/Resources.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Redirect } from 'react-router-dom'; 3 | 4 | import Card from './Card'; 5 | 6 | import '../styles/Resources.css'; 7 | 8 | class Resources extends Component { 9 | render() { 10 | const idx = this.props.data.findIndex( 11 | (el) => el.type.toLowerCase() === this.props.match.params.name 12 | ); 13 | 14 | if (idx === -1) { 15 | return ; 16 | } else { 17 | return ( 18 |
19 |

{this.props.match.params.name}

20 |
21 | {this.props.data[idx].resources.map((el, idx) => ( 22 | 29 | ))} 30 |