https://github.com/mthirumalai2905/sketching-app-using-reactjs-roughjs
🎨 My Sketch app project is centered on leveraging the functional nature of React, emphasizing declarative components and efficient state management.
https://github.com/mthirumalai2905/sketching-app-using-reactjs-roughjs
reactjs roughjs
Last synced: about 2 months ago
JSON representation
🎨 My Sketch app project is centered on leveraging the functional nature of React, emphasizing declarative components and efficient state management.
- Host: GitHub
- URL: https://github.com/mthirumalai2905/sketching-app-using-reactjs-roughjs
- Owner: mthirumalai2905
- Created: 2024-01-11T12:32:01.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-01-28T10:11:27.000Z (over 1 year ago)
- Last Synced: 2025-04-14T06:08:28.839Z (about 2 months ago)
- Topics: reactjs, roughjs
- Language: JavaScript
- Homepage: https://sketch-green.vercel.app
- Size: 213 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Sketch App with Rough.js
This is a simple Sketch app built using React and Rough.js. The app allows users to draw with a pencil, create text elements, and select areas with a rectangle. Additionally, it supports undo and redo functionalities.
## Features
- **Pencil Tool:** Draw freehand with the pencil tool.
- **Text Tool:** Add text elements to your canvas.
- **Selection Rectangle:** Create a selection rectangle to select and move multiple elements.
- **Undo/Redo:** Easily undo or redo your actions.
## Prerequisites
- Node.js: Make sure you have Node.js installed. You can download it from [nodejs.org](https://nodejs.org/).
## Getting Started
Follow these steps to get the app up and running on your local machine:
1. Clone the repository:
```bash
git clone https://github.com/mthirumalai2905/Sketching-app-using-reactjs-roughjs.git
2. Setting up the Project:
```bash
Change into the project directory:
cd sketch-app
Install dependencies:
npm install
Start the development server:
npm start
## Usage
Pencil Tool: Click and drag to draw freehand.
Text Tool: Click to add a text element. Enter text in the prompt.
Selection Rectangle: Press and drag to create a selection rectangle. Selected elements can be moved.
Undo/Redo: Use the Undo and Redo buttons to undo or redo your actions.
## Folder Structure
-**src/:** Contains the React components and application logic.
-**public/:** Static assets and HTML template.
-**node_modules/:** Installed dependencies.
-**package.json:** Project configuration file.
## Contributing
Feel free to contribute to this project by submitting issues or pull requests.
License
This project is licensed under the MIT License - see the LICENSE file for details.