{"id":21188214,"url":"https://github.com/danny-englander/react-trivia-game","last_synced_at":"2026-04-19T07:33:52.357Z","repository":{"id":45623792,"uuid":"513880558","full_name":"danny-englander/react-trivia-game","owner":"danny-englander","description":"An accessible React based trivia game that uses a global context, useReducer, and dispatch to detect the game state","archived":false,"fork":false,"pushed_at":"2023-02-28T14:06:23.000Z","size":1757,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-14T13:39:42.291Z","etag":null,"topics":["a11y","accessible","accessible-react","game","javascript","quizapp","react","reactjs","trivia-game"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/github/danny-englander/dannys-trivia-game","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/danny-englander.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}},"created_at":"2022-07-14T11:49:29.000Z","updated_at":"2023-03-23T16:18:15.000Z","dependencies_parsed_at":"2024-11-20T18:43:26.270Z","dependency_job_id":"4bf98a49-f10c-43bc-a552-11f922ca0f51","html_url":"https://github.com/danny-englander/react-trivia-game","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/danny-englander/react-trivia-game","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danny-englander%2Freact-trivia-game","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danny-englander%2Freact-trivia-game/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danny-englander%2Freact-trivia-game/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danny-englander%2Freact-trivia-game/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danny-englander","download_url":"https://codeload.github.com/danny-englander/react-trivia-game/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danny-englander%2Freact-trivia-game/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279018723,"owners_count":26086612,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["a11y","accessible","accessible-react","game","javascript","quizapp","react","reactjs","trivia-game"],"created_at":"2024-11-20T18:43:03.155Z","updated_at":"2025-10-14T13:39:42.607Z","avatar_url":"https://github.com/danny-englander.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TriviaLand, an accessible React.js trivia game\n\nTriviaLand is a `create-react-app` using React 18 that tests a user on their trivia knowledge through a series of 8 questions.\n\n## Code methodology and overview\n\nAt the heart of this app is a global context file that implements React's `createContext` and `useReducer` as a way of managing state globally and thus removing much of the business logic from components. `useState` is applied when needed within specific components.\n\nThe global context defines various reducer cases such as `SELECT_ANSWER`, `NEXT_QUESTION`, and `RESTART_GAME` via a wrapper called `GameProvider` which encases the game component and all its decedents.\n\nThese cases are then dispatched in various components when needed to pull in variables, state, and data.\n\nFor example, in `Game.jsx`, a variable called `onLockClick`is defined which is a key part of the game functionality. Here you can see the reducer being dispatched using `payload` once a user has selected an answer and clicked \"Lock in Answer.\" Thereafter, a user cannot change their answer to the current question. This was a means to solve an accessibility (tabbing) issue whereby I wanted to provide answer feedback but not while a user is tabbing through answers and finally settling on one.\n\n```javascript\nconst onLockClick = () =\u003e {\n  // If no answer has been selected, set a form validation message.\n  if (selectedAnswer === '') {\n    setFormValidationMessage('Please choose an answer from the choices above.')\n    return\n  }\n  // Otherwise, dispatch and show the correct answer once the answers are locked in.\n  dispatch({ type: 'SELECT_ANSWER', payload: selectedAnswer })\n}\n```\n\n## Design\n\nFor the design, I wanted something fresh and modern looking so I went to Dribble for inspiration and found plenty. In addition, I downloaded some modern abstract images from Envato elements that I thought would fit in nicely.\n\n## Styling / theming\n\nFor theming and styling, I use [React CSS modules](https://create-react-app.dev/docs/adding-a-css-modules-stylesheet) implemented via Sass and the newest version of React scripts for compiling along with a few global styles. I am also using [React icons](https://react-icons.github.io/react-icons/) which I really love!\n\nCSS module classes are namespaced in JSX files with \"style...\" so that the classes are differentiated from variables, for example, `className={styleFormActions.warning}`. A CSS module file is imported like the example below, the sass is instantly compiled to CSS when during NPM runtime.\n\n```javascript\nimport styleFormActions from '../assets/scss/components/formactions.module.scss'\n```\n\n## Running this app locally\n\nIf you'd like to run this app locally, follow the steps below:\n\n1. clone the repo: `git clone git@github.com:danny-englander/react-trivia-game.git`\n2. `cd react-trivia-game`\n3. Ensure you are using node 16 by running `node -v` or if you have Node Version Manager installed, run `nvm use`\n4. Run `npm install`\n5. Finally, run `npm start` and that will open up the app in your browser.\n\n## Demo\n\nThis app is deployed on [CodeSandbox](https://codesandbox.io/s/github/danny-englander/dannys-trivia-game) as well as on [Netlify](https://trivia-land.netlify.app/).\n\n## Roadmap\n\n- Fix tabbing bug so that the tabindex goes back to the beginning on the next screen or even better, to the beginning\n  of the form. probably React's `useRef` might come in handy for this.\n- Allow for multiple answers to some questions\n- Implement a splash screen to start off the game\n- Make improvements based on peer feedback\n- Keep track of a user's scores, add something like, \"your highest score so far is...\"\n- Randomize questions\n- Hook up a trivia API\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanny-englander%2Freact-trivia-game","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanny-englander%2Freact-trivia-game","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanny-englander%2Freact-trivia-game/lists"}