natisbananis/trivia

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 Ocde

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 your your components

• Create the question class to store the data from the sample objects
• Style components in any way you choose.

Day 3: Use multiple components to create a complex layout

• 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

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

Day 5: Use unidirectional data flow to pass down state

• 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

• Using 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!