Dev Friend

Gerald Akorli, Akshat Mangal and Jerry Zheng

View on GitHub →


It's very important to track your time while coding, to take breaks, and to get hydrated frequently. This inspired us to build a VS-Code extension to track the time developers spend coding and provide them with regular notifications about breaks and hydration.

What it does

  • It provides a stopwatch with start, pause, and reset functionalities.
  • The time the user spends coding for each day is stored into VS-Code storage.
  • The sidebar displays how long the user was coding for the current day and the day before.
  • Notifications about getting hydrated every 30 minutes and taking a break every 45 minutes.
  • A Memes page to visit during breaks.
  • Motivational Quotes with the notifications.

How we built it

We used Javascript and VS-Code API for the extension development.

Challenges we ran into

  • There are very few resources available about VS-Code extension development with Javascript.
  • Storing data and displaying it onto the sidebar requires building a TreeDataProvider which is complex.
  • The Extension development environment doesn't provide error messages. It just stops working.
  • Documentation of VS-Code API is in Typescript, so we needed to understand the Typescript first before implementation.

Accomplishments that we're proud of

  • Everyone in the team was new to VS-Code Extension development but we were able to get the project ready in time with a rich list of features.
  • Extension is deployed on the marketplace and verified by VS-Code. It's available for the world to use.
  • The major part of the time went through reading VSCode-API documentation and figuring out the functions we need.
  • For TianHui, it was her first time working with Javascript.

What we learned

  • We were able to learn a lot of things. It was the first time we all were building the VS-Code extension. The team can now easily work on vs-code extension-related projects.
  • We got to do a lot of peer programming and managed to teach each other a lot of things, such as coding best practices.
  • We also learn about deployment with Azure DevOps.

What's next for Dev Friend

  • We can provide bar charts on the sidebar displaying coding time for each day.
  • Feature to capture the lines of code written by the user.