Welcome to ShapeFlow, the ultimate shape editing app! This project is designed to give users a seamless experience in creating, editing, and managing various shapes on a canvas. Built with Preact, Tailwind CSS, TypeScript, and Vite, ShapeFlow ensures a fast, responsive, and delightful user experience.
- Dynamic Canvas: Create a limitless number of shapes on the canvas. 🖌️
- Shape Selection: Choose from a variety of shapes (squares, circles, stars, and more) via a dropdown menu. 🔲🔵⭐
- Customization: Modify the hue, size, and number of points (for stars) of your shapes with ease. 🎨
- Fine & Coarse Granularity: Select and deselect shapes with fine-grained and coarse-grained controls. 🔍
- Interactive UI: Intuitive and user-friendly interface built with Preact and styled with Tailwind CSS. 💻
- Preact: A fast 3kB alternative to React with the same modern API. ⚛️
- Tailwind CSS: A utility-first CSS framework packed with classes to build custom designs. 💅
- TypeScript: A strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. 📏
- Vite: A next-generation frontend tooling that is incredibly fast and optimized for modern web development. ⚡
Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
- Node.js and npm installed
- Git installed
-
Clone the repo:
git clone https://github.com/jsy10101/ShapeFlow.git cd ShapeFlow -
Install dependencies:
npm install
-
Run the app:
npm run dev
-
Open your browser and navigate to
http://localhost:3000to see ShapeFlow in action! 🌐
- Add Shapes: Use the "Add" button and select your desired shape from the dropdown menu.
- Edit Shapes: Select a shape to modify its hue, size, and other properties using the controls on the right.
- Manage Shapes: Use the "Delete" button to remove shapes, and the "Clear" button to reset the canvas.
- Undo/Redo: Use the Undo and Redo buttons to navigate through your editing history.