React Matchable

A quiz app inspired by the Clickable Matching Quiz format by Sporcle

React Matchable uses

• React for the UI
• React Router to keep the UI in sync with the URL
• Redux for managing state
• Redux Saga for managing side effects (async actions)
• Radium for additional inline styling capabilities
• Lodash for functional programming helpers

Instructions to run locally

1. Install dependencies

$ npm install

2. Start mock quiz API

$ npm run db

3. Start webpack dev server

$ npm start in a new terminal tab or window

Notes

• All state is stored in a single object, allowing view components to be pure functions

• Periodic updates to the timer are scheduled using a saga

• Quiz object can be configured to...

  • Contain 2 or more columns
  • Sort columns alphabetically or randomly
  • Reveal correct answers on hover (Study Mode)
  • End when an incorrect answer is selected (Sudden Death)

License

MIT