teaching machines

CS 347: Lab 21 – GitHubber

November 15, 2021 by . Filed under fall-2021, labs, webdev.

Dear students:

Welcome to lab. Now’s your chance to apply the ideas you read about. Find a partner and complete as much of the task below as you can. At the end of our time together, paste your files into Crowdsource in order to receive credit.

Task 1

Your task is to write a React/Redux app that shows GitHub repositories matching a query. The matches will be provided by GitHub’s REST API. The end product will look something like this:

In the terminal, create a new React app and move into its directory:

npx create-react-app githubber
cd githubber
npm install redux react-redux redux-thunk

The next three sections can be done in parallel. Split them up between team members.


Create store.js as was done in the reading. Define a reducer that accepts the current state and an action and yields the new state. For the moment, the reducer should not do anything interesting. Whatever the action, return the unmodified state.

For initial testing, prime your state with a structure like this:

const initialState = {
  matches: [
      full_name: 'twodee/fiction',
      description: 'This repository does not exist.',
      html_url: 'https://github.com/twodee/fiction',

Define a store using the reducer, this initial state, and the thunk middleware.


In index.js, add a Provider component and pass your store as a prop.


Define a Repository component in Repository.js. It receives a prop named repository, which is an object shaped like the example from the initial state shown above, having keys full_name, description, and html_url. Display the repository’s full name in an anchor tag and the repository’s description.


Your next task is to reach into the global store and turn its matches array into viewable components. Complete the following steps in App.js.

Next add a search box so the user can query for real repositories. Follow these steps:


Now that you’ve got the initial state showing, it’s time to add some actions to pull down new state from GitHub’s REST API. Complete the following steps.

When the user types in a query and hits the button, the fetch will update the store and automatically re-render the app and display the matching repositories.


The next step of your learning is to complete the following tasks:

See you next time.