A simple web app (in under 10kb gzipped) to help teach your children colors with both visual and audio cues.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
docs
src
tasks
.babelrc
.editorconfig
.eslintrc
.gitignore
LICENSE
README.md
package.json
web.config
webpack.config.js

README.md

Color Flashcards

A simple web app (in under 10kb gzipped) to help teach your children colors with both visual and audio cues.

Apologies in advance for it being in my voice, but I made it primarily for my daughter. Please feel free to fork this repo and replace the audio samples.

Low-vision users can mute the custom audio samples and instead listen to their screen reader's pronunciation of each color.

For supporting browsers of Fetch, FileReader and LocalStorage, the audio clips will be stored to reduce bandwidth usage on repeat visits.

Tech used

  • Vanilla JS (ES2015)
  • Redux
  • Webpack
  • Babel
  • Sass
  • Autoprefixer
  • SVG

How to run locally

The following commands will install all of the dependencies, build the app, open it in your browser and watch for changes.

  • npm i
  • npm run watch

TODO

  • Use Service Workers to make it completely offline-capable
  • Investigate using Webpack more efficiently to compile and bundle more of the assets
  • Smarter watching
  • Dev and Prod builds
  • Add tests
  • Create native mobile apps