rainbow-explorer

A 20kb Preact & Redux based Progressive Web App that translates real life color to digital color.

2 years after

Rainbow Explorer

A 20kb Preact & Redux based Progressive Web App that translates real life color to digital color.

Click here for a demo!

Structure

To keep performance high and application size small this application is powered by Preact. A 3kb React alternative that works with the same ES6 API. Together with Redux for keeping state it's really fast.

  • Based on Preact Redux Example by developit.

  • Preact based components manage input of color through the camera and save them.

  • Redux is used to store the state of the application (colors, current target and UI state).

  • UI is adjusted based on state (opening modal, fancy background colors and video pause / play).

  • There's a fallback message if javascript isn't available or getUserMedia() is not supported.

  • The application works offline, can be saved to the home screen (on android) and stores all the saved colors in local storage.

What's missing?

This application was made as a side project in a few days. For following structure changes and functionality updates improvements can be made:

  • Automated minify of CSS and inline in head.

  • Share of saved colors.

  • Adjusted text contrast for light colors.

  • Support for more browsers (currently Chrome on desktop and mobile).

License

MIT

Related Repositories

awesome-emacs

awesome-emacs

A community driven list of useful Emacs packages, libraries and others. ...

chibi

chibi

A tiny JavaScript micro-library ...

quelpa

quelpa

Build and install your Emacs Lisp packages on-the-fly directly from source ...

console.style

console.style

A micro-library that facilitates intuitive styling of the developer tools consol ...

awesome-css

awesome-css

A curated list of awesome CSS frameworks, libraries and software. ...