React-Konva-moodboard

React-Konva-moodboard copied to clipboard

React Konva Moodboard

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

Showcase of project

Adding local images to canvas

Images can be uploaded to Konva stage via drag and drop or by clicking them.

Changing background of canvas

React-Konva way of adding background is by creating "Rect" component at the very bottom of the elements and filling it with image

Uploading custom images

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

Exporting canvas to image

Canvas image can be easilly exported to an image

Responsive showcase

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

(back to top)

Built With

• React.js
• React-Konva

(back to top)

Installation

1. Clone the repo

   git clone https://github.com/Zlvsky/React-Konva-moodboard.git
   

2. Install NPM packages

   npm install
   

3. Run app

   npm start
   

To add local images, upload them to /public/images and declare them in /src/Data/items.json

(back to top)