✏️ Sketchify

An Excalidraw-inspired sketching app built with React and TypeScript. Featuring a hand-drawn aesthetic powered by Rough.js, this project was designed as a learning exercise. While functionality took priority, the app currently lacks responsiveness.

---

📦 Technologies

• Vite
• React.js
• TypeScript
• Rough.js
• CSS
• Vitest
• Cypress
• Testing Library

---

🦄 Features

What you can do with Sketchify:

• Choose Tools: Select from pencils, lines, rectangles, and text tools for sketching.
• Draw and Move: Click and drag to draw. Resize or move elements like rectangles or lines by dragging.
• Edit Text: Add text by clicking and typing on the canvas or modify existing text.
• Zoom: Zoom in/out using Ctrl + Scroll or buttons.
• Pan: Navigate the canvas with Space bar + drag or the middle mouse button.

🎯 Keyboard Shortcuts

• Navigate Canvas: Space bar + 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.

---

👩🏽‍🍳 Development Process

1. Canvas Rendering: Set up a canvas with Rough.js for the sketchy visuals.
2. Drawing Tools: Added tools for freehand drawing, lines, rectangles, and text.
3. Element Manipulation: Enabled moving and resizing shapes.
4. Undo/Redo: Implemented history tracking for seamless edits.
5. Navigation: Introduced pan and zoom for better large canvas handling.
6. UI Enhancements: Designed a user-friendly interface for intuitive use.
7. Testing: Conducted end-to-end tests with Cypress and Testing Library.

---

📚 Lessons Learned

Key takeaways from Sketchify:

• History Management: Created a useHistory hook for undo/redo functionality.
• Geometry Mastery: Improved math skills for shape measurements and accuracy.
• New Tools: Discovered Rough.js for creating hand-drawn-style graphics.
• Event Handling: Enhanced interactivity with wheel listeners for zooming and panning.
• Advanced React: Explored useLayoutEffect for efficient rendering.

---

💭 Future Improvements

• Add more colors and a custom color picker.
• Introduce additional tools like circles and an eraser.
• Expand shapes to include triangles, stars, etc.
• Add themes (e.g., dark mode, light mode).
• Support advanced text styling (font size, colors, etc.).
• Create specific types for Rough.js elements instead of using any.

---

🚦 How to Run Locally

1. Clone the repository.
2. Run npm install or yarn to install dependencies.
3. Start the development server with npm run dev or yarn dev.
4. Open http://localhost:5173 in your browser.