Frontend Mentor - Frontend quiz app solution

This is a solution to the Frontend quiz app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Contribute
• Author
• Acknowledgments

Overview

The challenge

Users can:

• Select a quiz subject
• Select a single answer from each question from a choice of four
• See an error message when trying to submit an answer without making a selection
• See if they have made a correct or incorrect choice when they submit an answer
• Move on to the next question after seeing the question result
• See a completed state with the score after the final question
• Play again to choose another subject
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page
• Navigate the entire app only using their keyboard
• Change the app's theme between light and dark

Screenshot

Menu

Quiz

Submit Answer

Results

Links

• Solution URL: Find the project source code on Github
• Live Site URL: Interact with App

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• Gitflow workflow
• React - JS library
• Typescript - Statically typed JS
• Styled Components - For styles

What I learned

Contrary to my thoughts, i found out that react setState() is an asynchronous function and hence using it in synchronous lines which need the updated state values almost immediately could be tricky...

const [currentQuestion, setCurrentQuestion] = useState < number > 0;

const nextQuestionHandler = () => {
  const nextQuestion = currentQuestion + 1;
  console.log(nextQuestion); //Outputs 1

  setCurrentQuestion(nextQuestion); // setCurrentQuestion is async and hence doesnt update right away
  console.log(currentQuestion); // Outputs 0 instead of 1
};

Css :focus vs :focus-visible, if youre struggling with interactive elements focusing both on mouse clicks and keyboard naviagtions then :focus-visible takes care of that well at least for chrome browsers... i learnt that the hard way

 /* focuses on both mouse and keyboard*/
:focus {
    border: 2px solid #d394fa;
    background-color: #d394fa;
    outline: none;
    ${(props) =>
      props.theme
        ? `box-shadow: 4px 4px 4px 0px ${props.theme.background.tertiary}`
        : null};
}

 /* focused on keyboard only...at least for me*/
:focus-visible {
    border: 2px solid #d394fa;
    background-color: #d394fa;
    outline: none;
    ${(props) =>
      props.theme
        ? `box-shadow: 4px 4px 4px 0px ${props.theme.background.tertiary}`
        : null};
}

Continued development

• In future projects, I aim to deepen my understanding and mastery of React's state management, especially regarding asynchronous updates with setState() and where they should be called in the code base. This includes honing my skills in managing state updates across different components and ensuring smooth user interactions without relying on synchronous expectations.

• Explore more on component rendering based of change in state data versus react-routing (the merits, demerits and of course lazyly pick a side)

Useful resources

• Atlassian - This platform's article on gitflow processes made my development process fairly smooth

• Alex Hyett - This is an amazing Youtuber who helped me understand the difference between the github flow and the gitflow. I'd recommend it to anyone who is not familiar with this concept or struggling with the difference.

• Net Ninja - I used a lot of griding in this project... Griding makes it very easy to define postions for elements on the DOM..This course by Net Ninja couldnt have explained it any better

• Codevolution - A short playlist on styled components...this got me started with styled components in less than an hour...I totally prefer styled componenets now..Yeah please join me!!!!!!

Contribute

• Create an issue
• Clone the repo and create a branch
• Run

yarn install

• Create a pull request

Author

• Github - Kwaku Kwadwo Edem Bless
• Frontend Mentor - @edem8
• Twitter - @eDlaWss

Acknowledgments

Thank you to Amalitech Ghana and everyone at the recuritment team for putting me on this challenge