The goal of this tutorial is to guide you through the creation of a Slack clone called fireSlack. Upon completion, you will learn how to build a real time collaborative chat application using angularFire to integrate Firebase with AngularJS. Your application will be able to provide the following features:

• Sign up for an account
• Join/create channels to chat in
• Have a user profile
• Direct message other users
• See who's online

We'll be using Firebase 3 and AngularFire 2 for this tutorial which are both the latest versions for each library.

Prerequisites

This course assumes knowledge of programming and at least basic knowledge of JavaScript and AngularJS. We recommend going through A Better Way to Learn AngularJS if you're not familiar with AngularJS. We've created a seed repo based off of the Yeoman AngularJS Generator to help you get started faster. Before you begin, you will need to have Node.js, npm, and Git installed. We'll need Node.js and npm in order to install Grunt and Bower for managing dependencies. Follow these instructions for installing Node.js and npm, and these instructions for installing Git. Additionally, you'll need to have a free Firebase account and create a Firebase for this tutorial.

Final Notes About the Tutorial

You should never copy and paste code from this text unless we tell you to, as we've found that the skills being taught will stick better if you write out all of the code yourself. If you need more clarification on a certain part of the tutorial, we recommend that viewing the supplementary screencast series as we go into far more detail in each of the videos. It's also significantly easier to learn from the screencast series than the text, as you can actually see how a skilled developer manipulates the concepts in AngularJS to build a working application.

Getting Started

Once the initial codebase is cloned locally, we'll need to run a few commands to install dependencies and get our application up and running. Within our codebase, run the following commands:

After running grunt serve, open up http://localhost:4000 and you should see a splash page for our application, with a non-functional login and register page ready for us to build off of. In this tutorial, our directory structure will be grouped by feature (see #1 in this list) and we will be using ui-router as our router. We'll also be using the "controller as" syntax for referencing our controllers.