💭 Inspiration

There are several functionalities from GitHub for easier collaboration. GitHub project is one of those functionalities where you can make kanban boards to track the progress of your project. Currently, there is no UI-based extension that integrates the GitHub project in VS code. Hence, we decided to make one.

🖥 What it does

It will help developers for easier navigation between the GitHub project's kanban board and their code. We don't have to go to GitHub every time we need to update the project status. Since we have a real-time connection with GitHub, any changes made locally and remotely will be reflected in the GitHub and extension accordingly.

🛠 How we built it

We used Typescript along with VSCode API to establish communication between extension and webview.

  • Webviews created with Svelte
  • Query GitHub data with GraphQL
  • Session-based GitHub OAuth

Diagram

Database

🛑 Challenges we ran into

Setting up a GitHub OAuth was a challenge. Svelte was something new for all of us, so getting used to it took some time.

🏆 Accomplishments that we're proud of

  • Learned a lot about Svelte and GraphQL
  • Learned more about creating PRs and reviewing (our main branch was protected)
  • Planed the project using UML diagrams and layer architecture diagrams

🧠 What we learned

We learned to use several VS code APIs to establish extension communication. We worked our frontend with Svelte and it was very interesting to learn a new JS framework. We learned to make session-based authorization using GitHub OAuth and pulled data from GitHub with GraphQL.

✏️ What's next for VSCode-GitHub-Projects

  • Create new projects/edit project name and description feature
  • Improve UI
  • Improved session management
  • Better GraphQL error handling
  • Polish/add certain features
  • Bugfixes

We're done!

Built With

Share this project:

Updates