TableChamp

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.

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

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

You can even select from one of 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.

Installation

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

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

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

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

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

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:

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

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.

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:

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:

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:

Once you've logged in, you should see:

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

Then click on the Players tab:

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

You're all set

You should be ready to start tracking games: