https://github.com/hasanyahya101/artify-vite

This is a paint application in react. It uses a pencil to draw on the canvas. Moreover, you can draw shapes and text on the canvas as well. It also allows users to change colors and thickness of strokes. It also allows for undo and redo operations.
https://github.com/hasanyahya101/artify-vite

canvas colors pencil radix-ui react redo shapes static text undo vite

Last synced: 2 months ago
JSON representation

This is a paint application in react. It uses a pencil to draw on the canvas. Moreover, you can draw shapes and text on the canvas as well. It also allows users to change colors and thickness of strokes. It also allows for undo and redo operations.

• Host: GitHub
• URL: https://github.com/hasanyahya101/artify-vite
• Owner: HasanYahya101
• License: mit
• Created: 2024-07-09T00:06:57.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-11-28T00:13:43.000Z (6 months ago)
• Last Synced: 2025-02-04T14:36:17.099Z (4 months ago)
• Topics: canvas, colors, pencil, radix-ui, react, redo, shapes, static, text, undo, vite
• Language: JavaScript
• Homepage: https://hasanyahya101.github.io/Artify-Vite/
• Size: 4.23 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Artify (React + Vite)

## Introduction

This is a basic paint application in react. It uses a pencil to draw on the canvas. Moreover, you can draw shapes and text on the canvas as well. It also allows users to change colors and thickness of strokes. It also allows for `undo` and `redo` operations.

## UI Library

Radix UI and ShadCN components were used to create the UI of the website. Moreover, Vite was used to create this React Project.

## Deployment

This project was deployed to Github Pages and can be tested there. No servers or databases were used in this Project.

## Preview

![Screenshot 2024-07-11 092742](https://github.com/HasanYahya101/Artify-Vite/assets/118683092/b7f3880d-7fca-47bd-8355-855f0e03eb4e)

![Screenshot 2024-07-11 092814](https://github.com/HasanYahya101/Artify-Vite/assets/118683092/ddac67fe-f6b9-403e-b17b-d9f27e7decf7)

![Screenshot 2024-07-11 092833](https://github.com/HasanYahya101/Artify-Vite/assets/118683092/0c9d0146-c72e-428c-b32c-4e1049716010)

![Screenshot 2024-07-11 092853](https://github.com/HasanYahya101/Artify-Vite/assets/118683092/51213c44-6c91-40e9-bc7e-140316f4b65b)

![Screenshot 2024-07-11 092952](https://github.com/HasanYahya101/Artify-Vite/assets/118683092/bdfebed1-ef80-420f-b892-994d367d172f)

![Screenshot 2024-07-11 093018](https://github.com/HasanYahya101/Artify-Vite/assets/118683092/0f0b64ca-e626-441f-8d37-e74bc1f6a19d)

![Screenshot 2024-07-11 093113](https://github.com/HasanYahya101/Artify-Vite/assets/118683092/12658176-6771-49a6-b499-5f0568f95517)

![Screenshot 2024-07-11 093130](https://github.com/HasanYahya101/Artify-Vite/assets/118683092/91d1b767-ee64-442d-a010-aed201f602f2)

![Screenshot 2024-07-11 093142](https://github.com/HasanYahya101/Artify-Vite/assets/118683092/e35ff3ce-25d8-462f-8065-13d7117bfa2c)

![Screenshot 2024-07-11 093206](https://github.com/HasanYahya101/Artify-Vite/assets/118683092/4be4194f-49b7-4202-b338-61ea116c3b8c)

![Screenshot 2024-07-11 093219](https://github.com/HasanYahya101/Artify-Vite/assets/118683092/1936c6f9-3511-428b-84be-217343d6814c)

![Screenshot 2024-07-11 093237](https://github.com/HasanYahya101/Artify-Vite/assets/118683092/62df81fa-fea2-4870-ad38-e21bf11dc32b)

![Screenshot 2024-07-11 093312](https://github.com/HasanYahya101/Artify-Vite/assets/118683092/fb30a751-b0da-43cd-9a40-4af91b85cfdf)

![Screenshot 2024-07-11 093337](https://github.com/HasanYahya101/Artify-Vite/assets/118683092/3c67c893-ecc0-4c8d-9c24-54d7e7197275)

![Screenshot 2024-07-11 093358](https://github.com/HasanYahya101/Artify-Vite/assets/118683092/8b9ab5a5-b936-4aa5-9456-f2a8d4e4c5b2)

![image](https://github.com/user-attachments/assets/72b11704-d846-42ff-9be4-4b0392cb1ddd)

## React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh

- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh