View Project
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).😆
Built with
