https://github.com/vaneenige/rainbow-explorer

🌈 A 20kb Preact & Redux based Progressive Web App that translates real life color to digital color.
https://github.com/vaneenige/rainbow-explorer

experiment getusermedia preact pwa redux

Last synced: 22 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/vaneenige/rainbow-explorer
• Owner: vaneenige
• License: mit
• Created: 2017-03-06T20:50:37.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-05-19T22:09:58.000Z (almost 8 years ago)
• Last Synced: 2025-04-23T00:43:21.604Z (22 days ago)
• Topics: experiment, getusermedia, preact, pwa, redux
• Language: JavaScript
• Homepage: https://use-the-platform.com/rainbow-explorer/
• Size: 97.7 KB
• Stars: 27
• Watchers: 4
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Rainbow Explorer

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

[Click here for a demo!](https://use-the-platform.com/rainbow-explorer)

## Structure

To keep performance high and application size small this application is powered by [Preact](https://github.com/developit/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](https://github.com/developit/preact-redux-example) by [developit](https://github.com/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