Drawing Tool

• Demo: Drawing-Tool live link

  Introducing the Collaborative Drawing Tool, an interactive web application designed to enhance your creative workflow and collaboration. This tool offers a range of features that allow users to draw, edit, and collaborate in real-time.

Languages and frameworks used:

• HTML
• Tailwind CSS
• Javascript
• Next.js
• Redux for state management
• Socket.io

Installing and running app locally

• open the terminal and run the following commands.
• run npm install to install all dependencies.
• To see the examples, run npm run dev.
• Follow the link to see the project or open your browser http://localhost:3000/.

Features and working

• Collaborative.

  Using Redux for state management, the drawing tool supports real-time synchronization across multiple tabs or devices. This means that any changes made on one tab will instantly appear on another tab where the same webpage is open.

• Stroke Size: Various sizes of stroke to enhance the design.

  Slider Control: An intuitive slider enables easy adjustment of the stroke width, providing precise control over the drawing tool.

• Stroke Color: Various options of colors to draw with various colors.

  A slidebar allows users to pick colors directly from their drawing, ensuring color consistency throughout the artwork.

• Eraser.

  Similar to the stroke size adjustment, the eraser tool also features multiple sizes. Users can choose a small eraser for fine details or a larger one for clearing bigger areas.