backlogr is an experimental web app built with angular.js for tracking and managing your video game collection and backlog.

I built this app mainly as a way to get my feet wet with using angular.js, and to explore its strengths and weaknesses when used to create slightly more complex web applications. As a an avid gamer, I thought that an app for tracking your game backlog would be a perfect test and would fit nicely as a traditional “CRUD” type application. To make the app more useful, and to make it come alive a bit more, I’ve connected it to the excellent GiantBomb API and games database. The app makes requests to a custom node.js based REST API that I developed, which serves a cached version of GiantBomb’s data from a MongoDB database, which makes searching it from the app even faster and easier, and allows things like the game box art to be incorporated into the interface.

Key components & features

  • Backed by the GiantBomb games database, cached to a MongoDB database and served from a custom node.js API
  • Stores the user’s games and configuration data in browser localStorage
  • Fully responsive and mobile friendly user interface (built on top of Bootstrap v4 alpha, and uses fastclick for lag-free touch interaction)
  • Uses ui-router for page/view routing with URL support
  • Custom built combo-box/auto-complete widget directive (for searching the games database)
  • Custom built toast notifications directive
  • CSS3 Animations with ngAnimate (for modals, dropdowns, notifications, list items)
  • Keyboard control support with angular-hotkeys