Draw-it-out: Online Whiteboard App

Introduction

Draw-it-out is an online whiteboard tool built using ReactJS and TailwindCSS. It allows users to draw, sketch, and take snapshots of their creations. The intuitive interface and responsive design make it easy to use across various devices.

Getting Started

Prerequisite

• Node.js (https://nodejs.org/) installed on your machine.

Installation

1. Clone the repository:

git clone https://github.com/singodiyashubham87/Draw-it-out.git
cd Draw-it-out

2. Install dependencies:

npm install

3. Start the app:

npm run dev

Features

• Drawing Tools: Users can select between different drawing tools like pencil and brush thickness.
• Color Picker: Choose from a wide range of colors using the color picker tool.
• Brush Thickness: Adjust the thickness of the brush stroke using a range slider.
• Snapshot: Capture and download snapshots of the whiteboard canvas.
• Clear Canvas: Clear the canvas with a single click.
• Responsive Design: The application is responsive and works seamlessly across different screen sizes.
• Resizable Board: Adjust the height of the board using Increase and Decrease buttons.

Using Drawing Tools

• Pencil: The pencil is selected by default in the app. Simply, move onto the canvas and start drawing.
• Brush Thickness: This feature will allow you to select the thickness of the brush tool.
• Color Picker: This feature will help to select a color of your choice. The user gets the option to select the color depending on three color models, namely, 'RGB', 'HSL' and 'HEX'. Optionally, the user can select any color on the screen as well, with the help of a color picker.
• Snapshot: The snapshot option allows you to store your creativity in an image form(PNG).
• Canvas Height: This feature will allow you to select the height of the canvas.

Tech Stack

• ReactJS
• TailwindCSS

Deployed App

https://draw-it-out.vercel.app/

Releases

• Release 1.0 : March 15, 2024 @16:32 [First phase of application completed.]

  • Features: Added snapshot functionality and fixed minor bugs.

• Release 0.0 : March 14, 2024 @22:31 [Zeroth phase of application completed.]

  • Features: Drawing functionality with custom thickness of the brush and custom color.

Contributions

You can find the contributing guideline here -> CONTRIBUTING GUIDELINES

Author

• Shubham Singodiya - Lead developer and creator of the whiteboard web application.

License

Thanks to all the Contributors

Thanks a lot for spending your time helping this project grow. Keep rocking!

Message from PA

Thank you for visiting Draw-it-out! 💝
Feel free to explore the code, contribute, and provide feedback.