{"id":25169722,"url":"https://github.com/sofiane-abou-abderrahim/react-quiz","last_synced_at":"2026-05-02T17:34:21.135Z","repository":{"id":231602421,"uuid":"782125049","full_name":"sofiane-abou-abderrahim/react-quiz","owner":"sofiane-abou-abderrahim","description":"Explore the power of React with our 'React Quiz' demo project! Dive into the intricacies of managing state and effects using hooks like useState and useEffect. Witness dynamic rendering, timed responses, and state management in action. Try it now!","archived":false,"fork":false,"pushed_at":"2024-09-26T21:06:43.000Z","size":346,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-08T05:43:58.784Z","etag":null,"topics":["components","dynamic-rendering","javascript","quiz","quizapp","react","reactjs","state-management","timed-response","timer","usecallback-hook","useeffect-hook","useref-hook","usestate-hook"],"latest_commit_sha":null,"homepage":"https://sofiane-abou-abderrahim.github.io/react-quiz/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sofiane-abou-abderrahim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-04-04T17:26:39.000Z","updated_at":"2024-04-09T19:40:03.000Z","dependencies_parsed_at":"2024-04-04T21:25:43.917Z","dependency_job_id":"03eb9b0f-6b8d-4db2-aa2d-087f90caf494","html_url":"https://github.com/sofiane-abou-abderrahim/react-quiz","commit_stats":null,"previous_names":["sofiane-abou-abderrahim/react-quiz"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sofiane-abou-abderrahim/react-quiz","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-quiz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-quiz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-quiz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-quiz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sofiane-abou-abderrahim","download_url":"https://codeload.github.com/sofiane-abou-abderrahim/react-quiz/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-quiz/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32543961,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T12:25:33.646Z","status":"ssl_error","status_checked_at":"2026-05-02T12:24:51.733Z","response_time":132,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","dynamic-rendering","javascript","quiz","quizapp","react","reactjs","state-management","timed-response","timer","usecallback-hook","useeffect-hook","useref-hook","usestate-hook"],"created_at":"2025-02-09T08:36:23.596Z","updated_at":"2026-05-02T17:34:21.118Z","avatar_url":"https://github.com/sofiane-abou-abderrahim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Working with Effects\n\n## Practice \u0026 Dive Deeper\n\n- Apply your Knowledgge\n- Dealing with Effect Dependencies \u0026 Cleanup\n- Combining Effects with Other React Concepts\n\n# Steps\n\n## 0. Starting Project\n\n1. run `npm install`\n2. run `npm run dev`\n3. create a `README.md`\n\n## 1. A First Component \u0026 Some State\n\n1. create a `components` folder\n2. Inside it, add a `Header.jsx` component \u0026 a `Quiz.jsx` component\n3. built `Header.jsx` component\n4. add states in `Quiz.jsx` to manage the questions \u0026 answers\n5. output `\u003cHeader\u003e` \u0026 `\u003cQuiz\u003e`components in `App.jsx`\n\n## 2. Deriving Values, Outputting Questions \u0026 Registering Answers\n\n1. create a `questions.js` file with questions \u0026 answers inside\n2. change the logic in `Quiz.jsx` for managing questions \u0026 answers\n\n## 3. Shuffling Answers \u0026 Adding Quiz Logic\n\n1. shuffle the answers by using the `sort` method in `Quiz.jsx`\n2. make sure the app doesn't break if we answer all the questions \u0026 display a summary instead of the quiz\n\n## 4. Adding Question Timers\n\n1. create a `QuestionTimer.jsx` component\n2. set a progress bar inside `QuestionTimer.jsx`\n3. define a timeout \u0026 an interval using the `useState` \u0026 `useEffect` hooks inside `QuestionTimer.jsx`\n4. ouptut the `\u003cQuestionTimer\u003e` component inside `Quiz.jsx`\n\n## 5. Working with Effect Dependencies \u0026 useCallback\n\n1. make sure the timeout doesn't execute again by wrapping the `handleSelectAnswer` function with the `useCallback` hook in `Quiz.jsx`\n\n## 6. Using Effect Cleanup Functions \u0026 Using Keys for Resetting Components\n\n1. cleanup the existing interval if the effect function runs again in `QuestionTimer.jsx`\n2. cleanup the existing timer to prevent it from keeping on going in `QuestionTimer.jsx`\n3. reset the `\u003cQuestionTimer\u003e` component when the question changes by adding a `key` prop to it\n\n## 7. Highlighting Selected Answers \u0026 Managing More State\n\n1. add a new `answerState` state that controls our current answer state in `Quiz.jsx`\n2. dynamically change the color of the selected answer\n\n## 8. Splitting Components Up To Solve Problems\n\n1. shuffle the answers once when the `activeQuestionIndex` changes by using the `useRef` hook in `Quiz.jsx`\n2. create a `Answers.jsx` component to make sure that the answers are shuffled every next questions \u0026 that the answer doesn't remain selected\n3. output the `\u003cAnswers\u003e` component in `Quiz.jsx`\n4. create a `Question.jsx` component to use only one `key` prop\n\n## 9. Moving Logic To Components That Actually Need It (\"Moving State Down\")\n\n1. move the state down from the `Quiz.jsx` component to the `Question.jsx` component\n2. disable the button to prevent from clicking it when an answer was selected in `Answers.jsx`\n\n## 10. Setting Different Timers Based On The Selected Answer\n\n1. update the `\u003cQuestionTimer\u003e` component in `Question.jsx`\n   1. if an answer was selected so that a new timer starts and only expires after we showed the correct or wrong answer\n   2. when this timer expires don't tell the `Quiz.jsx` component that the question was not answered\n2. add a `mode` prop in `QuestionTimer.jsx` \u0026 set it as a `className`, then set its value to the `answerState` in `Question.jsx` for styling purposes\n3. reset the interval whenever the timer changes to make the interval inline with the new timer and the new `max` value of the `progress` bar by adding a `key` prop with a value of `timer` in `Question.jsx`\n4. trigger the `onSkipAnswer` function only if no answer was selected in `Question.jsx` to avoid skipping questions unexpectedly\n\n## 11. Outputting Quiz Results\n\n1. create a `Summary.jsx` component\n2. output the `\u003cSummary\u003e` component in `Quiz.jsx`\n3. use the `userAnswers`'s object to derive all the different data points we need in `Summary.jsx`\n4. use the `index` as a `key` to avoid encountering two children with the same key\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsofiane-abou-abderrahim%2Freact-quiz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsofiane-abou-abderrahim%2Freact-quiz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsofiane-abou-abderrahim%2Freact-quiz/lists"}