- JavaScript 87.2%
- HTML 12.8%
|
|
||
|---|---|---|
| images | ||
| src | ||
| test | ||
| .gitignore | ||
| .travis.yml | ||
| _redirects | ||
| doit.js | ||
| gulpfile.js | ||
| index.html | ||
| LICENSE | ||
| manifest.json | ||
| package-lock.json | ||
| package.json | ||
| polymer.json | ||
| README.md | ||
| service-worker.js | ||
| sw-precache-config.js | ||
| wct.conf.json | ||
Flash Cards
This is a simple flash cards app to help you learn Japanese. It is built using the PWA Starter Kit, using the default template as the starting point and the wiki for configuring and personalizing.
Apart from several game options, flash-cards also comes with a stats page that shows you a heatmap of your answers.
Features/highlights
- uses Redux to handle the application's state
- this state is also stored and loaded from
localStorage, so that the last question asked and the stats are persisted across refreshes - uses the SpeechSynthesis API to read out the question being asked
- the actual cards data is loaded from arbitrary
jsonfiles, so the app can be extended to work for any language and any set of words being learnt
Setup
git clone https://github.com/notwaldorf/flash-cards
cd flash-cards
npm install
npm start
To run the tests, you can run npm run test.
Build and deploy
To build the app, run npm run build. This will create a build folder that has all the minified
bundles and assets you need to deploy. If you want to test that the build output works, you can run
npm run serve
For deployment, I used Netlify's
pretty much out-of-the-box setup. These are my deploy settings (so that the app is rebuilt and
the bundled app is redeployed every time there's a new commit to master):
Since this app is structured as an app-shell (the index.html knows how to display the correct route based on the URL, but each URL does not correspond to a standalone view you can just load), I've also added a _redirects file used by the Netlify server tohandle these redirects (read more about that here)
Supported browsers
This app uses the es5-bundled bundle, so that it works on browsers up to IE11, as well as Googlebot (so that it can get indexed).
Performance
Lighthouse:
WebPageTest:
Known Issues
There's a problem with the SpeechSyntesis API on Windows, where I bail out early if I don't find a Voice I can recognize (because there don't seem to be any Japanese languages installed by default on Windows). Should prolly figure out something around this.