![Logo](https://user-images.githubusercontent.com/45123514/161823611-5c0fdd2c-f2ba-4dfc-ad8d-48a141676325.png)
This is pure front-end project builded in React
It uses React-Konva as main functionality
It is used for making custom moodboards with images
It can be used in business like home decor for helping understanding client's vision
Images can be uploaded to Konva stage via drag and drop or by clicking them.
React-Konva way of adding background is by creating "Rect" component at the very bottom of the elements and filling it with image
Application support custom uploaded images from local drive
Uploaded images are stored in localStorage of the browser
Because react renders were clearing images when tab was switched
Canvas image can be easilly exported to an image
The biggest problem I had to deal with, was making Konva stage responsive
The problem was to keep canvas size synchronized with it's bitmap aswell with scale of images
When bitmap wasn't calculated, moving or resizng images wasn't possible
- Clone the repo
git clone https://github.com/Zlvsky/React-Konva-moodboard.git
- Install NPM packages
npm install
- Run app
npm start
To add local images, upload them to /public/images and declare them in /src/Data/items.json