QATAR 2022 FIFA World Cup Pool

Web application to manage QATAR 2022 FIFA World Cup Pool.

Come out and play here: https://qatar2022pool.web.app

Features:

• Realtime results for matches and leaderboard.
• Select your predictions.
• View others predictions.
• Social login (Twitter, Facebook, Google, GitHub).

Stack:

• Create React App.
• TypeScript.
• Firebase Realtime Database.
• TailwindCSS

Screenshots

Predictions

Leaderboard

Install

• First you need to setup a Firebase Realtime Database.
• Import initial-data/qatar2022.json to your database.
• Import rules initial-data/rules.json to your database.
• Create a .env.local file with your Firebase config:

REACT_APP_FIREBASE_API_KEY             = "Your API key"
REACT_APP_FIREBASE_AUTH_DOMAIN         = "            "
REACT_APP_FIREBASE_DATABASE_URL        = "            "
REACT_APP_FIREBASE_PROJECT_ID          = "            "
REACT_APP_FIREBASE_STORAGE_BUCKET      = "            "
REACT_APP_FIREBASE_MESSAGING_SENDER_ID = "            "
REACT_APP_FIREBASE_APP_ID              = "            "
REACT_APP_FIREBASE_MEASUREMENT_ID      = "            "

Running

In the project directory, you can run:

yarn start

Starts the development server.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.

Deploy

In the project directory, you can run:

yarn build

Builds the app for production to the build folder, then you copy these files to your server.

You can take a look about deployment for more information.

Since this project uses Firebase, you can choose Firebase Hosting.

Updating scores

Cloud Functions

This project uses Cloud Functions to fetch scores for the matches and trigger user score updates.
Repository and install instruccions for qatar2022-pool-functions.

Manually

You can run update scores script

node update-scores.js

Detailed instructions

Contribute

Your help is very welcome, feel free to send a pull request.