How to run the app
- Install node if you don't have it
- Log in to github.com
- Go to https://github.com/awilsongithub/factcollectr
- Copy the "Clone or download" (with https) url (https://github.com/awilsongithub/factcollectr.git)
- In your computers terminal navigate to the directory into which you'd like to clone the factCollectr project directory and run the following commands:
git clone https://github.com/awilsongithub/factcollectr.git cd factcollectr npm install npm start (use master branch)
- In your default browser, navigate to http://localhost:3000
- FactCollectr should load
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
- "/" (StartScreen component)
- "/play" (QuizScreen component)
- "/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:
- Save quiz scores (Create) (see "saveScore" method on App component).
- Read quiz scores on change to realtime database (see HallOfFame component)
- 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 ....
- Trivia questions courtesy of Open Trivia Database
- Bootstrapped with Create React App
- Routing with React Router v4
- Data persistence with Firebase Realtime Database
- Using Firebase with React Tutorial
- Styling supported by Bootstrap v4
- UI inspired by Trivia Plaza
- Sortable, searchable tables with Reactable
- Icons from Flaticon