art-santos / canva

A simple application designed by me. It's a drag and drop for squares where we can persist data throw cookies. It's uses React dnd and typescript to allow you drag as much squares as you want.

ALCHEMY CANVA

Alchemy canva is a small project. It's is very very basic and have just a few functions, such as add squares to an array, removing then, set is position, and lock the component in one place.

Features used for building this APP

• CHAKRA UI
• NEXT.JS
• NEXT SEO - EASIER SEO FEATURES FOR NEXT.JS APPS
• NEXT-PWA - FEATURES TO MAKE YOUR NEXT.JS APP A REAL PWA
• TYPESCRIPT
• REDUX
• JS COOKIES
• FRAMER MOTION
• REACT RND - EASIER DRAGGABLE COMPONENTS
• UUIDV4 - GERERATING ID'S FASTLY
• EMOTION CACHE - CACHE FOR STYLES
• VERCEL - DEPLOYMENT PLATFORM

Run Locally

Running

 git clone https://github.com/art-santos/canva.git

Running

  yarn dev
||
  npm run dev

To check is there are any problems

  yarn build

HOW IT WORKS

• Right Click the square you want to create

• Place it on the content area, where you want

• The square is created!

• Click in the lock to lock it's position

• Click in the close to delete it (also backspace or delete)

• It's deleted!

• You can also change the theme color clicking in the right top icon.

• Create as many as you want! Also reload the screen to se they persisting.