Andrew playing the guitar

Andrew Kao

drewcodes@gmail.com

Github User Search

React Web App


A React project built using Github’s user and repository API.

Demo: Github User Search


 

Project Scope

This project was to build a search application utilizing Github’s API. The application would allow you to search for a user, via a username, and return the user’s name, avatar and a listing of all the repos that the user has on Github.

The app could be built in a number of ways, but for this particular project, I am building with React. React has that polished, client-side experience that users enjoy where the application doesn’t require reloading. Reloading and routing to different pages can be expensive in terms of processing and rendering time. To minimize this, React would simply perform all the rendering on the client side.

Planning in React

React is a great technology to build with if you plan appropriately. I know that sometimes you can’t account for everything, but it’s always best to define the scope of your project and determine what’s going to be the best way to achieve the goals you’ve set.

Since this project was based around searching through GitHub’s API, I needed to plan out the components needed to make the API calls and components to render the results to. It helps if you draw out the React app on paper or wireframe the design before starting to code out the app. It will help you visually identify which components are needed for this app to function. Below is a visual of what layout I wanted to use for this application. The red text highlights what each component is and the numeric order is how I chose to list them within the parent component.

Laying out the components for the Github Search app.

 

In React, you have to a few things to keep track of. The first is the passing of props down to the children components and the second is the calling of methods in parent components to manipulate props. Because of this, the first component to be laid out would be the Github search parent component. This component would include an initial state that would create an object to store information (or props) to be used throughout the app. The parent component will also define methods that can be passed to children components and executed when they are invoked by the children components.

The starting point of the Github Search app.

API Call

Since this application will be making use of Github’s API call, it is important to place the API call somewhere in the application. In this case, I chose to place the call within a method defined in the parent component. This call would only be invoked when the search button is clicked or the user presses “Enter” on their keyboard. The component that contains the search bar and submission button would initiate the method and run the method’s call to the API. Below is the method defined below, called “handleSearching”:

 

A method defined for making a $.getJSON call to the API when a username has been submitted.

 

The Search component that renders the input box and submission button. Line 80 includes a call for the handleSearching method when the form is submitted.

 

Once the call is initiated, the information would be sent back in the form of a JSON object. Since we initially set the state of application to include an object of key/value pairs, we simply need to just assign the appropriate data to each key as seen on Lines 28 to 31 in the above screenshot. Once assigned, we can later access these keys to populate our User Badge component with the user’s name, avatar and their following/followers information as shown below:

 

User Badge component that is used to render the user’s information after the API call is successful.

 

Github also has a separate API for looking up repositories from a user. Since it’s not attached to the first API, I have to repeat the call for the second API to retrieve the data on a user’s set of repos. The second API call is actually shorter, since we’re just retrieving one array of objects.

 

The data that gets returned gets set to the state’s repos key.

 

Mapping

The data returned from the second API call is an array of objects. Unfortunately, you can’t really loop through the objects to access the data needed for rendering the list of repos. The method preferred by React is to map through the array of objects.

Why map?

Well, for starters, we don’t really know how many objects an array contains. It could be 1 or it could be 1,000,000 objects. The second problem is we can’t loop through the objects to render each repo listing to the UI. By using the .map() method, we can run through the entire array of objects and tell .map() what to return to us.

In this case, we want to retrieve each repo’s information and display them into a list of cards that appear on the user’s screen. Below is a screenshot of the RepoList component that only appears when the API call is successful and available to the component via props:

The map method will generate a new div element with all the repo information for each object it encounters in the array.

 

Finally, the components are all nested inside of the GithubSearch parent component and then rendered to the HTML page in a dedicated container.

 

Parent component with props being passed to children components.

 

Final rendering of the app to the HTML container.