Building a Real-time App with AngularJS & Firebase

As a part of a code-to-impress-project, I developed a Real-time Time Tracking Application. It is built with AngularJS, Firebase and AngularFire.

Try opening the demo in different browsers, or even on your smartphone, to see how the real-time magic works out when starting/stopping the tracker, editing notes or project names.

About the project

I am a huge fan of AngularJS. I like every aspect of it; the structure, data binding, templating, dependency injection etc. I really like working with it.

Lately I’ve been playing around with Firebase. If you are not familiar with Firebase, please check out their website. They are creating an amazing service, and they have also joined the Google team. Firebase provides real-time data syncing. When data changes, apps built with Firebase update instantly across every device.

Even better, the Firebase team have developed a JavaScript-library for easy integrating Firebase with AngularJS, called AngularFire. It looked promising, so I thought I would give it a shot.

I think it turned out pretty cool. Have a look at the demo, and let me know what you think.

5 thoughts on “Building a Real-time App with AngularJS & Firebase

  1. Hello Jesper,

    I’m interrested in your application. Is it open for further developing? I want to work further on it.

    1. Hi Henk-Jan,
      Sure, feel free to go ahead. Just clone or fork or whatever you like 🙂
      As the blog post (and the code) is quite old now I would expect it could break if you update the dependencies… Maybe. Or maybe not. Just a thought 🙂

      Best regards
      Jesper

  2. Hi Jesper,
    I am running it locally but cannot see any Add project button, is that expected?
    I tried on Microsoft Edge and Google Chrome.
    Thank you.

  3. I am quite new in Angular.

    I looked it up and was able to check the error in chrome using F12.
    “angular.js:9827 XMLHttpRequest cannot load file:///C:/Users/rems/dev/Angular/timetracking1/angularfire-timetracker-master/app/views/logs.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.”

    I looked a way to host it and came up with a http-server host.

    I used npm init to initialize my repo and add a section scripts with start :
    http-server -a localhost -p 80000 -c-l

    And it’s working!

Leave a Reply

Your email address will not be published. Required fields are marked *