tvanantwerp / github-user-search

Site for searching public GitHub users and their data.

GitHub User Search

This is a Next.js app that uses Apollo to query GitHub's GraphQL API to search for users and organizations. See it in action here.

Authentication

Queries to the GitHub API are currently handled with a Personal Access Token with the minimum permissions required to access information about users and organizations returned from search queries.

App Structure

While Next.js has some very useful server-side generation abilities, this app does not use them. Queries to the GitHub API are instead made client-side. The primary reason for this approach is that there are 72,800,732 possible results (as of writing), and I do not wish to statically render that many pages. Nor do I wish to have a Next.js app running on a server to render pages as requested, as this app is meant to be deployed to a static host like Netlify.

User Details

A user's details can be viewed at /user/:username, which is linked to from the individual search results.

Contribution history queries cannot exceed a year's worth of time, so only the latest year is currently displayed. I may update this to simply query every possible year separately, but it's not so terribly important right now.

Aesthetics

Design inspired by each of these three Dribbble shots.

github-user-search's Issues

Build out user details pages

Add page for keeping track of specific searches and results

Something like /search/:username. Link it up to individual profile pages so you can easily get back to your previous search.

Debounce the search function

The API is queried with every keystroke to the search box. Debouncing it such that it waits for the user to stop typing first will reduce unnecessary API calls considerably.

Add meta images for social sharing

Refactor user and org detail pages to be more DRY

Prevent running query on index page initial render

Need to use something like useRef to not trigger getData if it's the first render.

Add pagination to search

Build out org details pages