Giter Club home page Giter Club logo

patilankita79 / githubprofilefinder Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 10 KB

In this project, we can search GitHub users by their username and search query returns the user's profile information along with latest 5 repositories as you type in search query. Use of ES-7 features async/await and GitHub API

Home Page: https://githubfinder-5c0d4.firebaseapp.com/

JavaScript 74.43% HTML 25.57%
async-await es7-async promises fetch-api github-api bootswatch-theme github-oauth

githubprofilefinder's Introduction

Github Profile Finder

  • In 'Github Profile Finder', we can search GitHub users by their GitHub username and we will get user's profile information along with links to latest 5 repositories as you type in search query.
  • Every time you type something (every word), the application will make a request to github looking for the typed username [Use of keyup event] and respective user information matching the query will be displayed. If user not found, alert message will be displayed which will disappear after 3000 seconds.
  • The profile information will contain avatar, link to user's github profile along with his profile information such as his company, link to webite or blog, location and the his membership information.
  • The latest 5 repositories will be displayed along with link to repository and other related parameters such as number of stars, number of watchers, number of forks and the language used in the repository.
  • This application makes use of GitHub API and in order to make infinite request to GitHub API, you need to register the GitHub application and it can be registered at https://github.com/settings/applications/new
  • Once you register the application, you get client_id and client_secret information and with use of these keys in your application, you can make infinite request to GitHub API.
  • For normal testing purpose and to check the response, you can visit

For example, response of https://api.github.com/users/patilankita79

{
  "login": "patilankita79",
  "id": 22652292,
  "avatar_url": "https://avatars2.githubusercontent.com/u/22652292?v=4",
  "gravatar_id": "",
  "url": "https://api.github.com/users/patilankita79",
  "html_url": "https://github.com/patilankita79",
  "followers_url": "https://api.github.com/users/patilankita79/followers",
  "following_url": "https://api.github.com/users/patilankita79/following{/other_user}",
  "gists_url": "https://api.github.com/users/patilankita79/gists{/gist_id}",
  "starred_url": "https://api.github.com/users/patilankita79/starred{/owner}{/repo}",
  "subscriptions_url": "https://api.github.com/users/patilankita79/subscriptions",
  "organizations_url": "https://api.github.com/users/patilankita79/orgs",
  "repos_url": "https://api.github.com/users/patilankita79/repos",
  "events_url": "https://api.github.com/users/patilankita79/events{/privacy}",
  "received_events_url": "https://api.github.com/users/patilankita79/received_events",
  "type": "User",
  "site_admin": false,
  "name": "Ankita Patil",
  "company": "The University of Texas at Dallas",
  "blog": "https://www.linkedin.com/in/ankita-patil79/",
  "location": "Dallas, Texas",
  "email": null,
  "hireable": true,
  "bio": null,
  "public_repos": 70,
  "public_gists": 0,
  "followers": 17,
  "following": 81,
  "created_at": "2016-10-06T04:39:44Z",
  "updated_at": "2018-01-11T22:16:10Z"
}

Approach

Use of async/await and fetch API for asynchronous programming
  1. Register an application with GitHub at https://github.com/settings/applications/new and get an API key
  2. Building User Interface (index.html)
  • Use of Bootswatch (Free themes for Bootstrap 4)
  • Name of the theme used - Litera
  1. Fetching Profile Data from GitHub (github.js)
  • github.js takes care of reaching out to GitHub API using fetch API
  • Making use of 2 endpoints
  1. Render the profile information and latest repositories in DOM i.e in UI (ui.js)
  • UI class is used to handle inserting related tasks to DOM
  • Basically, ui.js is responsible for dynamically changing the UI as user types query.
  1. Show alert message in case we don't find the user profile with typed query.

Technology Stack or Concepts used

  • HTML5
  • JavaScript
  • Bootswatch
  • Text Editor: Atom
  • Deployment platform : firebase
  • API: GitHub API
  • Use of async/await, promises and fetch API

Deployment

The web application is hosted on firebase. Live Demo: https://githubfinder-5c0d4.firebaseapp.com/


Problems faced

  • Even if you don't register your application and get GitHub API key, you can still make a request to GitHub endpoints related to user and repo but only for certain amount of time. If you exceed request limit, so for particular time you might get forbidden error
  • To avoid the problem, I registered the application and got secret key and secret id and now I can make infinite requests to GitHub API

Using this application

If you download this application or clone this repository, do not forget to add your own client secret id and client secret key


References

githubprofilefinder's People

Contributors

patilankita79 avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.