VSCode GitHub Projects

VSCode GitHub Projects

- 2 mins

Table of Contents:


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:

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.

Extension Screenshot

Sample Screenshot

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

Extension Screenshot

Editing a Project Card

How is it built?

Extension Architecture

Software Architecture

GraphQL Schema

GraphQL Schema
Description Type Link
Demo YouTube youtu.be/MycrfrHHz18/
Extension Visual Studio Marketplace Pod212.vscode-github-projects/
Submission Devpost devpost.com/software/vscode-github-projects/
Source Code GitHub MLH-Fellowship/vscode-github-projects/

Roadmap/Code/Documentation

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

Aitik Gupta

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

rss facebook twitter github gitlab gitlab youtube mail spotify lastfm instagram linkedin google google-plus pinterest medium vimeo telegram stackoverflow reddit quora quora key download slideshare speakerdeck googlescholar researchgate mendeley orcid impactstory figshare pubmed