This is the solo project for Scrimba Module 12.4
Build a Trivia App with React using the OpenTriviaDatabase API based on the provided Figma design.
Objectives of the Project
- 2 Screens: Start and Quiz
- Pull 5 questions from OTDB API
- Tally correct answers after 'Check answers' is clicked and display the correct and incorrect answers for each question and a tally at the bottom with an option to play again.
This was a fun and challenging app to build. At surface, it felt really simple to build. And the structure was very straightforward too. But the app logic was not that simple. It's easy to check user responses as soon as its selected but to delay it to when user submits required a different approach as the user was allowed to change their responses any number of times before submitting.
I relied heavily on JS objects and object methods for most of the app logic.
This was the first time I tried Styled Components for styling instead of regular CSS. And it was really fun using it especially the flexibility it provides with props, nesting and conditionals. The styled component docs were really helpful to start learning and implement everything in the project. The only thing that wasn't very clear about SC in the docs was the way to create and use GlobalStyles for the project.
The fetched data from the API had some HTML entities, so I changed the default encoding to Bas64 and used the atob() function from the Web API. It isn't recommended using it in frontend apps and encoreURIComponent() is to be used.
It was fun to use useReducer() hook, was fun to watch chopping down a lot of states and consolidate a lot of logic it in a single function.
- Fix loading icon appearing late
- Add an app diagram
- Add figma link and/or desktop screenshot
- Add favicon
Clone the repo
cd quizzical-app
npm install
npm run dev
Open http://localhost:3000 to view it in the browserAvailable Scripts
# Run the app in development mode
npm run dev
# Build the app for production to the `dist` folder
npm run build
# Preview the production build from the `dist` folder
npm run preview
OTDB API - https://opentdb.com/api_config.php
Styled-Components docs https://styled-components.com/docs/
useReducer() - https://reactjs.org/docs/hooks-reference.html#usereducer
Base64 - https://developer.mozilla.org/en-US/docs/Glossary/Base64
encoreURIComponent() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
SubmitEvent - https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter
Nano ID - https://github.com/ai/nanoid
ViteJS - https://vitejs.dev/guide/#scaffolding-your-first-vite-project