React.js Github API User Profile Card in Browser Using Javascript Full Project For Beginners

 

 

Welcome folks today in this blog post we will be building a github api profile card in browser using react.js and javascript. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>

 

 

 

style.css

 

 

@import url("https://fonts.googleapis.com/css?family=Lato:400,700,900");
* {
  box-sizing: border-box;
}
body {
  margin-top: 2rem;
  font-family: 'Lato', sans-serif;
  background: #00b9ce;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  font-size: 1.1rem;
}
.searchbox {
  max-width: 20rem;
  margin: 1rem auto;
}
.searchbox__input {
  height: 3rem;
  width: 100%;
  box-shadow: none;
  border: none;
  padding: 0 1rem;
  color: #003d44;
  border-radius: 0.2rem;
}
.searchbox__button {
  width: 100%;
  padding: 1rem 2rem;
  border: none;
  margin: 1rem 0 0 0;
  background: #11e7ff;
  color: #006b77;
  font-weight: 700;
  border-radius: 0.4rem;
}
.searchbox__button:hover {
  background: #00def6;
}
.card {
  position: relative;
  background: #00b0c3;
  max-width: 20rem;
  margin: 7rem auto 2rem;
  border: solid 5px #09a;
  border-radius: 0.4rem;
  padding: 5.5rem 2.5rem 1rem;
}
.card__avatar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10rem;
  height: auto;
  text-align: center;
  margin: 0 auto;
  display: block;
  border-radius: 50%;
  background: #09a;
  padding: 5px;
  max-width: 100%;
  transition: 0.2s;
}
.card__avatar:hover {
  background: #008290;
}
.card__username {
  font-size: 2rem;
  font-weight: 900;
  text-align: center;
  margin: 1rem auto;
}
.card__link {
  color: #fff;
  border-bottom: solid 2px #fff;
  text-decoration: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.card__link:hover {
  opacity: 0.8;
}
.card__notfound {
  text-align: center;
  margin: 0 auto;
  padding: 1rem;
}
/* some non-BEM stuff to avoid overloading the JSX for demo purposes */
dl {
  margin: 0;
  padding: 0;
}
dt,
dd {
  text-align: center;
}
dt {
  font-weight: 900;
  margin-bottom: 0.2rem;
}
dd {
  margin: 0 0 1rem 0;
}

 

See also  React.js Embed Instagram Media on Website Using react-instagram-media Library Full Tutorial with Examples

 

 

script.js

 

 

"use strict";

const Component = React.Component;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: 'simonswiss',
      realName: '',
      avatar: '',
      location: '',
      repos: '',
      followers: '',
      url: '',
      notFound: ''
    };
  }

  render() {
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SearchBox, {
      fetchUser: this.fetchUser.bind(this)
    }), /*#__PURE__*/React.createElement(Card, {
      data: this.state
    }));
  } // the api request function


  fetchApi(url) {
    fetch(url).then(res => res.json()).then(data => {
      // update state with API data
      this.setState({
        username: data.login,
        realName: data.name,
        avatar: data.avatar_url,
        location: data.location,
        repos: data.public_repos,
        followers: data.followers,
        url: data.html_url,
        notFound: data.message
      });
    }).catch(err => console.log('oh no!'));
  }

  fetchUser(username) {
    let url = `https://api.github.com/users/${username}`;
    this.fetchApi(url);
  }

  componentDidMount() {
    let url = `https://api.github.com/users/${this.state.username}`;
    this.fetchApi(url);
  }

}

class SearchBox extends Component {
  render() {
    return /*#__PURE__*/React.createElement("form", {
      className: "searchbox",
      onSubmit: this.handleClick.bind(this)
    }, /*#__PURE__*/React.createElement("input", {
      ref: "search",
      className: "searchbox__input",
      type: "text",
      placeholder: "type username..."
    }), /*#__PURE__*/React.createElement("input", {
      type: "submit",
      className: "searchbox__button",
      value: "Search GitHub User"
    }));
  }

  handleClick(e) {
    e.preventDefault();
    let username = this.refs.search.getDOMNode().value; // sending the username value to parent component to fetch new data from API

    this.props.fetchUser(username);
    this.refs.search.getDOMNode().value = '';
  }

}

class Card extends Component {
  render() {
    let data = this.props.data;

    if (data.notFound === 'Not Found') {
      // when username is not found...
      return /*#__PURE__*/React.createElement("h3", {
        className: "card__notfound"
      }, "User not found. Try again!");
    } else {
      // if username found, then...
      return /*#__PURE__*/React.createElement("div", {
        className: "card"
      }, /*#__PURE__*/React.createElement("a", {
        href: data.url,
        target: "_blank"
      }, /*#__PURE__*/React.createElement("img", {
        className: "card__avatar",
        src: data.avatar
      })), /*#__PURE__*/React.createElement("h2", {
        className: "card__username"
      }, /*#__PURE__*/React.createElement("a", {
        className: "card__link",
        href: data.url,
        target: "_blank"
      }, data.username)), /*#__PURE__*/React.createElement("dl", null, /*#__PURE__*/React.createElement("dt", null, "Real name"), /*#__PURE__*/React.createElement("dd", null, data.realName), /*#__PURE__*/React.createElement("dt", null, "Location"), /*#__PURE__*/React.createElement("dd", null, data.location), /*#__PURE__*/React.createElement("dt", null, "Number of public repos"), /*#__PURE__*/React.createElement("dd", null, data.repos), /*#__PURE__*/React.createElement("dt", null, "Number of followers"), /*#__PURE__*/React.createElement("dd", null, data.followers)));
    }
  }

}

React.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('app'));

Leave a Reply