GraphQL, React, and TypeScript. What we are building

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Fullstack React with TypeScript Masterclass

  • [00:00 - 00:04] What are we building? In this chapter we'll create a GitHub GraphQL client that will run in the terminal.

    [00:05 - 00:14] It will allow the user to see the list of the repositories, issues and pull requests. The application will have a graphical UI made using Courses library.

    [00:15 - 00:21] On the main screen we'll disk information about the currently logged in user. We show the name of the user and the bio.

    [00:22 - 00:31] We'll have a navigation bar at the top with a list of resources that you can perform operations with. For example, repositories, issues and pull requests.

    [00:32 - 00:38] You'll be able to switch between screens by pressing keys on the keyboard. For example, you'll be able to open the issues by pressing I.

    [00:39 - 00:47] Then you'll be presented with a window giving you some options. C to create a new issue or L to see the list of existing issues.

    [00:48 - 00:55] If you press C, the application will open a form to enter a title and description for a new issue. Every issue belongs to a specific repository.

    [00:56 - 01:02] So you'll also have to specify a repository name. If you press L, you will see the list of available issues.

    [01:03 - 01:10] You'll be able to select an issue using the mouse. You can even use scroll, arrow keys or VIMK navigation using J and K.

    [01:11 - 01:23] After selecting an issue, you'll be able to press enter or click on it to open the browser and navigate to selected issue. Here for example, we've navigated to the test issue that I created while developing this application.

    [01:24 - 01:31] You'll be able to manage the pull requests and repositories in the similar manner. GitHub requires authentication to make API calls.

    [01:32 - 01:49] In our application, we'll be using the auth2 authentication flow. When you launch the application for the first time, it will open the browser and display the GitHub authentication page. After you authenticate, the application will store an authentication token and won't require you to repeat this process unless you remove the token from the key storage.

    [01:50 - 01:59] This key storage is specific to the operating system you use. It can be keychain on Mac, credential vault on Windows or secret service API or libsecret on Linux.