Skip to content

Latest commit

 

History

History
42 lines (35 loc) · 1.86 KB

README.md

File metadata and controls

42 lines (35 loc) · 1.86 KB
Raw

React hooks tetris

React hooks tetris

Extension of the following tutorial: https://www.youtube.com/watch?v=ZGOaCxX8HIU (by Weibenfalk https://www.youtube.com/user/Weibenfalk, powered by freeCodeCamp https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ) with Leaderboard stored in Firebase.

Table of contents

  1. Quick start
  2. Features

Quick start

  1. Download or clone the repository to your local machine
  2. Install npm packages by running:
 npm install
  1. Follow the following Firebase get started tutorial in order to create the firebase configuration JSON: https://firebase.google.com/docs/database/web/start?authuser=0
  2. Create .env file in the root folder of your project
  3. Add the firebase config with the following format (please remember to remove < and >):
REACT_APP_FIREBASE_API_KEY=<your_firebase_app_key>
REACT_APP_FIREBASE_MESSAGING_SENDING_ID=<your_firebase_messaging_sending_id>
REACT_APP_FIREBASE_APP_ID=<your_firebase_app_id>
  1. Start the project by running:
 npm start

Features

I followed the tutorial and the code covered in the video is the same as the one in this repo: https://github.com/weibenfalk/react-tetris-starter-files. On top of this I added the Firebase hook that will upload the leaderboard.

How does it work?

The user has to provide user name before starting the game or automatic random user name will be created. Once the game is finished, the results will be automatically uploaded to the firestore in a document called 'Leaderboard'. The end result looks something like this:

Demo