Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/bmukesh23/excalisketch

🎨 An Excalidraw clone built with React and TypeScript.
https://github.com/bmukesh23/excalisketch

drawingboard excalidraw excalidraw-clone react typescript vite

Last synced: 17 days ago
JSON representation

🎨 An Excalidraw clone built with React and TypeScript.

Awesome Lists containing this project

README 

        
# 🎨 ExcaliSketch



An Excalidraw clone built with React and TypeScript. Rough.js is used for the sketchy, hand-drawn style. This isn't responsive.



## 📦 Technologies



- `Vite`

- `React.js`

- `TypeScript`

- `CSS`

- `Rough.js`

- `Vitest`



## ✨ Features



Here's what you can do with ExcaliSketch:



- **Choose a Tool**: You have pencils, lines, rectangles, and text tools. Pick one and start creating.



- **Draw and Move**: Click and drag on the canvas to draw. To move something, select it and drag it to a new spot. Also, resize elements by dragging the corners. Resizing only works on rectangles or lines.



- **Edit Text**: Click on the canvas and start typing to add text to your drawings. You can also edit existing text.



- **Zoom**: Use Ctrl + Scroll or click on the buttons to zoom in for detail or out to see the whole picture.



- **Pan**: Hold the Space bar and drag or use the middle mouse button to move around the whiteboard canvas.



### 🎯 Keyboard Shortcuts:



Speed up your work with these shortcuts:



- **Canvas Navigation**: Press the Space bar and drag or use the middle mouse button.

- **Undo**: Ctrl + Z.

- **Redo**: Ctrl + Y or Ctrl + Shift + Z.

- **Zoom In**: Ctrl + Plus.

- **Zoom Out**: Ctrl + Minus.



## 📚 What I Learned



During this project, I've picked up important skills and a better understanding of complex ideas, which improved my logical thinking.



### 🧠 useHistory Hook:



- **Logical Thinking**: Creating the `useHistory` hook taught me to think about how to manage saving, undoing, and redoing actions. I had to really understand how to track changes and plan out user actions.



### 📏 Coordinates and Measurements:



- **Accuracy**: I've become better at working with shapes and points, like knowing if a point is inside a shape. This required careful measurements.

- **Math Skills**: I used math functions to make sure everything was placed correctly and to calculate distances.



### 🎨 Discovering Rough.js:



- **New Tools**: I found out about Rough.js, which lets me make graphics look hand-drawn. This was a new and exciting tool for me.



### 🔍 Deep Dive into Functions:



- **Complex Functions**: I spent time understanding the `getSvgPathFromStroke` function, which turns drawing movements into smooth paths.



### ✏️ Managing Points and Drawing:



- **Working with Points**: I learned how to collect and use points from drawings, which involved understanding and managing data to reflect what the user does.



### 🎣 React Hooks and Rendering:



- **New Knowledge**: I learned about `useLayoutEffect`, which helps make sure changes are done before the screen updates. This was useful for certain drawing functions.



### 🎡 Advanced Event Handling:



- **User Interaction**: I worked with the wheel event listener, which allowed me to add zooming and panning features. This made the app more interactive and user-friendly.



### 📈 Overall Growth:



Each part of this project helped me understand more about building apps, managing complex information, and improving user experience. It was more than just making a tool. It was about solving problems, learning new things, and improving my skills for future work.



## 💭 How can it be improved?



- Add more colors to the color picker.

- Add more tools like a circle, eraser, and more.

- Add more shapes like triangles, stars, and more.

- Add more keyboard shortcuts to make things faster.

- Add more themes like dark mode, light mode, and more.

- Add more text options like font size, font color, and more.

- Instead of have any in two places, create a type for the rough.js elements.



## 🚦 Running the Project



To run the project in your local environment, follow these steps:



1. Clone the repository to your local machine.

2. Run `npm install` or `yarn` in the project directory to install the required dependencies.

3. Run `npm run start` or `yarn start` to get the project started.

4. Open [http://localhost:5173](http://localhost:5173) (or the address shown in your console) in your web browser to view the app.