NinjaSketch

Overview

NinjaSketch is an Excalidraw clone built with React and TypeScript, using Rough.js for a hand-drawn style. The main focus was on functionalities, with the app not being responsive, catering to learning purposes. It offers tools like pencils, lines, rectangles, and text tools, allowing users to draw, move, resize elements, edit text, zoom in and out, pan around the canvas, as well as various keyboard shortcuts for ease of use.

Features

• Choose a Tool: Select from pencils, lines, rectangles, and text tools.
• Draw and Move: Click and drag to draw on the canvas and move elements around.
• Edit Text: Add or edit text on the canvas.
• Zoom: Zoom in for detail or out to view the whole canvas.
• Pan: Move around the canvas using the Space bar or middle mouse button.
• Keyboard Shortcuts: Access shortcuts for canvas navigation, undo, redo, zoom in, and zoom out.

Installation

To install NinjaSketch, follow these steps:

1. Clone the repository: git clone [repository_url]
2. Install dependencies: npm install
3. Start the development server: npm run dev
4. Access the application at localhost:3000

Summary

NinjaSketch is a tool developed with React and TypeScript, focusing on functionalities like drawing, editing, and navigating a canvas. With features like different tools, zoom, pan, and keyboard shortcuts, it offers a user-friendly experience for sketching and creating diagrams. The project also highlights the importance of documenting features and learning processes, showcasing the value of stepping back, reflecting, and documenting to enhance understanding and learning new concepts.