This app produces an image in which each color occurs exactly once - with no repetition and no used colors.

• Each colour is formed by a combination of red, green and yellow with a range between 0-255.

The final result is then printed to the screen

• It also relying on using Web Workers for preformance gain using the comlink-loader npm package.

In this project, the main npm modules used are

• Node 12.x+
• React 16.8+ with React hooks
• Typescript 4
• comlink-loader (assist with web worker communication)
• Jest + Testing-library
• Styled Components for CSS-In-JS styling
• ESLint + Prettier
• husky + lint-staged (for commiting staged files)

Clone the project locally in your machine and run the following command and use either yarn / node package manager:

yarn install

Alternatively can do with npm (recommended npm 7.x version with support for yarn.lock file)

npm install

This project uses environment variables to set the deisred image dimensions to be set.

• REACT_APP_IMAGE_WIDTH - Image width
• REACT_APP_IMAGE_HEIGHT - Image height

In order to create a different dimension, please update the value in the given .env file beforehand running any of given scripts

The project uses web workers as well as the IndexedDb storage system for asyncronous processing of large amounts of data

In the project directory, you can run: