-
create react app npx create-react-app react-quiz --template typescript remove the unnecessary files
-
install the dependency npm i styled-components @types/styled-components
-
download the image for the app and place the image file in images/src
-
download the font and copy the embed link and place it in index.html/public
-
api ( Trivia API ) to fetch the data
-
create components folder in src
-
create QuestionCard.tsx in components folder
-
create API.ts and utils.ts in src folder
-
create startTrivia, checkAnswer, nextQuestion functions in App.tsx
-
JSX in App.tsx to display name of the app, start button, loading, QuestionCard, next question button.
-
define type Props in QuestionCard.tsx
- specify the Functional Component using React.FC to pass the Props down
- destructure the properties from props
- JSX to display the data from Props
- import useState in App.tsx to manage the states
- define the initial states of the props ( loading, questions, number, userAnswers, score, gameOver )
- pass the props to the QuestionCard component
- API.ts
- create fetchQuizQuestions taking 2 parameters (amount: number, Difficulty)
- create enum Difficulty and specify the constants in it
- define the endpoint in fetchQuizQuestions
- declare the data using fetch(endpoint)
- create type Question to specify the type of the properties
- create type QuestionState to integrate incorrect answers and correct answer
- import shuffleArray
- App.tsx
- import fetchQuizQuestions and Difficulty
- import QuestionState
- create type AnswerObject
- utils.ts
- create shuffleArray to shuffle the answers
- App.tsx
-
setting the initial state of the game
-
define newQuestions containing the data from API
-
JSX
-
checkAnswer function
- get the answer from the user Click answer
- set the correct from the data
- compare if the user answer is same with the correct
- increase the score
- save answers in the array for user answers
- nextQuestion function
- move on to the next question if not the last quesiton
- create App.styles.ts in src folder
- import styled, { createGlobalStyle } from 'styled-components'
- import BGImage from './images/nattu-adnan.jpg'
- create GlobalStyle using createGlobalStyle``