Trivia quiz app using opentdb.com/api built with React.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.firebase increased body to 250vh so bg img would not repeat on scroll Jan 26, 2019
.vscode
public
src increased body to 250vh so bg img would not repeat on scroll Jan 26, 2019
.firebaserc npm run build created build folder. deployed with firebase. icon inst… Jan 15, 2019
.gitignore
README.md npm run build created build folder. deployed with firebase. icon inst… Jan 15, 2019
database.rules.json fixed broken score saved alert. refactored get, set, save score(s) in… Jan 18, 2019
firebase.json npm run build created build folder. deployed with firebase. icon inst… Jan 15, 2019
package-lock.json hid date column in hall of fame table on mobile. close nav collapse o… Jan 15, 2019
package.json

README.md

How to run the app

git clone https://github.com/awilsongithub/factcollectr.git
cd factcollectr
npm install
npm start (use master branch)

How app meets requirements

Responsive Using the Bootstrap Grid system and media queries.

React application implementing the React framework Bootstrapped with Create React App

3+ routes using React Router

  1. "/" (StartScreen component)
  2. "/play" (QuizScreen component)
  3. "/hall" (Hall of Fame component)

Select a read-only API and implement a "rich" interface using multiple (at least 3) resources (end points): I used the Open Trivia Database API. Users can fetch questions from 24 different endpoints representing different categories of trivia questions. On fetch, users are routed to the QuizScreen where they answer questions. On answering the final question, the Score component renders showing a quiz recap with an option to save the score to the database. If they choose to save and are not yet logged in, the login modal is triggered where users can authenticate using Google Auth (via firebase authentication). Users must be authenticated to save a score. TODO: Once authenticated users are taken to the Hall of Fame where the save is confirmed and all scores displayed.

Note: App also implements 2 CRUD operations with associated UI: Firebase Realtime Database used to:

  1. Save quiz scores (Create) (see "saveScore" method on App component).
  2. Read quiz scores on change to realtime database (see HallOfFame component)

Project also:

  • Is in its own Github repo
  • Has major sections commented.
  • Has README describing purpose, functionality and how to start the application (includeing any necessary prerequisites for running it).
  • TODO: FactCollectr will be deployed via firebase to ....

About FactCollectr