An advanced, yet intuitive, shape editing tool built with modern web technologies. This application offers seamless drawing, shape modification, AI-powered shape recognition, and the ability to save projects to a gallery for future interaction and editing, providing a smooth and user-friendly experience.
For the AI features is used free model Qwen2.5 VL 72B Instruct (FREE).
Authentication is not implemented, and draws data is stored in localStorage since this is a test project. However, a database can be integrated, and authentication can be configured if needed.
- Draw & Edit – Create and modify sketches with an easy-to-use canvas.
- Save Projects – Save your projects to the gallery for easy access and future editing.
- Shape Modification – Select a shape and easily switch between different geometric shapes using a dedicated button.
- Project Gallery – Organize your saved projects in the gallery, preview them, and manage them effortlessly.
- Export Options - Download your work in multiple formats, including SVG and PNG.
- AI Shape Recognition – Select a hand-drawn shape and press the AI button to convert it into a precise geometric form.
- User-Friendly Design – Clean UI with responsive layout and easy navigation.
- Responsive & Adaptive UI – The editor is fully optimized for desktops, tablets, and mobile devices.
- Next.js – Provides SSR and API routes, ensuring fast and efficient rendering.
- React – Enables dynamic and component-based UI interactions.
- TailwindCSS – A utility-first CSS framework for quick and beautiful styling.
- Shadcn/UI – Delivers high-quality UI components for a smooth user experience.
- Tldraw – The core library behind the drawing editor, providing shape manipulation tools.
- Toaster (react-hot-toast) – Cares of rendering all notifications emitted.
- tRPC – Ensures type-safe API communication between frontend and backend.
- Zod – Used for input validation and schema enforcement.
- Lodash Debounce – Optimizes auto-save by reducing redundant API calls.
- Node.js (v16 or later)
- npm (v8 or later)
- Clone the repository:
git clone https://github.com/exslym/vidext_test_task.git
cd vidext_test_task- Install dependencies:
npm install- Create a .env file in the root of the project
- Sign in the OPENROUTER.AI ( via Google or Github)
- Choose and click on prefered visual understanding model (Qwen2.5 VL 72B Instruct (FREE) is used in this project)
- Then go to tab API and click Create API key
- Add your key as NEXT_OPENROUTER_API_KEY in .env
- Start the development server:
npm run dev- Open your browser and go to:
http://localhost:3000- After runnig the app locally open a new browser tab and navigate to the following route:
http://localhost:3000/test-api- Available API Methods for Testing:
Get Data
Set Data
Delete All Data
Recognize ShapeThe testing interface is intended for local development and debugging purposes only.
- Go to the Editor – Navigate to the editor page from the homepage.
- Draw & Edit Shapes – Use the interactive canvas to create and modify shapes.
- Modify a Shape – Select a shape and click the Modify Shape button to change its type.
- Recognize a Shape (AI) – Select a shape and click Recognize Shape (AI) to detect its type.
- Save Project – Save your projects and see them in the gallery page.
- Go to the Gallery – Navigate to the gallery page from the homepage or editor page and there you can edit or delete your projects.