Trivia App Starter Code!

Project Description

In this unit, coders will work in groups to build a project using HTML, CSS, REACT, and Firebase. Their task is to build out the front-end for a Kahoot style question game that displays a question and the possible answers, allows a user to choose answer and determine whether they are right or wrong. This project is intended to highlight some important aspects of goal setting and project management. The project will culminate in a final presentation.

====

Day 1: Project Setup and Introduction to Visual Studio Code

Goal: Set up your project, view the live running app, and build a simple component.

Use your Outline and Planning Doc to plan your project.
Go to the repository at https://github.com/itscodenation/trivia.
Fork the repository to your github account and clone to a new workspace.
Add, commit, and push your changes.
To set up your app, in your terminal type npm install.
To run your app, in your terminal type npm start this runs the app in the development mode. Then open http://localhost:3000 to view it in the browser.
Use any remaining time to begin working on your project.

====

Day 2: Use classes to represent data models

Goal: Set up the main component.

Create the Question class to store the data from the sample objects.
Style the component in any way you choose.

Day 3: Use multiple components to create a complex layout

Goal: Set up the other necessary components.

Use the sample data to display a question and its answer options by creating components and using props.
Make the answers clickable.
Use your remaining time to style your project.

Day 4: Read complex data from firebase

Goal: Work with external systems.

Replace sample data with firebase data to display the questions in your components

Day 5: Use unidirectional data flow to pass down state

Goal: Set up communication between components.

Set the initial state of your app component.
Use props to pass state to your child components.
Update App state from your child components to show which answer is correct.

Day 6: Project work day

Finish your project.

Day 7: Project work day

Finish your project.

Day 8: Presentation Preperation Day

Use the Presentaion Guidelines and Pitch Rubric .

Extensions!

Make a timer that resets the game when the timer runs out.
Make a counter that keeps track of how many times you've guessed the correct answer.
Change the color of the answer buttons when the user guesses. For example turn the button with the correct answer to green.
Make it a two player game.
Anything else you want!

schu34 / trivia