0xabdul / Draw-it-out

An online Whiteboard application built using ReactJS & TailwindCSS utilising the HTML5 Canvas & the JavaScript Canvas API.

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.

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).

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

Message from PA

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