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

Comprehensive Guide for Installing and Setting Up Draw-it-out

Prerequisites

• Node.js: Ensure that Node.js is installed on your machine. You can download it from the official Node.js website.

Installation Instructions

For Windows

1. Install Node.js

   • Download the Node.js installer from the Node.js download page.
   • Run the installer and follow the setup instructions.
   • Confirm the installation by opening Command Prompt and typing:

     node -v
     npm -v

2. Clone the Repository

   • Open Command Prompt.
   • Navigate to the directory where you want to clone the repository:

     cd path\to\your\directory

   • Clone the repository:

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

   • Navigate into the project directory:

     cd Draw-it-out

3. Install Dependencies

   • Install the required dependencies by running:

     npm install

4. Start the Application

   • Start the application in development mode:

     npm run dev

For macOS

1. Install Node.js

   • Download the macOS installer from the Node.js download page.
   • Run the installer and follow the instructions.
   • Verify the installation by opening Terminal and typing:

     node -v
     npm -v

2. Clone the Repository

   • Open Terminal.
   • Navigate to the desired directory:

     cd /path/to/your/directory

   • Clone the repository:

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

   • Navigate into the project directory:

     cd Draw-it-out

3. Install Dependencies

   • Install the project dependencies by running:

     npm install

4. Start the Application

   • Start the app in development mode:

     npm run dev

For Linux

1. Install Node.js

   • Open Terminal.
   • Use the following commands to install Node.js (example for Ubuntu/Debian-based systems):

     curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
     sudo apt-get install -y nodejs

   • Confirm the installation by typing:

     node -v
     npm -v

2. Clone the Repository

   • Navigate to the desired directory:

     cd /path/to/your/directory

   • Clone the repository:

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

   • Navigate into the project directory:

     cd Draw-it-out

3. Install Dependencies

   • Install the dependencies with:

     npm install

4. Start the Application

   • Run the app in development mode:

     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.