Quiz Master 🖥️💰

"Welcome to the QuizMaster app – Where knowledge meets excitement!"

Want to get Familiar with Project 🤗?

Walkthrough.mov

Setup process:

1. Clone the Repository:

   • Open your terminal or command prompt.
   • Navigate to the directory where you want to clone the repository using the cd command.
   • Run the following command

   git clone https://github.com/rahul7011/QuizApp.git

2. Change Directory:

   • Navigate to the newly created directory by using the cd command:

   cd QuizApp

3. Install Dependencies:

   • Once you are inside the repository directory, you need to install the project's dependencies specified in the package.json file.
   • Run the following command:

   npm install

   This will download and install all the required packages and dependencies listed in the package.json file.

4. Start the React App:

   • After the dependencies are installed, you can start the React app by running:

   npm run start

   This command will start a development server and open your React app in a web browser. You can access it at http://localhost:1234 by default.

Screenshots

Challenges Faced

• Data Fetching and Processing: Obtaining and formatting quiz questions from an external API presented an initial hurdle. I overcame this by creating a custom function to fetch data, decode HTML entities, and structure questions in a user-friendly manner.
• State Management: Managing the state of questions, user responses, and timer updates was complex. I leveraged Redux for efficient state management and utilized Redux Toolkit for smoother development.
• Timer Functionality: Implementing a timer that counts down accurately and triggers specific actions when time is up was a technical challenge. I achieved this by utilizing React's useState and useEffect hooks along with Redux actions to handle time-related updates.
• User Navigation: Allowing users to navigate between questions while keeping track of visited, unvisited, and selected options required careful planning. I utilized conditional rendering and dynamic class assignments to highlight different question states.