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 json files, 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:

Full test results.

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.