A FreehandX built with React and TypeScript. Rough.js is used for the sketchy, hand-drawn style. I built the side project for learning purposes. I mainly focused on the functionalities since I already have plenty of projects that are responsive.

Here's what you can do with FreehandX:

• 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.

Breakdown of our Tech Stack:

• Vite – Fast build tool for frontend development

• React.js – Core framework for UI rendering

• TypeScript – Type safety and maintainability

• Rough.js – Generates sketchy, hand-drawn style graphics (key for Excalidraw-like apps)

• CSS – Styling the UI

• Vitest – Unit testing framework, optimized for Vite

• Cypress – End-to-end testing framework

• Testing Library – Helps with UI component testing

Of course, a sweet shout-out—no dev journey is complete without ChatGPT, Cursor AI, Claude AI, 100xDevs, and @Harkirat Bhaiya for their helpful tutorials, along with the official documentation (our boss).😆