Click here to see a demo. (localStorage doesn't work on large sets yet)
Icon modified from OpenMoji Project (author Marius Schnabel).
"Pairwise Ranking" (wikipedia) (sometimes called "Preference Ranking"), can be best described as taking a "divide and conquer" approach to prioritizing/ranking a set.
In it we expand the comparisons into a every possible combination of 2, compare a pair, assign one a winner, and repeat. After we've assigned every possible pair a winner, we will have an aggregate of winners, where repeated winners gravitate to the top and losers to the bottom.
L. L. Thurstone first introduced a scientific approach to using pairwise comparisons for measurement in 1927, which he referred to as the law of comparative judgment.
This is intended as a simple web app to aggregate a preference list from input (using local storage to start), by simplifying to a simple A or B choice. The expected audience (aside from just myself), is someone with minor technical understanding.
Click to expand/collapse
Overview of app:
Click to expand/collapse
Quick 30 second wire-frames for direction:
Screen 3 does need some refinement of when/where to have buttons.
- Recommended: Node 14 (via nvm)
- yarn - Install yarn
This was bootstrapped using yarn create react-app pairwise-ranking-app. See Create React App.
- yarn install
- Done
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.
Internal watch failed: ENOSPC: System limit for number of file Error: ENOSPC: System limit for number of file watchers reached, watch '/path/path/path/repos/pairwise-ranking-app/public'
...
errno: -28,
syscall: 'watch',
code: 'ENOSPC',
path: '/path/path/path/repos/pairwise-ranking-app/public',
filename: '/path/path/path/repos/pairwise-ranking-app/public'
}Sometimes happens on linux (in general) for Node scripts of this nature, Either:
sudo sysctl -w fs.inotify.max_user_watches=100000Or edit /etc/sysctl.d/10-user-watches.conf with:
fs.inotify.max_user_watches = 100000(None done yet).
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Usage:
PUBLIC_URL="/public_html/pairwise-ranking-app/" yarn build
Builds the app for production to the build folder. Provides the commit hash on the page.
It correctly bundles React in production mode and optimizes the build for the best performance. You need to set PUBLIC_URL if you want a non-root path.
See the section about deployment for more information.
Usage:
# Only builds and copies.
yarn deploy-to-github
# Builds, copies, commits.
yarn deploy-to-github "[Mod]: Publishing change to iamovrhere.github.io"Builds & commits changes to:
To demo/use here:
- Style out the build info
- Set material UI colour theme
- Perhaps either setup some backend (meeeh) or an export/import ranking.
- Replace localStorage with IndexDB - https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
- RESPONSIVE - Tinker with the mobile/tablet/desktop profiles
- I will likely most use this with tablet/mobile.
- Convert into TypeScript
- Should I bother?
- Tests for contexts/reducers
- Router Transitions http://maisano.github.io/react-router-transition/getting-started / https://www.npmjs.com/package/react-router-transition / https://reactrouter.com/web/example/animated-transitions
- TRANSLATIONS - Add translations (probably last since this is primary for my use)
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration