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 widthREACT_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: