Skip to content
Table Sports Leaderboard App (FireBase back-end)
JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.


Tablesports leaderboard app Track each ping pong, pool, foosball, air hockey, or shuffleboard game that's played. Find out who really is number one (in your office, or out of your group of friends).

What is it?

With TableChamp, you can add players, track every game that is played, and always know who's #1.

Adding a Score

You can view stats on each player, including their 20 most recent games:

View Stats

You can manage all of the settings of the app in one convenient sidebar:

Edit Settings

You can even select from one of 14 languages:

Translated into 14 languages

How does it work?

TableChamp is written entirely in JS/HTML/CSS. There is no back-end code (like python, or PHP). It uses FireBase as a back-end real-time DB to store all of the data, and manage the user authentication.


1) You'll need a hosting account for the JS/HTML/CSS files

NOTE: you can run a FireBase app locally, but you'll need to follow these instructions to get set up with FireBase CLI.

Just clone this entire project to your server. Once you've done that, move on to step 2.

2) You'll need to sign up for a free FireBase account

FireBase Account Signup

Even if you have a large team, the free FireBase account should offer plenty of resources.

Once you've signed up for a free FireBase account, move on to the next step.

3) Create a new FireBase app

Create a new project

Go through the process of creating a new FireBase Project. You can name it "Table Champ", or anything you'd like.

Name your app

Find the "Add to your web app" option, and click it:

web app option

You now have all of the information you need to connect to connect the app to FireBase:

FireBase API Info

Once you have your FireBase API info, move on to the next step

4) Copy your FireBase info to the /js/firebase-key.js file

Open up /js/firebase-key.js:

Settings file

Paste in the FireBase apiKey, authDomain, and databaseURL from step 3 above:

Competed API settings

Once you've done this, save your changes, and move on to the next step.

5) Add your first FireBase user

FireBase handles storing all of your data, as well as authentication. We'll need to set up a user in the FireBase admin, so that you can log into your app. I'll walk you through how to add a single user, but you can add as many login users as you'd like.

NOTE: Users are separate from players. Users are set up in the FireBase admin, and have an email & password attached to them so that you can log in. Players are managed from the settings section once you've logged into your app.

Set up your first user

All you need to enter to set up a user is an email, and a password.

Once you've added your first user, continue to the next step.

6) Create a database instance

From your FireBase console, click into the Database section:

DB creation

Create a new "Real-time database" (not a Firestore DB - note: they try and get you to create a Firestore DB by default).

Once you've created your real-time DB, you'll need to change the security rules. Click the "Rules" tab and and replace what's there with the following:

  "rules": {
    ".read": true,
    ".write": true

Here's what it should look like:

DB creation

7) Login, and add your players

Now you can log into your app for the first time. Go to the index.html file (wherever it's being hosted from step 1 above). You should see:

Login screen

Once you've logged in, you should see:

Logged in

Enter your organizations name, and the game you'll be tracking:

Company name

Then click on the Players tab:

Players tab

Click "Add Players" and enter the names of your players (one name per line):

Add players

You're all set

You should be ready to start tracking games:

All set

You can’t perform that action at this time.