A competitive multiplayer quiz app where users compete to become the best. Users login with facebook and play against one another. Users get scores based on their victories and losses and answering questions correctly.
- Setup Routes
- Home
- Game
- Leaderboard
- Login
- Profile
- Setup Authentication (0Auth)
- Setup Project Directory and Branches on Github
- UI Components
- User
- Question
- Answer
- Header
- OPTIONAL Mobile Functionality
- OPTIONAL Lifelines/Powerups
- Clone the repository
$ git clone https://github.com/lyonsa/bootcampProject1 bootcamp-project1- CD to directory
$ cd bootcamp-project1- Install dependencies
$ npm install- Add
.envfile and add environmental variables
REACT_APP_FIREBASE_API_KEY=SECRET
REACT_APP_FIREBASE_AUTH_DOMAIN=SECRET
REACT_APP_FIREBASE_DB_URL=SECRET
REACT_APP_FIREBASE_PROJ_ID=SECRET
REACT_APP_FIREBASE_STORAGE_BUCKET=SECRET
REACT_APP_FIREBASE_MSG_SENDER_ID=SECRET- Start application
$ npm run start- Homepage
- Shows users waiting (0/2, 1/2)
- Shows start button
- Has banner
- Waiting Screen
- User has to wait if there is no other user
- Fun waiting icon that indicates still connected and looking???
- Pick Category Screen
- Shows buttons for the categories (random selected player needs to pick one)
- User attributes show
- Name
- Profile picture
- Scores for round and forever -”({foreverScore (roundScore)}"
- Nice to have: when the selecting user hovers over a category, the other user can see that (think stage selection in fighting game)
- In Game
- User attributes maintain position
- Question is shown with four options
- (Make sure that users cannot see each others hover now)
- On selection:
- First user
- Immediately display if correct/incorrect
- Div turns red/green
- Displays "Correct/Incorrect"
- Countdown for time remaining moves to 3 when the 2nd user selects
- Immediately display if correct/incorrect
- Second user
- immediately display if correct/incorrect
- countdown for time also sets to 3 so they have time to see the correct/incorrect option
- First user
- Note: We don't need a "correct/incorrect" phase outside of the questions with this flow
- User attributes maintain position
- After Questions
- 30 second timer until kicking users back to the start if no selection below
- Shows winner with score (big and center)
- Shows loser with score (below like a loser)
- Again button
- If selected by both, both users are kicked to the category screen and the user picks
- If only one selects place them back in the waiting area
- Main menu button
- kicks both users back to the home screen
GAME_ID("G"+generated by firebase):
{UID1: #####,
UID1_SCORE: #,
UID2_SCORE: #,
UID2: #####,
QUESTIONS: (object returned from API call)
},
UID("U"+generated by firebase):
{LIFETIME_SCORE: #,
IN_GAME: true/false,
GAME_ID: #####},
QUEUE: UID OR NULL