Quiz-Time

Solo Project

Overview

Do you have some extra time! Don't have an idea for your next ice-breaker? You need to play Quiz-Time! It's the perfect use of a few extra minutes to test your knowledge of Trivia!

This React App let's you pick categories of Trivia as well as the amount of questions you want! Then you are all setup to answer the questions and get graded as you go.

Quiz-Time FrontEnd Deploy Link

Project View

Settings Page and Starting a Game of Trivia:

Error Handling:

App Responsive Design:

React

• This multi page App with:
  • React
  • React Router
  • React PropTypes
  • React Hooks
  • React Responsive Carousel

Cypress Testing

• All Testing of User views and user interactions
• Game Play is tested
• Error Handling of Server errors and invalid URLS Tested
• Fetch request is intercepted and stubbed

Local Set-Up Instructions

• From the repo click the code button and copy the SSH link.

• Open terminal by pressing command + space bar, and search for terminal

• Inside of your terminal type git clone and then paste the ssh link. It should look like this: git@github.com:JoshMallery/Quiz-Time.git

• In your terminal type cd quiz-time

• Type npm install

• Do NOT run npm audit fix --force

• Then type npm start This runs the app in the development mode.

• Open http://localhost:3000 to view it in your browser.

• The browser should then deploy using a local host

• Enjoy using Quiz-Time!

• NOTE: Make sure that you type Control + C in your terminal when you are done using the application. This ensure the server will stop running before your close your Terminal.

Instructions for Use

• On opening the browser, you can navigate to the Trivia Settings Link.
• From the settings page you are free to select a category and the amount of questions to answer.
• After clicking submit to get the questions ready, go to the Play Trivia Link
• You are all ready to play! Select an answer to a trivia question, submit it be scored and then click the navigation arrow to the next question!
• Good Luck! Can you get a perfect score?

Technologies Used

• React
• React Router
• React PropTypes
• React Responsive Carousel
• Responsive Layout
• Cypress Testing
• GET request
• Fetch Web API
• ES6 JavaScript
• CSS
• HTML

Project Management

• Github Project Board was used to stay on task.

Figma WireFrame

• Settings View

-In Game View

Contributor

• Josh Mallery

Image Credit

• Quiz-Time logo created by Freelogodesign.org