Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
56 lines (33 sloc) 2.8 KB

Challenge Lab


  • Continue to build out this GitHub users app to add search functionality that finds GitHub usernames based upon a provided partial GitHub username's actual name.

  • For the UI, display a search form to the left of the existing form.

  • When the search form is submitted, display a new view that lists the matching usernames (the way we are listing repos would work well). Here's the result of searching for Jim Clark:

  • Clicking on a username in the resulting list would then perform the search and display the user info as the current version of the app does.


  • The index.js routes file might look something like this when you're done:

     router.get('/', githubCtrl.userDetails);'/', githubCtrl.userDetails);
     // new route for searching for a user'/search',;

    Note that we are able to use the same githubCtrl.userDetails controller action in both of these cases:

    • When a username is submitted as a POST / (implemented in the lesson)
    • Or, as part of this exercise, when one of the usernames in the above screenshot is clicked to submit a GET / with the username sent within a query string. How to enable this flexibility of being able to extract a username from either a form's POST or as a query string in userDetails is shown below...
  • Refactor by putting the code for the POST route in routes/index.js into a separate controller module. Refactoring will allow us to reuse the code from another route. The userDetails action might start like this:

     function userDetails(req, res) {
       // first get username in a POST scenario and then check 
       // in a GET scenario (req.query.username) 
       var username = req.body.username || req.query.username;
       if (!username) return res.render('index', {userData: null});

    Notice how this allows for reuse of the userDetails handler and the index.ejs view - whether a username is submitted or not!

  • Since the UI for displaying the results for the new name-based search functionality will be very similar to that of the GitHub username search, after you add the new name-based search form on the left-side of index.ejs, copy index.ejs to another view named something like search-results.ejs.

  • The new search will require using the GitHub API's user_search_url endpoint that accepts a ?q={query} query string.

  • Here are the search docs that explains how to search for users:

  • Use the in:fullname qualifier so that you can enter part of a name and find matches.

Collaboration with your fellow students is suggested - and so is having fun!