Little bit about the solution:
- Typescript
- React hooks (+hooks based router)
- Redux-saga for separation of concerns between business and UI logic
- Can be easily adapted to multiple-choice questions
- Flexible about the number of questions/diffiiculty (changed in config)
- Proper support for session token with resetting (https://opentdb.com/api_config.php)
- Sagas integration tests with Jest
- E2E tests with Cypress
- Tooling best practices (Prettier, ESLint, Husky/Lint-staged)
- Code splitting with Suspense wrapper
- Error boundries (right now only with Class component)
- JS bundle (black) and Chunk Loader (blue)
- Preload Results screen (we preload on the last question)
- Preload Quiz screen onMouseEnter on Start button
TODO:
- Load chunk (Quiz) and data (questions) at the same time - right now we just preload the Quiz screen, we can also preload the data if we want
yarn install - Install dependencies
yarn start - Run project in development mode
yarn test - Run Jest tests (also yarn test:watch)
yarn test:e2e - Run Cypress E2E tests (also yarn test:e2:watch to open the browser)
yarn test:all - Run Jest and Cypress tests
yarn build - To build static version in /build folder
yarn deploy - Used to deploy production version on Netlify (demo)