Draw-it-out: Online Whiteboard App

Deployed App

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

🏆 Featured in:

Event Logo	Event Name	Event Description
	GirlScript Summer of Code 2024	GirlScript Summer of Code is a three-month-long Open Source Program conducted every summer by GirlScript Foundation. It is an initiative to bring more beginners to Open-Source Software Development.
	Social Summer of Code 2024	The program is run by the Social(Formally Script Foundation) aims to connect students with open-source organization and projects to encourage their contribution to the open-source community.

Table of Contents

• Introduction
• Tech Stack
• Features
• Using Drawing Tools
• Code of Conduct
• Contributing Guidelines
• Getting Started
  • Prerequisites
  • Installation Instructions
    • For Windows
    • For macOS
    • For Linux
• Releases
• Learn More
• Contributions
• Author
• License
• Thanks to all the Contributors
• Message from PA

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.

Stars	🍴 Forks	Issues	Open PRs	Closed PRs

Tech Stack

• ReactJS
• TailwindCSS

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.
• Shapes: Users can select from different shapes, like circles, triangles, and rectangles, to use in their drawings.
• 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.

Code of Conduct

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Contributing Guidelines

We believe in the power of collaboration. If you have ideas to improve College.ai, feel free to contribute! Check out our Contribution Guidelines to get started.

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

With Docker

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

2. Navigate to the project directory

   • Navigate into the project directory:

     cd Draw-it-out
     

3. Build docker Image (only needed during first installation)

   • Build the Docker image:

     docker build -t draw-it-out:latest .        
     

4. Run docker image

   • Run the Docker image:

     docker run -d -p 3000:3000 draw-it-out:latest
     

Open http://localhost:3000 in your browser.

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
     

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.

Learn More

To learn more about the project you must refer to Learn

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.