Quizzical

Immerse yourself in a world of trivia where curiosity is rewarded!

project-image

Team

1 Developer (Youkwhan Kim)

My Role

Designer, Prototyper, Coder

Stack

HTML, CSS, JavaScript, React.js, Figma

01
BACKGROUND

Quizzical is the ultimate online trivia quiz designed to test your knowledge across a variety of categories. With Quizzical, players can engage in a fun and challenging experience, answering 5 random questions at a time. These trivia questions are retrieved from the Open Trivia Database API, ensuring a diverse range of content for endless entertainment.

02
OUTCOME

Features

  • Vast Question Bank:

    Quizzical utilizes the Open Trivia Database API to access a wide array of trivia questions covering various categories.

  • Randomized Questions:

    Each round presents players with 5 random questions, ensuring a unique experience every time.

  • Answer Validation:

    Participants can validate their answers after completing all the questions, allowing them to assess their knowledge and accuracy.

Approach

  1. Initial Setup and Styling:

    • Established the application structure by creating key components like QuizMenus.jsx, Quiz.jsx, and Trivia.jsx.

    • Implemented custom CSS for a polished interface, exploring techniques like z-index manipulation and glassmorphism using box-shadows.

  2. App.js and Game Flow Management:

    • Orchestrated game flow within App.js, dynamically rendering components based on the game state.

    • Integrated QuizMenu.jsx to gather user preferences and interact with the trivia API.

    • Managed formData state to streamline user selections and transmit preferences to the API.

  3. QuizMenu.jsx:

    • Managed user interactions for trivia preferences and data retrieval from the API.

    • Leveraged useEffect hook for side effects, handling data fetching and formData updates.

  4. Quiz.jsx:

    • Rendered trivia questions fetched from the API.

    • Implemented a streamlined state structure for all questions, enhancing management and consistency.

    • Utilized the Trivia component to dynamically present questions and answer choices for a seamless user experience.

03
REFLECTION

Key Takeaways

  • Importance of Planning: I realized the significance of planning ahead to ensure the development of pure functions and components. As new features were added during the development process, I noticed that my code started becoming more complex and cluttered. To address this, I took a step back and went back to the drawing board. By carefully assessing the impact on performance and the structure of the code, I was able to break down the tasks and take a step-by-step approach. This allowed me to maintain a more organized and efficient codebase that I could easily follow. Although there are still areas I would like to refactor, such as addressing props drilling and extracting functions into their own files, planning ahead helped me avoid unnecessary complexity and improve the overall code quality.

  • Understanding Hooks: Through the development of Quizzical, I gained a deep understanding of React hooks, specifically useState and useEffect. These hooks played a crucial role in managing state and handling component lifecycle events. I learned how to leverage the useState hook to create and manage state variables within functional components, enabling me to easily track and update data. The useEffect hook proved invaluable in managing side effects, such as fetching data from the API and performing actions in response to component lifecycle events. By mastering these hooks, I was able to ensure the proper flow and behavior of my application.

Next Steps

  • User input to control number of questions.

  • Count down timer.

  • Add a leaderboard to track high scores and encourage competition.

  • API token, so each session will GUARENTEE a unique pool of questions, every rerun.

OTHER PROJECTSTOP OF PAGE