Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yasinabdmahmood/react-drawing-app

Unleash your creativity with HappyDrawing, a versatile React drawing app. Create stunning designs, sketches, and doodles with customizable features and a wide color palette. Start your artistic journey today!
https://github.com/yasinabdmahmood/react-drawing-app

css3 react redux

Last synced: 13 days ago
JSON representation

Unleash your creativity with HappyDrawing, a versatile React drawing app. Create stunning designs, sketches, and doodles with customizable features and a wide color palette. Start your artistic journey today!

Awesome Lists containing this project

README 

        





  






# 📗 Table of Contents



- [📖 About the Project](#about-project)

  - [🛠 Built With](#built-with)

    - [Tech Stack](#tech-stack)

    - [Key Features](#key-features)

  - [🚀 Live and Vedio Demo](#live-demo)

- [💻 Getting Started](#getting-started)

  - [Setup](#setup)

  - [Prerequisites](#prerequisites)

  - [Install](#install)

  - [Usage](#usage)

- [👥 Authors](#authors)

- [🔭 Future Features](#future-features)

- [🤝 Contributing](#contributing)

- [⭐️ Show your support](#support)

- [📝 License](#license)



# 📖 HappyDrawing  



> Welcome to HappyDrawing, a versatile drawing app built with React that lets you unleash your creativity and bring your ideas to life. Whether you're a professional artist or just starting out, HappyDrawing is the perfect tool for creating stunning designs, sketches, and doodles.



> With a wide range of features such as customizable line thickness, various shapes, and a vast color palette, HappyDrawing offers limitless possibilities for your creativity. You can also easily adjust the thickness of your strokes or choose from a range of colors to make your artwork truly unique.



> HappyDrawing also offers a handy undo/redo feature, allowing you to make corrections or experiment with different styles without losing your progress.



> So why wait? Start using HappyDrawing today and take the first step towards creating amazing works of art!



## 🛠 Built With 



### Tech Stack 



 

  



### Key Features 



- **Drawing:** Users can draw using their mouse or trackpad on the canvas provided. Simply hold down the left button and move the cursor to create your own unique designs.



- **Thickness:** Users can adjust the thickness of their drawing lines by choosing from a range of thickness options. This allows for more precise drawings and gives users more control over their art.



- **Shapes:** In addition to freehand drawing, the app also allows users to draw a variety of shapes, including squares, circles, arrows, straight lines, and diamonds. This feature is useful for creating more complex designs and shapes.



- **Color:** Users can choose from a variety of colors to draw with, including black, white, red, blue, green, yellow, and more. This allows users to add more color to their art and make their drawings stand out.



- **Undo/Redo:** The app also includes an undo and redo feature, which allows users to correct any mistakes they may have made while drawing. This is a useful feature for those who want to create more polished and professional-looking art.



(back to top)



## 🚀 Live and Vedio Demo 



- [Live Demo Link](https://happydrawing.netlify.app/)

- [Vedio Demo Link](https://drive.google.com/file/d/1clyq3P7mMlK2gLP5fldDUrhNZDLelkqV/view?usp=share_link)



(back to top)



## 💻 Getting Started 



To get a local copy up and running, follow these steps.



### Prerequisites



In order to run this project, you need to have Node.js and npm (Node Package Manager) installed on your machine. If you don't have them installed, you can download them from the official website: [https://nodejs.org/](https://nodejs.org/).



### Setup



1. Clone this repository to your desired folder:



```git clone https://github.com/yasinabdmahmood/react-drawing-app.git```



2. Change directory to the project's root folder:



### Install



3. Install the project's dependencies by running the following command in your terminal:



```npm install```



### Usage



4. To run the app in development mode, execute the following command:



```npm start```



5. Open [http://localhost:3000](http://localhost:3000) to view it in the browser. The app will automatically reload if you make any changes to the code.



6. To build the app for production, run:



```npm run build```



This command will create an optimized production build of the app in the `build` folder.



That's it! You should now be able to run the app locally on your machine. If you have any issues or questions, feel free to reach out to us through [our GitHub repository](https://github.com/[username]/[repository-name]/issues).



(back to top)



## 👥 Authors 



👤 **yaseen**



- GitHub: [@yasinabdmahmood](https://github.com/yasinabdmahmood)

- LinkedIn: [yaseen Abd alwahid](https://www.linkedin.com/in/yaseen-abdalwahid/)



(back to top)



## 🔭 Future Features 



- [ ] **Erase Tool:** We are currently working on adding an erase functionality to the drawing app. This will allow users to easily erase any mistakes or unwanted drawings.

- [ ] **Edit Your Drawing:**  In the next update, we plan to add the ability for users to click on their drawing to edit it. This feature will allow users to make quick and easy edits to their drawings without having to start over from scratch.



(back to top)



## 🤝 Contributing 



Contributions, issues, and feature requests are welcome!



Feel free to check the [issues page](../../issues/).



(back to top)



## ⭐️ Show your support 



Thank you for checking out my repository! If you find it useful, please consider giving it a star. Your support helps me improve this project and make it more accessible to others. To give this repository a star, simply click the star button at the top of the page. If you have any feedback or suggestions, please feel free to open an issue or pull request. Thank you for your support!



(back to top)



## 📝 License 



This project is [MIT](./LICENSE) licensed.



_NOTE: we recommend using the [MIT license](https://choosealicense.com/licenses/mit/) - you can set it up quickly by [using templates available on GitHub](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository). You can also use [any other license](https://choosealicense.com/licenses/) if you wish._



(back to top)