Can I vibecode Creately?

text
Build a deliberately narrow, personal substitute for Creately. Do not attempt to build a full clone or a massive enterprise collaborative whiteboard. You must use exactly this technology stack: React, TypeScript, Vite as the bundler, and IndexedDB for local in-browser storage. Do not deviate from this stack or introduce alternative frameworks.

The primary job to be done is to build a browser-based diagramming and whiteboard editor. The editor must support dragging and dropping shapes, resizing elements, connecting shapes with lines or arrows, keyboard shortcuts (e.g., copy, paste, delete, undo, redo), robust autosave functionality, and exporting the canvas as either SVG or PNG. 

Start the project from an empty folder and build a complete, working application. The default and only mode should be single-user and strictly private. All user data, including canvas state and history, must be stored locally in the browser using IndexedDB. Do not include analytics, telemetry, ads, or third-party account sign-ins. Store any external credentials or configuration secrets in a `.env` file, provide a `.env.example`, and ensure secrets are never hardcoded or committed to version control.

Populate the app with realistic, clearly labeled sample diagrams that the user can easily delete or modify. Design and implement a highly polished but minimalistic interface that completes the core diagramming loop end-to-end. The interface must explicitly handle clear empty states (when no diagrams exist), loading states, validation errors, success states (e.g., "Saved successfully"), and failure states. Add an import and export mechanism (e.g., saving the raw JSON state of the canvas) so the user's data is never trapped in the application. Ensure the UI employs accessible keyboard navigation, proper ARIA labels, clear focus states, and sensible color contrast ratios. Validate all untrusted input (e.g., imported JSON files) and never log private data.

Deliberately exclude the paid-product advantages of the original application: large pre-made template libraries, high-fidelity import/export with proprietary formats (like Visio), real-time multiplayer collaboration, presentation modes, and enterprise access controls. Do not fake integrations, network effects, proprietary data, or security claims. 

Write focused unit tests for the underlying data model (e.g., the state management of shapes and connections) and the most important workflows (like adding a shape and connecting it). Add one end-to-end smoke test that proves the core canvas loop works. Create a comprehensive README that includes setup instructions, architecture details, data location (IndexedDB), backup steps, and known limitations. Add NPM scripts for install, development, test, build, and a production-style local preview. Run the tests and build the project before finishing, resolving any errors that occur.