Feedback on Quiz App with React

Made quiz app with react. Pls do give ur valuable feedback…

https://realquizbee.netlify.app/

Hi Gaurav,

I took a look at your quiz app and had a good time playing it. I really like your use of sounds and the animations on the notifications.

A few things to potentially improve there:

  • The instructions are quite a long read, maybe remove a few of the more basic ones and/or break them up into a couple of pages to make them less daunting.
  • On the timer, if there are less than 10 seconds in a minute left, they show as a single digit, so e.g. 2:5 instead of 2:05 - that looks a little odd.
  • The alert at the end detracts from the experience IMO. The summary page already makes it clear the game has ended.

I also took a look at the code on github, in particular the Play component. Here’s my thoughts:

  • It is quite a large component - too large in my opinion. I’d break it up a bit more. There could, for example, be one component for the overall game and one for a single question.
  • Things that don’t change (like questions, numberOfQuestions) or can be derived from other pieces of state (like nextButtonDisabled, previousButtonDisabled) don’t need to go into state.
  • I am not really sure what displayQuestions is doing, you should be able to get rid of it.
  • handleButtonClick seems pointless, just attach the correct handler to each button directly
  • handleDisableButton is not really necessary either - just calculate previousButtonDisabled & nextButtonDisabled inside the render method
  • Accessing DOM elements directly (like you do in e.g. showOptions) should be avoided in React, just update your state and let React re-render your component as needed

If you make some of these changes, your component should become a lot shorter and more manageable.

Good luck and happy coding!

1 Like

Thank you Sir, I will implement it…

1 Like

Looks Great! Except for question 12 ( What’s the capital of Ethiopia?) doesn’t have a correct answer.