As a developer we spend a lot of our time exchanging files such as writeups, documentation, codes with our colleagues which takes a lot of our time and with that as a developer it always helps to get feedback on our code, design files and our writeups however there is no any centralized place where we can do that. Of course we have the amazing GitHub and it's Pull request review feature but a lot of time our codes and files are not ready to submit as a PR or are at times unrelated to the project such as design templates and that is where Codement comes in.

What it does

Codement is a vscode-extension and a developer tool that helps developers to share any files with any user straight from vs-code itself. It also provides an easy interface for the user to browse the files that is shared with them by other user and add feedback/comment on those files.

Few of our features are:

  • Sharing files with other user
  • Browsing files shared with you
  • Commenting on the files shared with you
  • View those comments

How we built it

First, we started off by designing our database and our extension UI for our backend server which helped us to get a clear picture of our application and helped us to create roadmap to build it.

Database Model

After that we used nodejs to build our backend server where we did all the user authentication, data handling and made various API end points to communicate with our vscode-extension. Finally we used javascript library called svelte and typescript to build the vscode-extension and made some webviews to help with file upload and downloads.

Challenges we ran into

Working with vscode api was something none of us had done before and we also had not worked with typescript and svelte before. So, one of the challenges we went through was undoubtedly the learning curve as it was really difficult for us to understand the entire workflow of vscode-extension which was very different that the workflow of web applications. Also, handling the dependency was very challenging and because of lack of community it was really difficult to debug various errors we went into as we had to be very heavily dependent on the documentation however it was an amazing learning experience. With that being a very distributed team with a very difficult time zones it was really difficult to collaborate so we made a point of using the best GitHub practices for collaboration which helped us a lot.

Accomplishments that we're proud of

Being very new to all of the tech stacks that we used we are super proud that we were able to build a working prototype of our extension with all the key features in such a time frame and a product which we will actually be using ourselves in future. Also, we are proud of the fact that were able to learn so much in such a short timeframe,

What we learned

  • Collaborating with a very distributed team using GitHub best practices
  • Making vscode extension using typescript and svelte
  • Using GitHub API authentication
  • Using vscode API

What's next for Codement

  • As of now user can only send and comment on one file at a time so we want to add a feature where user can select number of files and send them all.
  • As of now comments are shown to user in the sideview pane of vscode but we want to add a feature where comments are shown in the code file itself.
  • Improve our UI
  • Publishing our package

Built With

Share this project: