Users can generate their own custom quiz and then play it. They are able to choose the number of questions, category and difficulty level.
You can check out the LIVE project HERE.
I identified I had to improve my core knowledge in React and JavaScript to feel more comfortable with them. A quiz app seemed a good option to practice and solidify the fundamental skills. I found Open Trivia Database API to supply my app with data.
- ReactJS
- React Router for routing
- Framer Motion for animations
- SASS (SCSS modules)
One particular tricky situation was when I wished to
simultaneously fetch data and redirect the user to a new page
after a button click. I only managed to make one of the two to successfully work. I
asked for help from a more experienced friend, and the
solution was to use React Router useHistory hook and the push
method. I had to add the state, which included the fetched
questions, as an additional parameter history.push({ pathname: '/questions', state: { questions } });.
I had never worked with an animations library before, so getting accustomed to Framer Motion was also an interesting learning experience. I got a bit overwhelmed with all the options available to me at first. I chose to just start small and not go super crazy with all the possibilites.
Homepage:
Quiz setup page:
Questions page:
Result page:
Modal section:
