Build A Quiz Fullstack App using React Native

When we need to start build apps, the best thing that can come to our mind is learning from the right source. This tutorial focuses on helping your career path improve as you build on. Grab this boilerplate Github repo 

Here is also a fullstack quiz project video you can watch


Building a quiz app is very easy with react native only when we have a perfect source for questions and which we will use to display random questions with random answers, so that leads us to using the Opendtb generated questions , which we used when making a simple fetch request JavaScript fetch.

Start A React Native Project.

Make sure you have setup a simple react native project and running perfectly.

Create a folder Called components and inside that components folder create a file called Helpers.ts . The Helpers.ts file or Helpers.Js file is going to contain the necessary utils we need to work with.

The first util we are creating is a util to randomize any form of array we put into it.

exportconst _ = (array: any[number | string]) =>
  [...array].sort(() =>Math.random() - 0.7);

The second one is the util that makes this request and grabs our questions from opentdb

exportconst grabQuizQuestions = async (
  total_questions: 10,
  difficulty: "easy"
): => {
  const url = `https://opentdb.com/api.php?amount=${total_questions}&difficulty=${difficulty}&type=multiple`;
  const data = await (await fetch(url)).json();
  return data.results.map((quizprops) => ({
    ...quizprops,
    answers: _([...quizprops.incorrect_answers, quizprops.correct_answer]),
  }));
};
Now inside App.js we're going to make use of the useEffect Hook to grabQuizQuestions when our application starts. so right away add this lines of code inside the app.js file also.

  const startJob = async () => { 
    const newQuestions = await grabQuizQuestions(
      TOTAL_QUESTIONS,
      shuffledDifficulty["eay", "medium", "hard"]
    );
  };

Define a state like this

const [allQuestions, setAllQuestions] = useState("")

now inside the startJob() function, add this line of code.

setAllQuestions(newQuestions)
At this point all questions from opentdb are in a single array. now lets go ahead and loop through this allQuestions array and display each question inside the return of our App.js.

return(
<>
{allQuestions.map(({question, answers}), index) => (
<>Question: {question}
 
{answers.map((_, index) => (

title={answers[index]}
/>

))}


)}

)

At this point we should have a nice looking quiz app with our random questions and answers.

Here is the GitHub repo for our full quiz project, and please do not forget to give us a star. Thank you and make sure you share to your freinds.