🎨 DoodleHub

Welcome to the DoodleHub! This is a versatile web application built with React, Tailwind CSS, and Rough.js, offering a variety of features for creating beautiful drawings, flowcharts, and diagrams with ease.

🚀 Technologies Used

• React
• Tailwind CSS
• Rough.js
• JavaScript

✏️ Features

• Drawing Tools: Use pencils, lines, rectangles, diamonds, circles, and text tools to unleash your creativity.
• Draw and Move: Click and drag on the canvas to draw shapes. Move elements around by selecting and dragging them to a new spot. Resize shapes by dragging their corners.
• Edit Text: Double-click on text elements to edit them directly on the canvas.
• Zoom: Zoom in and out for a closer look at your creations.
• Undo and Redo: Easily undo or redo your actions on the canvas.
• Colors: Choose from multiple background and stroke colors to customize your drawings.
• Save Canvas: Save your drawings as PNG images for easy sharing and printing.
• Reset Canvas: Reset the canvas to start fresh whenever you want.
• Eraser: Remove shapes from the canvas by clicking on them with the eraser tool.
• Pan: Hold the Space bar and drag or use the middle mouse button to move around the canvas.

🚀 Shortcuts

• Canvas Navigation: Press the Space bar and drag or use the middle mouse button.
• Undo: Ctrl + Z 🔙
• Redo: Ctrl + Y 🔁
• Zoom In: Ctrl + Plus 🔍
• Zoom Out: Ctrl + Minus 🔍

🔥 Learning Process

• Started with creating shapes using canvas API, then switched to Rough.js for hand-drawn effects.
• Implemented mouse events for rendering shapes and enabling user interaction.
• Added features like move, resize, undo/redo, text editing, pan, and zoom.
• Structured components and folders for better organization and maintainability.
• Learned about React hooks, deep diving into functions, and advanced event handling.
• Improved logical thinking, accuracy in measurements, and understanding of drawing points.

🌟 Improvement Ideas

• Collaboration feature for multiple users to work on the same canvas.
• Secure database integration for storing canvas files.
• Utilize socket.io for real-time collaboration and cursor visibility.
• Implement more complex features like shape connections and dynamic line adjustments.
• Add keyboard shortcuts for faster interaction.
• Introduce additional themes and text customization options.

💻 Running the Project

To run the project locally:

1. Clone the repository to your machine.
2. Run npm install or yarn to install dependencies.
3. Run npm run start or yarn start to start the development server.
4. Open http://localhost:3000 in your web browser to view the app.

Enjoy creating amazing drawings with the DoodleHub!