Can I vibecode Cloudcraft?

price variesyou'd save no subscriptionbuild time multi-daycategory diagramsreplaced by 0 people
KINDA
MOATexecution polishcollaboration

The visible cloud architecture diagrams loop is buildable, but a credible replacement needs more than the first screen. Cloudcraft earns its keep through interaction polish, collaboration, so expect a weekend or multi-day build and a narrower personal scope.

In-List Ad$79/30 days
promote your product in the vibecoded list

The Build Prompt

copy it and go build
ready to paste · 3,279 chars
Build an advanced, single-user, browser-based cloud architecture diagramming tool inspired by Cloudcraft's core features. The application should act as a robust substitute, focusing on the visual design and modeling of cloud infrastructure using a modern web stack (React, TypeScript, Vite, TailwindCSS, and IndexedDB).

1. Core Visualization & Diagramming:
   - Implement an intuitive, drag-and-drop canvas for designing cloud architecture.
   - The editor should support adding, selecting, moving, resizing, and connecting various cloud components (e.g., EC2 instances, S3 buckets, RDS databases, VPCs, and Load Balancers).
   - Nodes must have customizable properties (name, type, region, instance size, etc.) and distinct visual styles or icons representing common AWS and Azure resources.
   - Include a toggle to switch between a standard 2D view and an isometric "pseudo-3D" view to mimic Cloudcraft's signature aesthetic. This isometric perspective is crucial for the premium feel.
   - Support standard diagramming interactions: pan and zoom the canvas, multi-select resources, group/ungroup, align nodes, and an robust undo/redo history stack.
   - Provide comprehensive keyboard shortcuts for rapid editing (copy, paste, duplicate, delete, undo, redo, group).

2. Financial & Operational Cost Estimation (Simulated):
   - Embed a localized "Budget" sidebar that dynamically calculates simulated monthly costs based on the specific resources present on the canvas.
   - For example, if a user drags an "m5.large" EC2 instance into the diagram, the cost panel should instantly update to reflect its approximate monthly price, keeping a running total for the architecture.
   - Allow users to export a summary CSV report of the estimated infrastructure costs.

3. Export and Persistence:
   - Diagrams must autosave seamlessly to the browser's IndexedDB so progress is never lost across sessions.
   - Provide robust import and export functionality using a custom JSON format to allow sharing diagrams out-of-band without requiring a centralized database.
   - Support high-quality image export (SVG and PNG) for inclusion in external documentation or presentations.
   - Include a "Generate Infrastructure as Code" button that parses the canvas state and outputs a basic, skeleton Terraform (.tf) script matching the drawn resources.

4. Architecture & Quality Requirements:
   - Start from an empty directory and scaffold the complete project.
   - Use clean, modular, component-based React architecture with strict TypeScript typing.
   - Ensure the application runs entirely client-side with no mandatory backend, avoiding any external telemetry, ads, or third-party authentication.
   - Implement polished UI states: empty states for new diagrams, loading indicators for exports, and clear validation feedback for invalid component connections.
   - Provide a comprehensive README detailing local setup, component architecture, and the local storage data model.
   - Include a suite of focused unit tests for the core diagram state reducer (testing move, connect, delete) and the cost estimation logic.
   - Supply scripts for installation, development, testing, and production builds. Run tests and fix any build or type errors before considering the task complete.
In-List Ad$79/30 days
promote your product in the vibecoded list

What you lose

  • Hosted infrastructure and managed operations from Cloudcraft
  • The original service's mature integrations and ecosystem
In-List Ad$79/30 days
promote your product in the vibecoded list
Share on X ->Your vote helps rank the vibecoded list.

Questions

5 answers