https://github.com/sushank-ghimire/drawingapp
A simple drawing app made using React, Typescript and Tailwind css having functionality to draw reset board and download the drawn image.
https://github.com/sushank-ghimire/drawingapp
reactjs tailwindcss typescript
Last synced: about 2 months ago
JSON representation
A simple drawing app made using React, Typescript and Tailwind css having functionality to draw reset board and download the drawn image.
- Host: GitHub
- URL: https://github.com/sushank-ghimire/drawingapp
- Owner: Sushank-ghimire
- Created: 2024-09-14T08:00:26.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-11-26T11:56:22.000Z (6 months ago)
- Last Synced: 2025-02-12T15:18:33.502Z (4 months ago)
- Topics: reactjs, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://drawingsmaster.netlify.app
- Size: 62.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DrawingApp
**DrawingApp** is a web-based drawing application built with **React**, **Vite**, and **TypeScript**. It enables users to create drawings using different color options and download their artwork as an image file. The application is developed with a focus on **type safety** using TypeScript, ensuring robust and maintainable code.
## Features
- **Canvas Drawing**: Users can freely draw on the canvas using mouse or touch input.
- **Multiple Color Options**: A variety of colors are available for drawing, allowing users to express their creativity.
- **Download Artwork**: After completing the drawing, users can download their creation as an image file.
- **Type Safety**: The application is built with TypeScript to ensure type safety and reduce potential bugs during development.
## Technologies Used
- **React**: Frontend library for building user interfaces.
- **Vite**: Fast build tool for modern web applications.
- **TypeScript**: Superset of JavaScript for adding static types.
- **HTML5 Canvas**: Used for drawing operations.
## Installation
To run the application locally, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/Sushank-ghimire/DrawingApp.git
```
2. Navigate to the project directory:
```bash
cd DrawingApp
```
3. Install the dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm run dev
```
5. Open your browser and go to `http://localhost:5173`.
## Usage
1. **Select a Color**: Use the color palette to select your desired color for drawing.
2. **Draw on the Canvas**: Use your mouse or touch input to create your artwork on the canvas.
3. **Download Your Drawing**: Once finished, click the "Download" button to save your drawing as an image file.
## Project Structure
- **src/components**: Contains the main components of the application.
- **src/types**: Type definitions for ensuring type safety across the app.
## Contributing
If you want to contribute to this project:
1. Fork the repository.
2. Create a new branch (`git checkout -b feature-branch`).
3. Commit your changes (`git commit -m 'Add new feature'`).
4. Push to the branch (`git push origin feature-branch`).
5. Open a pull request.
## License
This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more information.
---