Welcome to a realtime leaderboard built with AngularJS and Firebase! This app is simple to set up so let's get started.
- Git
- Node.js and NPM
- Serve NPM package (
npm install -g serve)
First, make sure you have Git and Node.js installed (see "Prerequisites"). Then open your terminal/command prompt and run the following commands:
git clone https://github.com/simpulton/angularjs-leaderboard-firebase.git
cd angularjs-leaderboard-firebase
Now open up the code in your favorite text editor.
To run the app, you will need to set up an account with Firebase. Don't worry, it's free AND easy!
First, navigate to https://www.firebase.com/. Then you can do one of two things: you can sign up for an account with your email or, if you have a Github account, you can log in with those credentials.
After you have logged in/signed up, you will be taken to your dashboard. Go ahead and create a new app (call it whatever you want). After you click CREATE NEW APP, your app will appear in your dashboard.
Click Manage App on your newly minted Firebase app. Once you have transitioned to the new page, copy the URL from the address bar. It should look like https://<your-app-name>.firebaseio.com/.
Now open up your code editor, navigate to js/leader-board.js, and replace the FIREBASE_URI constant (line 3 as of this writing) with your Firebase URL. Firebase is now ready to go!
Now go back to your terminal, make sure you are in the angularjs-leaderboard-firebase directory, and then run serve. In your browser, navigate to http://localhost:3000. Boom! The app is now running. Read on for a tour of the app.
Let's take a quick look at what the app does.
The index page is where we show all of our data.
The admin page is where we can CRUD (Create Read Update Delete) our data.
The remote page is where the realtime component becomes important. Here, we can choose a contestant and then update their score. Click here to see a realtime demo.
