404: Not Found

, container); 11 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Platzi Badges 8 | 9 | 10 | 11 |

12 | 13 | 14 | -------------------------------------------------------------------------------- /src/components/Layout.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Navbar from './Navbar'; 4 | 5 | function Layout(props) { 6 | // const children = props.children; 7 | 8 | return ( 9 | 10 | 11 | {props.children} 12 | 13 | ); 14 | } 15 | 16 | export default Layout; 17 | -------------------------------------------------------------------------------- /src/components/styles/Navbar.css: -------------------------------------------------------------------------------- 1 | .Navbar { 2 | width: 100%; 3 | padding: 0.5rem 0; 4 | background-color: #1C3643; 5 | } 6 | 7 | .Navbar__brand { 8 | color: #ffffff; 9 | 10 | display: flex; 11 | align-items: center; 12 | } 13 | 14 | .Navbar__brand:hover { 15 | color: #ffffff; 16 | text-decoration: none; 17 | } 18 | 19 | .Navbar__brand-logo { 20 | margin-right: 0.5rem; 21 | } -------------------------------------------------------------------------------- /.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/components/styles/BadgesList.css: -------------------------------------------------------------------------------- 1 | .BadgesList ul>li { 2 | margin-bottom: 1rem; 3 | } 4 | 5 | .BadgesListItem { 6 | background: #FFFFFF; 7 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.23); 8 | border-radius: 5px; 9 | display: flex; 10 | padding: 1rem; 11 | } 12 | 13 | .BadgesListItem__avatar { 14 | border-radius: 50%; 15 | background: #a3a3a3; 16 | margin-right: 0.5rem; 17 | width: 80px; 18 | height: 80px; 19 | } -------------------------------------------------------------------------------- /src/pages/styles/Home.css: -------------------------------------------------------------------------------- 1 | .Home { 2 | width: 100%; 3 | min-height: calc(100vh - 60px); 4 | background: url('../../images/stars.svg'), #1B1B25; 5 | background-repeat: repeat; 6 | 7 | color: #ffffff; 8 | 9 | display: flex; 10 | align-items: center; 11 | } 12 | 13 | .Home__col { 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | 20 | @media screen and (min-width: 768px) { 21 | .Home__col { 22 | align-items: flex-start; 23 | } 24 | } -------------------------------------------------------------------------------- /src/pages/styles/Badges.css: -------------------------------------------------------------------------------- 1 | .Badges__hero { 2 | width: 100%; 3 | padding: 2rem 0; 4 | background: url('../../images/stars.svg'), #1B1B25; 5 | background-repeat: repeat; 6 | margin-bottom: 1rem; 7 | } 8 | 9 | .Badges__hero>.Badges__container { 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | } 14 | 15 | .Badges__container { 16 | width: 100%; 17 | max-width: 580px; 18 | margin: 0 auto; 19 | padding: 0 1rem; 20 | } 21 | 22 | .Badges_conf-logo { 23 | margin-bottom: 2rem; 24 | } 25 | 26 | .Badges__buttons { 27 | display: flex; 28 | justify-content: flex-end; 29 | margin-bottom: 1rem; 30 | } -------------------------------------------------------------------------------- /src/components/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | import './styles/Navbar.css'; 5 | import logo from '../images/logo.svg'; 6 | 7 | class Navbar extends React.Component { 8 | render() { 9 | return ( 10 |

11 |

12 | 13 |

14 | Platzi 15 | Conf 16 | 17 |

18 |

19 | ); 20 | } 21 | } 22 | 23 | export default Navbar; 24 | -------------------------------------------------------------------------------- /src/components/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BrowserRouter, Switch, Route } from 'react-router-dom'; 3 | 4 | import Layout from './Layout'; 5 | import Home from '../pages/Home'; 6 | import Badges from '../pages/Badges'; 7 | import BadgeNew from '../pages/BadgeNew'; 8 | import NotFound from '../pages/NotFound'; 9 | 10 | function App() { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | ); 23 | } 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "platzi-badges", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "npm-run-all -p client server", 7 | "client": "react-scripts start", 8 | "server": "json-server --port 3001 --watch server/db.json", 9 | "seed": "node server/seed.js", 10 | "build": "react-scripts build", 11 | "test": "react-scripts test", 12 | "eject": "react-scripts eject" 13 | }, 14 | "dependencies": { 15 | "bootstrap": "4.3.1", 16 | "react": "16.8.3", 17 | "react-dom": "16.8.3", 18 | "react-router-dom": "4.3.1", 19 | "react-scripts": "2.1.5" 20 | }, 21 | "devDependencies": { 22 | "faker": "^4.1.0", 23 | "json-server": "^0.14.2", 24 | "npm-run-all": "^4.1.5" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": [ 30 | ">0.2%", 31 | "not dead", 32 | "not ie <= 11", 33 | "not op_mini all" 34 | ] 35 | } -------------------------------------------------------------------------------- /server/seed.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | const faker = require('faker'); 4 | const md5 = require('md5'); 5 | 6 | function createBadges(limit = 50) { 7 | const result = []; 8 | 9 | for (let i = 0; i < limit; i++) { 10 | const firstName = faker.name.firstName(); 11 | const lastName = faker.name.lastName(); 12 | const email = faker.internet.email(); 13 | 14 | result.push({ 15 | id: faker.random.uuid(), 16 | firstName, 17 | lastName, 18 | email, 19 | jobTitle: faker.name.jobTitle(), 20 | twitter: `${firstName}${lastName}${faker.address.zipCode()}`, 21 | avatarUrl: `https://www.gravatar.com/avatar/${md5(email)}?d=identicon`, 22 | }); 23 | } 24 | 25 | return result; 26 | } 27 | 28 | function main() { 29 | const data = { 30 | badges: createBadges(), 31 | }; 32 | 33 | fs.writeFileSync( 34 | path.resolve(__dirname, 'db.json'), 35 | JSON.stringify(data, null, 4) 36 | ); 37 | } 38 | 39 | main(); 40 | -------------------------------------------------------------------------------- /src/components/Badge.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './styles/Badge.css'; 4 | import confLogo from '../images/badge-header.svg'; 5 | 6 | class Badge extends React.Component { 7 | render() { 8 | return ( 9 |

10 |

11 |

12 |

13 | 14 |

15 |

20 |

21 | {this.props.firstName}
{this.props.lastName} 22 |

23 |

24 | 25 |

26 |

{this.props.jobTitle}

27 |

@{this.props.twitter}

28 |

29 | 30 |

#platziconf

31 |

32 | ); 33 | } 34 | } 35 | 36 | export default Badge; 37 | -------------------------------------------------------------------------------- /src/components/styles/Badge.css: -------------------------------------------------------------------------------- 1 | .Badge { 2 | background: #FFFFFF; 3 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.10); 4 | border-radius: 8px 8px 8px 8px; 5 | overflow: hidden; 6 | height: 380px; 7 | } 8 | 9 | .Badge__header { 10 | padding: 0.5rem 0; 11 | height: 80px; 12 | background: #1B1B25; 13 | display: flex; 14 | justify-content: center; 15 | } 16 | 17 | .Badge__section-name { 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | padding: 1rem 0; 22 | } 23 | 24 | .Badge__section-info { 25 | display: flex; 26 | flex-direction: column; 27 | justify-content: center; 28 | align-items: center; 29 | padding: 0.5rem 0; 30 | background: #F4F4F7; 31 | } 32 | 33 | 34 | .Badge__avatar { 35 | border-radius: 50%; 36 | margin-right: 1rem; 37 | width: 120px; 38 | height: 120px; 39 | } 40 | 41 | .Badge__footer { 42 | height: 54px; 43 | display: flex; 44 | justify-content: center; 45 | align-items: center; 46 | color: #98CA3F; 47 | font-weight: bold; 48 | font-style: italic; 49 | } -------------------------------------------------------------------------------- /src/components/BadgesList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './styles/BadgesList.css'; 4 | 5 | class BadgesListItem extends React.Component { 6 | render() { 7 | return ( 8 |

9 |

14 | 15 |

16 | 17 | {this.props.badge.firstName} {this.props.badge.lastName} 18 | 19 |
@{this.props.badge.twitter} 20 |
21 | {this.props.badge.jobTitle} 22 |

23 |

24 | ); 25 | } 26 | } 27 | 28 | class BadgesList extends React.Component { 29 | render() { 30 | return ( 31 |

32 |

36 | 37 |

41 |

42 | ); 43 | } 44 | } 45 | 46 | export default BadgesList; 47 | -------------------------------------------------------------------------------- /src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | import './styles/Home.css'; 5 | import platziconfLogoImage from '../images/platziconf-logo.svg'; 6 | import astronautsImage from '../images/astronauts.svg'; 7 | 8 | export default class Home extends Component { 9 | render() { 10 | return ( 11 |

12 |

13 |

14 |

15 |

20 | 21 |

Badge Management System

22 | 23 | Start 24 | 25 |

26 | 27 |

28 |

33 |

34 |

35 |

36 |

37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/global.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700'); 2 | @import url('https://fonts.googleapis.com/css?family=Anton'); 3 | 4 | 5 | * { 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | body { 11 | font-family: 'Lato', 'Helvetica Neue', sans-serif; 12 | background-color: #F4F4F7; 13 | } 14 | 15 | h1 { 16 | font-family: 'Anton', sans-serif; 17 | } 18 | 19 | a.link-unstyled { 20 | color: inherit; 21 | } 22 | 23 | a.link-unstyled:hover { 24 | color: inherit; 25 | text-decoration: none; 26 | } 27 | 28 | .btn { 29 | padding: 0.375rem 2rem; 30 | } 31 | 32 | .btn.btn-primary { 33 | color: #fff; 34 | background-color: #7DCD40; 35 | border-color: #7DCD40; 36 | } 37 | 38 | .btn.btn-primary:not(:disabled):not(.disabled):hover { 39 | color: #fff; 40 | background-color: #7DCD40; 41 | border-color: #7DCD40; 42 | } 43 | 44 | .btn.btn-primary:not(:disabled):not(.disabled):active { 45 | color: #fff; 46 | background-color: #7DCD40; 47 | border-color: #7DCD40; 48 | } 49 | 50 | .btn.btn-primary:not(:disabled):not(.disabled):focus { 51 | box-shadow: 0 0 0 0.2rem rgba(125, 205, 64, 0.5); 52 | } 53 | 54 | .btn.btn-danger { 55 | color: #fff; 56 | background-color: #CD4040; 57 | border-color: #CD4040; 58 | } 59 | 60 | .btn.btn-danger:not(:disabled):not(.disabled):hover { 61 | color: #fff; 62 | background-color: #CD4040; 63 | border-color: #CD4040; 64 | } 65 | 66 | .btn.btn-danger:not(:disabled):not(.disabled):active { 67 | color: #fff; 68 | background-color: #CD4040; 69 | border-color: #CD4040; 70 | } 71 | 72 | .btn.btn-danger:not(:disabled):not(.disabled):focus { 73 | box-shadow: 0 0 0 0.2rem rgba(255, 64, 64, 0.5); 74 | } -------------------------------------------------------------------------------- /src/pages/BadgeNew.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './styles/BadgeNew.css'; 4 | import header from '../images/badge-header.svg'; 5 | import Badge from '../components/Badge'; 6 | import BadgeForm from '../components/BadgeForm'; 7 | 8 | class BadgeNew extends React.Component { 9 | state = { 10 | form: { 11 | firstName: '', 12 | lastName: '', 13 | email: '', 14 | jobTitle: '', 15 | twitter: '', 16 | }, 17 | }; 18 | 19 | handleChange = e => { 20 | this.setState({ 21 | form: { 22 | ...this.state.form, 23 | [e.target.name]: e.target.value, 24 | }, 25 | }); 26 | }; 27 | 28 | render() { 29 | return ( 30 | 31 |

32 |

33 |

34 | 35 |

36 |

37 |

38 | 46 |

47 | 48 |

49 | 53 |

54 |

55 |

56 | 57 | ); 58 | } 59 | } 60 | 61 | export default BadgeNew; 62 | -------------------------------------------------------------------------------- /src/components/BadgeForm.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class BadgeForm extends React.Component { 4 | handleClick = e => { 5 | console.log('Button was clicked'); 6 | }; 7 | 8 | handleSubmit = e => { 9 | e.preventDefault(); 10 | console.log('Form was submitted'); 11 | console.log(this.state); 12 | }; 13 | 14 | render() { 15 | return ( 16 |

17 |

New Attendant

18 | 19 | 79 |

80 | ); 81 | } 82 | } 83 | 84 | export default BadgeForm; 85 | -------------------------------------------------------------------------------- /src/pages/Badges.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | import './styles/Badges.css'; 5 | import confLogo from '../images/badge-header.svg'; 6 | import BadgesList from '../components/BadgesList'; 7 | 8 | class Badges extends React.Component { 9 | constructor(props) { 10 | super(props); 11 | console.log('1. constructor()'); 12 | 13 | this.state = { 14 | data: [], 15 | }; 16 | } 17 | 18 | componentDidMount() { 19 | console.log('3. componentDidMount()'); 20 | 21 | this.timeoutId = setTimeout(() => { 22 | this.setState({ 23 | data: [ 24 | { 25 | id: '2de30c42-9deb-40fc-a41f-05e62b5939a7', 26 | firstName: 'Freda', 27 | lastName: 'Grady', 28 | email: 'Leann_Berge@gmail.com', 29 | jobTitle: 'Legacy Brand Director', 30 | twitter: 'FredaGrady22221-7573', 31 | avatarUrl: 32 | 'https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon', 33 | }, 34 | { 35 | id: 'd00d3614-101a-44ca-b6c2-0be075aeed3d', 36 | firstName: 'Major', 37 | lastName: 'Rodriguez', 38 | email: 'Ilene66@hotmail.com', 39 | jobTitle: 'Human Research Architect', 40 | twitter: 'MajorRodriguez61545', 41 | avatarUrl: 42 | 'https://www.gravatar.com/avatar/d57a8be8cb9219609905da25d5f3e50a?d=identicon', 43 | }, 44 | { 45 | id: '63c03386-33a2-4512-9ac1-354ad7bec5e9', 46 | firstName: 'Daphney', 47 | lastName: 'Torphy', 48 | email: 'Ron61@hotmail.com', 49 | jobTitle: 'National Markets Officer', 50 | twitter: 'DaphneyTorphy96105', 51 | avatarUrl: 52 | 'https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon', 53 | }, 54 | ], 55 | }); 56 | }, 3000); 57 | } 58 | 59 | componentDidUpdate(prevProps, prevState) { 60 | console.log('5. componentDidUpdate()'); 61 | console.log({ 62 | prevProps: prevProps, 63 | prevState: prevState, 64 | }); 65 | 66 | console.log({ 67 | props: this.props, 68 | state: this.state, 69 | }); 70 | } 71 | 72 | componentWillUnmount() { 73 | console.log('6. componentWillUnmount'); 74 | clearTimeout(this.timeoutId); 75 | } 76 | 77 | render() { 78 | console.log('2/4. render()'); 79 | return ( 80 | 81 |

82 |

83 |

84 |

89 |

90 |

91 |

92 | 93 |

94 |

95 | 96 | New Badge 97 | 98 |

99 | 100 | 101 |

102 | 103 | ); 104 | } 105 | } 106 | 107 | export default Badges; 108 | -------------------------------------------------------------------------------- /src/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/images/platziconf-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/images/badge-header.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/images/astronauts.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /server/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "badges": [ 3 | { 4 | "id": "2de30c42-9deb-40fc-a41f-05e62b5939a7", 5 | "firstName": "Freda", 6 | "lastName": "Grady", 7 | "email": "Leann_Berge@gmail.com", 8 | "jobTitle": "Legacy Brand Director", 9 | "twitter": "FredaGrady22221-7573", 10 | "avatarUrl": "https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon" 11 | }, 12 | { 13 | "id": "d00d3614-101a-44ca-b6c2-0be075aeed3d", 14 | "firstName": "Major", 15 | "lastName": "Rodriguez", 16 | "email": "Ilene66@hotmail.com", 17 | "jobTitle": "Human Research Architect", 18 | "twitter": "MajorRodriguez61545", 19 | "avatarUrl": "https://www.gravatar.com/avatar/d57a8be8cb9219609905da25d5f3e50a?d=identicon" 20 | }, 21 | { 22 | "id": "63c03386-33a2-4512-9ac1-354ad7bec5e9", 23 | "firstName": "Daphney", 24 | "lastName": "Torphy", 25 | "email": "Ron61@hotmail.com", 26 | "jobTitle": "National Markets Officer", 27 | "twitter": "DaphneyTorphy96105", 28 | "avatarUrl": "https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon" 29 | }, 30 | { 31 | "id": "a9748581-dfdc-4a78-930d-5205a2ccef48", 32 | "firstName": "Tatyana", 33 | "lastName": "Von", 34 | "email": "Herminio.Schmeler@hotmail.com", 35 | "jobTitle": "Central Branding Representative", 36 | "twitter": "TatyanaVon35871-3686", 37 | "avatarUrl": "https://www.gravatar.com/avatar/98c382edd93414c1649b9db866000f97?d=identicon" 38 | }, 39 | { 40 | "id": "1921a734-cc05-4f71-a677-ffe38dda6958", 41 | "firstName": "Maude", 42 | "lastName": "Effertz", 43 | "email": "Dan_Weimann0@yahoo.com", 44 | "jobTitle": "Product Solutions Analyst", 45 | "twitter": "MaudeEffertz73114", 46 | "avatarUrl": "https://www.gravatar.com/avatar/01d0de92ec9ca4fdfbb99edf6a1abfea?d=identicon" 47 | }, 48 | { 49 | "id": "3629db36-14f9-4f24-b139-200f3a1b9af7", 50 | "firstName": "Breanna", 51 | "lastName": "Runolfsdottir", 52 | "email": "Laurianne.Lynch@gmail.com", 53 | "jobTitle": "Lead Marketing Director", 54 | "twitter": "BreannaRunolfsdottir70705-1477", 55 | "avatarUrl": "https://www.gravatar.com/avatar/684697e194c66d338c5ee91d030121cc?d=identicon" 56 | }, 57 | { 58 | "id": "8c734836-1f7a-4493-b903-37db30fc7224", 59 | "firstName": "Jan", 60 | "lastName": "Oberbrunner", 61 | "email": "Estella8@gmail.com", 62 | "jobTitle": "Regional Data Assistant", 63 | "twitter": "JanOberbrunner86906-8430", 64 | "avatarUrl": "https://www.gravatar.com/avatar/7a4de3ec254747b304a82a14270e72be?d=identicon" 65 | }, 66 | { 67 | "id": "04479bae-a34a-448e-bb20-a10920d48c1f", 68 | "firstName": "Kaelyn", 69 | "lastName": "Hoppe", 70 | "email": "Deshaun_Steuber@gmail.com", 71 | "jobTitle": "Senior Implementation Architect", 72 | "twitter": "KaelynHoppe15215", 73 | "avatarUrl": "https://www.gravatar.com/avatar/d5a91308668dd768e955e2efd0fcdb37?d=identicon" 74 | }, 75 | { 76 | "id": "a878c84d-8f49-45da-bbda-313503f9898f", 77 | "firstName": "Nova", 78 | "lastName": "Bergstrom", 79 | "email": "Darrell10@gmail.com", 80 | "jobTitle": "Lead Interactions Officer", 81 | "twitter": "NovaBergstrom48167", 82 | "avatarUrl": "https://www.gravatar.com/avatar/e65037a095cfcc6aec56cad1a2128207?d=identicon" 83 | }, 84 | { 85 | "id": "eb28f57f-6448-4d40-8f57-8db27831a605", 86 | "firstName": "Myrtle", 87 | "lastName": "Torphy", 88 | "email": "Torrance.Gaylord@yahoo.com", 89 | "jobTitle": "Lead Directives Liaison", 90 | "twitter": "MyrtleTorphy42588-6517", 91 | "avatarUrl": "https://www.gravatar.com/avatar/03b84b35e3a31f091a07910da97ff46a?d=identicon" 92 | }, 93 | { 94 | "id": "052e04c9-6386-400c-8794-c1ac8f794a75", 95 | "firstName": "Pamela", 96 | "lastName": "Ritchie", 97 | "email": "Daren95@yahoo.com", 98 | "jobTitle": "Legacy Operations Facilitator", 99 | "twitter": "PamelaRitchie48620", 100 | "avatarUrl": "https://www.gravatar.com/avatar/9ffc47916a084028d7a6436531077852?d=identicon" 101 | }, 102 | { 103 | "id": "4bbb7f45-e0be-4b7f-ab7c-101b3ecb2d04", 104 | "firstName": "Maynard", 105 | "lastName": "Huel", 106 | "email": "Chadd37@yahoo.com", 107 | "jobTitle": "Internal Group Analyst", 108 | "twitter": "MaynardHuel05078-8821", 109 | "avatarUrl": "https://www.gravatar.com/avatar/eec9b2ede8a775989ff71b5308ff52d7?d=identicon" 110 | }, 111 | { 112 | "id": "67565eb7-9738-4dab-8b10-081d3dcff01d", 113 | "firstName": "Devin", 114 | "lastName": "Bartell", 115 | "email": "Dean80@hotmail.com", 116 | "jobTitle": "National Mobility Administrator", 117 | "twitter": "DevinBartell94456-3248", 118 | "avatarUrl": "https://www.gravatar.com/avatar/714a712dc155ccc6b0d825dbc258ec0d?d=identicon" 119 | }, 120 | { 121 | "id": "aa98596d-fea6-4686-90e1-93514b6dc011", 122 | "firstName": "Antwan", 123 | "lastName": "Walker", 124 | "email": "Isom.Zboncak@yahoo.com", 125 | "jobTitle": "Central Paradigm Executive", 126 | "twitter": "AntwanWalker03371-3341", 127 | "avatarUrl": "https://www.gravatar.com/avatar/45273652dd6323b8a2378e3208436180?d=identicon" 128 | }, 129 | { 130 | "id": "8758e3df-00a6-424c-8878-ff6106a6f029", 131 | "firstName": "Kayla", 132 | "lastName": "McCullough", 133 | "email": "Darrel.Stark@gmail.com", 134 | "jobTitle": "Legacy Branding Architect", 135 | "twitter": "KaylaMcCullough84105", 136 | "avatarUrl": "https://www.gravatar.com/avatar/97a40c4aa56899a85c07a94c247e6845?d=identicon" 137 | }, 138 | { 139 | "id": "62579a13-8ae5-4831-9138-871c00823f53", 140 | "firstName": "King", 141 | "lastName": "Hermiston", 142 | "email": "Pearl80@hotmail.com", 143 | "jobTitle": "Direct Usability Technician", 144 | "twitter": "KingHermiston36255", 145 | "avatarUrl": "https://www.gravatar.com/avatar/c4779957b19b80438e651f6ca4c2107e?d=identicon" 146 | }, 147 | { 148 | "id": "7f2257d9-7b17-4561-a68c-b04f33d778d4", 149 | "firstName": "Odessa", 150 | "lastName": "Watsica", 151 | "email": "Amy.Haag@hotmail.com", 152 | "jobTitle": "Internal Response Architect", 153 | "twitter": "OdessaWatsica41585-3744", 154 | "avatarUrl": "https://www.gravatar.com/avatar/5c087ff01757d13eb9c4a5254ab775a9?d=identicon" 155 | }, 156 | { 157 | "id": "6ffbc836-772b-430d-9576-74826557d073", 158 | "firstName": "Jamil", 159 | "lastName": "Fay", 160 | "email": "Guillermo_Murazik@yahoo.com", 161 | "jobTitle": "Central Quality Strategist", 162 | "twitter": "JamilFay04425", 163 | "avatarUrl": "https://www.gravatar.com/avatar/575212144322f08e35ba9ab0b43089da?d=identicon" 164 | }, 165 | { 166 | "id": "925952de-f43d-49c3-8e04-98f1c6b9e3e6", 167 | "firstName": "Jasen", 168 | "lastName": "Kulas", 169 | "email": "Frieda89@yahoo.com", 170 | "jobTitle": "Senior Research Consultant", 171 | "twitter": "JasenKulas35396-9255", 172 | "avatarUrl": "https://www.gravatar.com/avatar/0b7dc92c5cbcc2159b5ed9cb5d074867?d=identicon" 173 | }, 174 | { 175 | "id": "7b8ac914-bb9d-4649-9ddd-fe1de2b82e79", 176 | "firstName": "Paul", 177 | "lastName": "Miller", 178 | "email": "Dock5@gmail.com", 179 | "jobTitle": "Lead Solutions Designer", 180 | "twitter": "PaulMiller12518-9290", 181 | "avatarUrl": "https://www.gravatar.com/avatar/17c1b1c79e9dfcb34e45561f06d704e6?d=identicon" 182 | }, 183 | { 184 | "id": "f73bc968-7ac8-4ea8-a450-b1b7b9047030", 185 | "firstName": "Ozella", 186 | "lastName": "Schaefer", 187 | "email": "Reva.Rosenbaum@gmail.com", 188 | "jobTitle": "International Accountability Manager", 189 | "twitter": "OzellaSchaefer15358-7071", 190 | "avatarUrl": "https://www.gravatar.com/avatar/3725b48c55f614cd5e9466aa7c1101f8?d=identicon" 191 | }, 192 | { 193 | "id": "02c0eae9-96e3-4527-a2c2-f2274bb4f3cf", 194 | "firstName": "Rebeca", 195 | "lastName": "Heller", 196 | "email": "Jayce_Greenholt72@gmail.com", 197 | "jobTitle": "Product Directives Coordinator", 198 | "twitter": "RebecaHeller98352", 199 | "avatarUrl": "https://www.gravatar.com/avatar/44962f9da66827c0896a1e567a9d9669?d=identicon" 200 | }, 201 | { 202 | "id": "5f9b5d9f-4225-4706-b3b3-330762447071", 203 | "firstName": "Maynard", 204 | "lastName": "Rowe", 205 | "email": "Ressie79@yahoo.com", 206 | "jobTitle": "Dynamic Creative Engineer", 207 | "twitter": "MaynardRowe74584", 208 | "avatarUrl": "https://www.gravatar.com/avatar/4626f448a94e6d7c81c7bc3f7fc160da?d=identicon" 209 | }, 210 | { 211 | "id": "e559bea7-1457-4dcd-89c4-0b07b1fc03eb", 212 | "firstName": "Cathrine", 213 | "lastName": "Funk", 214 | "email": "Bailey.Koelpin38@gmail.com", 215 | "jobTitle": "District Marketing Agent", 216 | "twitter": "CathrineFunk84339", 217 | "avatarUrl": "https://www.gravatar.com/avatar/124ebc497cd4c3d05fd6151de5b8b8d7?d=identicon" 218 | }, 219 | { 220 | "id": "246ccd9c-d5d8-49be-9a9c-f3d10ed3c127", 221 | "firstName": "Theresa", 222 | "lastName": "Rice", 223 | "email": "Cornelius_Kris@hotmail.com", 224 | "jobTitle": "Dynamic Optimization Manager", 225 | "twitter": "TheresaRice47212", 226 | "avatarUrl": "https://www.gravatar.com/avatar/acc0c2cda0b3949624a6dde7ffa94ef1?d=identicon" 227 | }, 228 | { 229 | "id": "bae925d9-a591-436b-9b74-e0d72fe1ad70", 230 | "firstName": "Arno", 231 | "lastName": "Murphy", 232 | "email": "Elva_Kuhn@gmail.com", 233 | "jobTitle": "Corporate Division Strategist", 234 | "twitter": "ArnoMurphy10406", 235 | "avatarUrl": "https://www.gravatar.com/avatar/d7f60c716fefed867e6478ba28a49199?d=identicon" 236 | }, 237 | { 238 | "id": "72b9a910-be64-4c15-b916-c3b4cbc70bb2", 239 | "firstName": "Lewis", 240 | "lastName": "Kreiger", 241 | "email": "Juanita0@hotmail.com", 242 | "jobTitle": "Principal Integration Officer", 243 | "twitter": "LewisKreiger60407", 244 | "avatarUrl": "https://www.gravatar.com/avatar/c78ed3b6e05aa42603702c2fb08950e1?d=identicon" 245 | }, 246 | { 247 | "id": "be1f4d67-9c83-4e01-8991-514e3af047b3", 248 | "firstName": "Makenzie", 249 | "lastName": "Effertz", 250 | "email": "Charles.Parker56@yahoo.com", 251 | "jobTitle": "Global Quality Orchestrator", 252 | "twitter": "MakenzieEffertz56304", 253 | "avatarUrl": "https://www.gravatar.com/avatar/ea9dcdb8b7f12c063f3bf4837f495063?d=identicon" 254 | }, 255 | { 256 | "id": "d197cc17-70bd-4052-a8ff-14697cce07a2", 257 | "firstName": "Alda", 258 | "lastName": "Mayert", 259 | "email": "Royal_Mraz@hotmail.com", 260 | "jobTitle": "Internal Interactions Analyst", 261 | "twitter": "AldaMayert61781", 262 | "avatarUrl": "https://www.gravatar.com/avatar/b6ba63c9ce0aff74406d3c7cef514678?d=identicon" 263 | }, 264 | { 265 | "id": "29b5a744-5d7f-4d33-b9fd-c8ca639dc030", 266 | "firstName": "Karl", 267 | "lastName": "Dietrich", 268 | "email": "Haleigh.Rempel94@yahoo.com", 269 | "jobTitle": "Future Research Engineer", 270 | "twitter": "KarlDietrich34710-7990", 271 | "avatarUrl": "https://www.gravatar.com/avatar/b7cad398bf44ade9fa2937e0fa5dcf3e?d=identicon" 272 | }, 273 | { 274 | "id": "026ed6ef-ead2-4dbd-a4b2-fc745ff694d7", 275 | "firstName": "Everette", 276 | "lastName": "Shields", 277 | "email": "Ulises_Graham61@yahoo.com", 278 | "jobTitle": "National Mobility Executive", 279 | "twitter": "EveretteShields32433-7622", 280 | "avatarUrl": "https://www.gravatar.com/avatar/df9b246d695df4364326b060b7f9a694?d=identicon" 281 | }, 282 | { 283 | "id": "9919739d-7362-4b57-b76e-98546ec1b555", 284 | "firstName": "Doug", 285 | "lastName": "Roob", 286 | "email": "Pat.Rolfson@yahoo.com", 287 | "jobTitle": "Legacy Security Coordinator", 288 | "twitter": "DougRoob39203", 289 | "avatarUrl": "https://www.gravatar.com/avatar/705f2c8baba0753f69de366d10797d34?d=identicon" 290 | }, 291 | { 292 | "id": "92e7da01-75e1-401a-80ab-11e97d14f87a", 293 | "firstName": "Patricia", 294 | "lastName": "Koch", 295 | "email": "Eula98@yahoo.com", 296 | "jobTitle": "Legacy Paradigm Developer", 297 | "twitter": "PatriciaKoch50746", 298 | "avatarUrl": "https://www.gravatar.com/avatar/d7be7c9206d8bdf7b99a61802ef42bfc?d=identicon" 299 | }, 300 | { 301 | "id": "c5f4a4ec-8cc0-4c09-a8f2-a3780d740084", 302 | "firstName": "Helena", 303 | "lastName": "Kilback", 304 | "email": "Eryn2@gmail.com", 305 | "jobTitle": "Dynamic Directives Orchestrator", 306 | "twitter": "HelenaKilback49886-1693", 307 | "avatarUrl": "https://www.gravatar.com/avatar/b2e9d23a39f852ab3bc67bd9a0176464?d=identicon" 308 | }, 309 | { 310 | "id": "ea5640b9-3177-47bb-8fe4-25338c43e66c", 311 | "firstName": "Arno", 312 | "lastName": "Murphy", 313 | "email": "Raegan_Morar59@hotmail.com", 314 | "jobTitle": "Lead Intranet Architect", 315 | "twitter": "ArnoMurphy78604-9408", 316 | "avatarUrl": "https://www.gravatar.com/avatar/70b2d26d624ea573e2f4092d6656fe1f?d=identicon" 317 | }, 318 | { 319 | "id": "058d574c-4b67-4607-aae5-d00cfe257182", 320 | "firstName": "Emile", 321 | "lastName": "Paucek", 322 | "email": "Titus_Cremin15@yahoo.com", 323 | "jobTitle": "Internal Marketing Manager", 324 | "twitter": "EmilePaucek04688", 325 | "avatarUrl": "https://www.gravatar.com/avatar/6d395ba4955de273f3f28f9fa0a6641b?d=identicon" 326 | }, 327 | { 328 | "id": "3c7c327f-1aca-41eb-8592-9257eafef4a8", 329 | "firstName": "Rowan", 330 | "lastName": "Boehm", 331 | "email": "Jules_Mohr@hotmail.com", 332 | "jobTitle": "Central Applications Supervisor", 333 | "twitter": "RowanBoehm01351", 334 | "avatarUrl": "https://www.gravatar.com/avatar/aaeba9e2186e6ad7f22e2906cd2ce4fe?d=identicon" 335 | }, 336 | { 337 | "id": "231b5e7e-da6e-406b-9048-5431009038c4", 338 | "firstName": "Conrad", 339 | "lastName": "Ernser", 340 | "email": "Carey.Schamberger@hotmail.com", 341 | "jobTitle": "Chief Solutions Consultant", 342 | "twitter": "ConradErnser80604-5459", 343 | "avatarUrl": "https://www.gravatar.com/avatar/9e78e69fcc46747356b69141f5eea889?d=identicon" 344 | }, 345 | { 346 | "id": "3f118941-b1be-44d8-83c2-c83aadef9ca6", 347 | "firstName": "Kailee", 348 | "lastName": "Jast", 349 | "email": "Clement_Mills@hotmail.com", 350 | "jobTitle": "Dynamic Implementation Engineer", 351 | "twitter": "KaileeJast49404-0773", 352 | "avatarUrl": "https://www.gravatar.com/avatar/32d63888a2b07663fb337eab85b91398?d=identicon" 353 | }, 354 | { 355 | "id": "a181b291-ea1f-4296-b645-c1d5b2afc59c", 356 | "firstName": "Zane", 357 | "lastName": "Jones", 358 | "email": "Georgiana_Haag@gmail.com", 359 | "jobTitle": "National Accountability Architect", 360 | "twitter": "ZaneJones11425-2361", 361 | "avatarUrl": "https://www.gravatar.com/avatar/e37af7a0cae81e034172ef62c157d05c?d=identicon" 362 | }, 363 | { 364 | "id": "ec9c5695-3a42-45ef-a273-d4c80c0e8f27", 365 | "firstName": "Zoey", 366 | "lastName": "Wiegand", 367 | "email": "Friedrich_OConner35@yahoo.com", 368 | "jobTitle": "Future Accounts Technician", 369 | "twitter": "ZoeyWiegand43509", 370 | "avatarUrl": "https://www.gravatar.com/avatar/82d4628e093cad1bdcfb24e5eecd815d?d=identicon" 371 | }, 372 | { 373 | "id": "1c72396b-5dfc-4574-b36e-9ffdfebfba64", 374 | "firstName": "Ian", 375 | "lastName": "Heaney", 376 | "email": "Alexys.Gutkowski34@yahoo.com", 377 | "jobTitle": "Direct Optimization Specialist", 378 | "twitter": "IanHeaney66784", 379 | "avatarUrl": "https://www.gravatar.com/avatar/097d0e30a04e69b707b08cdad62ffdd2?d=identicon" 380 | }, 381 | { 382 | "id": "ff53b940-d5b3-4a66-ad78-af58a9323458", 383 | "firstName": "Eudora", 384 | "lastName": "Daugherty", 385 | "email": "Raina_Hettinger@yahoo.com", 386 | "jobTitle": "Global Metrics Technician", 387 | "twitter": "EudoraDaugherty44214-4039", 388 | "avatarUrl": "https://www.gravatar.com/avatar/e19db69107841cab64edd704fa177509?d=identicon" 389 | }, 390 | { 391 | "id": "9c2c7b04-532f-4c13-abbd-bcf694d9fe11", 392 | "firstName": "Leonie", 393 | "lastName": "Towne", 394 | "email": "Reyes.Senger@yahoo.com", 395 | "jobTitle": "Customer Markets Coordinator", 396 | "twitter": "LeonieTowne65019-2735", 397 | "avatarUrl": "https://www.gravatar.com/avatar/2418114906f2bea38d7485340a7f0461?d=identicon" 398 | }, 399 | { 400 | "id": "919f32ca-0d97-4639-8aca-8c4c888e6caf", 401 | "firstName": "Winifred", 402 | "lastName": "Thiel", 403 | "email": "Euna.Bartoletti@hotmail.com", 404 | "jobTitle": "Regional Metrics Administrator", 405 | "twitter": "WinifredThiel14630", 406 | "avatarUrl": "https://www.gravatar.com/avatar/b4f66246e7ff34e9a4a176fb58d6ecda?d=identicon" 407 | }, 408 | { 409 | "id": "43a0a0df-9a0a-4a56-aa0c-2efc3a2b5897", 410 | "firstName": "Reyna", 411 | "lastName": "Gislason", 412 | "email": "Roxanne47@yahoo.com", 413 | "jobTitle": "Central Marketing Director", 414 | "twitter": "ReynaGislason11792", 415 | "avatarUrl": "https://www.gravatar.com/avatar/570f8b0138bcb82537d55ab7732c8c4f?d=identicon" 416 | }, 417 | { 418 | "id": "98dd84a4-8dba-4a7d-87c2-3b9714372d2d", 419 | "firstName": "Jed", 420 | "lastName": "Sporer", 421 | "email": "Santiago.Roberts@yahoo.com", 422 | "jobTitle": "Dynamic Accounts Agent", 423 | "twitter": "JedSporer30424", 424 | "avatarUrl": "https://www.gravatar.com/avatar/4f164ea9a61e8d28e6b83a356d3ff5ae?d=identicon" 425 | }, 426 | { 427 | "firstName": "Richard", 428 | "lastName": "Kaufman López", 429 | "email": "richardbkaufman@gmail.com", 430 | "avatarUrl": "https://www.gravatar.com/avatar/21594ed15d68ace3965642162f8d2e84?d=identicon", 431 | "jobTitle": "Frontend Engineer @ Kickass Partners", 432 | "twitter": "sparragus", 433 | "id": "EYR2BVQ" 434 | }, 435 | { 436 | "firstName": "Carolynn", 437 | "lastName": "Kaufman", 438 | "email": "carolynn@example.com", 439 | "avatarUrl": "https://www.gravatar.com/avatar/580a552f26ac5e3a0817c3ecc5b9d690?d=identicon", 440 | "jobTitle": "Lawyer", 441 | "twitter": "ckaufmanpr", 442 | "id": "npaYZKI" 443 | } 444 | ] 445 | } -------------------------------------------------------------------------------- /src/images/stars.svg: -------------------------------------------------------------------------------- 1 | 2 | --------------------------------------------------------------------------------

404: Not Found

21 | {this.props.firstName} {this.props.lastName} 22 |

{this.props.jobTitle}

Badge Management System

New Attendant

21 | {this.props.firstName}
{this.props.lastName} 22 |