Narain Sagar
Published in

Narain Sagar

Bitbucket Issues Viewer

FYI: This was my first ever blog post I written in my life.

Bitbucket & its Issue Tracker:

Bitbucket is a widely used tool by developers for source code versioning and project management. It is a cloud based hosting service, which offers both free accounts and paid plans.

Bitbucket has a whole host of capabilities. This post, however, will focus on its Issues Tracking feature. It’s a space under each project repository where a project’s feature requests and bug reports are raised by repository users.

The Idea — Bitbucket Issues Chrome Extension:

Bitbucket is a part of our daily workflow; we host all our projects on it. The main problem we had was opening Bitbucket’s website and going to the issues page over and again, just to view updates. What we needed was a small native app, which will allow access to issue on Bitbucket quickly and let us know about the basic updates (resolved / created / etc) without going to Bitbucket itself. We also wanted it to work in offline mode so that its not dependent on internet connectivity when viewing older issues/updates.

The starting point was a requirements analysis and a basic class diagram of how our app will look like from a design and code point of view.

Creating WireFrames:

Creating Class Diagram:

Implementation, Setting up the codebase | Choosing the frameworks / libraries:

We used Bootstrap for styling all the components of this app and used a Bootswatch Paper theme to top it all off.

For JS framework, we used Angular (MustacheJS) for a dynamic rendering of the view and the DynaTable jQuery plugin for adding interactivity to our views.

We also used GruntJS for automating our development process. For testing, we employed the TDD (Test Driven Development) approach. The libraries which we used for testing were Protractor for functional testing and MochaJS & ChaiJS for unit testing.

We kicked everything off by scaffolding the app using Yeoman generator and adding the required libraries using Bower & npm. Then we configured & isolated the calls from Bitbucket’s Web API Console to get a list of repositories and their respecting issues.

The Application Codebase — MVC (Model View Controller)

We had weekly sprints for building out the app — slowly adding features to it one by one (This was a side project of ours). Every week we released a new version of the app to all our colleagues at Recurship who would then use it and send feedback. This cycle was very important, as it helped us to understand what was important and needed for this application.

After several iterations, the app was ready for publishing. The basic features include configuring the repositories and its issues and filter by title, status and date. You can also create a new issue from the extension. The two favorite features for me were the keyboard shortcut toggle (command + shift + 9) which shows or hides the app instantly, and the auto refresh (in background), which checks for changes on a 5 min interval and gives desktop notifications.

Available Features

Following features are available in the current version (v2.0):

  • Accessing the extension in the browser toolbar
  • User authentication using Bitbucket’s account (username, password)
  • Displaying user Bitbucket account repos and also shared (personal and public) with
  • Displaying repos in a table with their title, owner and last updated time.
  • Clicking on a repo to view all its issues (If the repo has no issues, then it will not be clickable)
  • Displaying issues in a table with its title, status, creator and last updated time.
  • Filtering by text query in search
  • Filtering by showing only the repos that have issues
  • Filtering the issues and repos by their available fields (title, status, reported by, and last updated , assignee, etc)
  • Displaying the selected repo issues offline (cache locally — only for selected repos)
  • Manual Syncing via refresh button and Auto Syncing in Background after every 5 minute interval.
  • Allowing users to create/add new issues via app directly,
  • Enable/Disable notifications
  • …. few more

We have used basic authentication (i.e., using username and password) for now. We plan on converting to OAuth. OAuth is considered to be fairly tricky when implementing in Chrome apps, and requires logic to renew tokens every hour, thus we chose basic authentication for our MVP.

We have adopted the Bitbucket Issues Viewer in our daily workflow. We are also looking to improve it for a more wider audience.

Download and install the app from here and let us know what you think about it!

We would love to hear your feedback. Thank you.


Originally published at




Full Stack JavaScript Developer, Currently focusing on Node.js / Angular2 / Koa2 / TypeScript / Loopback

Recommended from Medium

Reduce Azure Pipelines Xcode build time by 80% through CocoaPods caching

How to make a VR Game in with Unity?

How to Create a Technical Test your Candidates will Genuinely Enjoy

Quick terminal tip

Relational vs Non-Relational Databases

Installation of RStudio in EMR

Call for testing: Ubuntu Touch OTA-11

Your Hackathon Community Manager, Jamie!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Narain Sagar

Narain Sagar

Full Stack JavaScript Developer, Currently focusing on Node.js / Angular2 / Koa2 / Loopback

More from Medium

How to deploy Angular sites on Fathym

RxJs Observable vs Javascript Promise

How to use ESLint on your Angular Project using VSCode.

My Journey from React to Angular