VSCode GitHub Projects

Saturday. February 27, 2021 - 2 mins

Table of Contents:

• Insipiration
• Video Demonstration (YouTube)
• What are GitHub Projects?
• What does the extension do?
• How is it built?
• Project Links
• Roadmap/Code/Documentation

---

This project was completed as a part of Sprint 0 Hackathon conducted during the MLH-Fellowship (Spring 2021).

Insipiration

There are several utilities from GitHub that makes collaboration easy, GitHub Projects is one of them.

Currently, there is no UI-based extension that integrates GitHub Projects in VSCode. Hence, our team (Me, Dean Gladish, Samuel Yuan and Shrill Shrestha) decided to make one.

A quick spoiler: we won!

Video Demonstration (YouTube)

What are GitHub Projects?

GitHub Projects are divided into 3 scopes:

• User Scope
• Repository Scope
• Organisation Scope

One can create Kanban boards with any of these scopes to track the progress of a project. A typical card maintained on a project board can contain anything from a simple note to linked Issues and Pull Requests.

What does the extension do?

The extension we built communicates with GitHub’s backend using GraphQL API - Queries and Mutations, to render a WebView built by Svelte on VSCode with it’s native UI.

The result is an integration of realtime communication between VSCode native UI and GitHub Projects. It allows a user to:

1. View the Projects (with filtered scopes)
2. View the Project Boards
3. Add a Project Card
4. Delete a Project Card
5. Archive a Project Card
6. Move a Project Card to a different Column
7. Edit a Project Card (Only if it is a Note)
8. Convert a Project Card ** into an Issue**
9. Visit the web version of the linked Issues/Pull Requests

How is it built?

• WebViews built with Svelte
• Queries/Mutations with GitHub using GraphQL (Apollo client)
• Session-based GitHub OAuth
• Communication with native VSCode APIs with TypeScript

Project Links

Roadmap/Code/Documentation

The repository is open sourced at MLH-Fellowship’s GitHub.

Aitik Gupta

I go by @aitikgupta throughout the web! \o/

Share