Can I vibecode ON1 Photo RAW?

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

The visible photo editing suite loop is buildable, but a credible replacement needs more than the first screen. ON1 Photo RAW earns its keep through editor polish, assets, algorithms, 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,896 chars
markdown
Act as an expert AI coding assistant. Your task is to vibe-code a highly polished, interactive, and responsive web application that replicates the core features of ON1 Photo RAW, a photo editing suite.

### Technology Stack & Architecture
- **Frontend Framework**: Use React (Next.js or Vite) with TypeScript to ensure robust type safety and maintainability.
- **Styling**: Employ Tailwind CSS for a utility-first approach, combined with custom CSS modules for intricate micro-animations, glowing effects, and glassmorphism.
- **State Management**: Utilize Zustand or React Context for managing complex global state such as the current workspace, active layers, and tool selection.
- **Storage**: Implement IndexedDB for fast, reliable, and private local storage of user projects, media assets, and history. The application must function entirely within the browser without requiring a backend server.

### UI/UX Design & Aesthetics
- **Premium Experience**: The design must evoke a sense of professional, state-of-the-art software. Use a sleek, immersive dark mode by default (e.g., deep charcoal `#121212` backgrounds with vibrant, curated accent colors like electric blue or neon purple).
- **Typography**: Integrate modern, highly legible web fonts such as 'Inter', 'Roboto', or 'Outfit'. Establish a clear visual hierarchy.
- **Micro-interactions**: Incorporate smooth, 60fps CSS transitions, engaging hover states on interactive elements, and satisfying click feedback. Modals and floating panels should utilize soft backdrop blurs (glassmorphism) for depth.
- **Workspace Layout**: Create a standard professional workspace layout featuring:
  - **Left Sidebar**: A vertical toolbar containing all primary tools (e.g., select, draw, insert text, upload media).
  - **Center Canvas**: An infinite or fixed-size interactive workspace. Implement intuitive controls like mouse-wheel zoom and spacebar-drag panning.
  - **Right Sidebar**: A contextual properties panel that dynamically updates based on the selected object (showing dimensions, colors, opacity, layer blending modes).
  - **Top Navigation**: Global actions including Undo, Redo, Export, Save, and a responsive menu.

### Core Functionalities to Implement
1. **Photo Organizer (Browse)**: Create a module for browsing local directories, displaying thumbnails, and rating/culling photos quickly.
2. **Develop Module**: Implement a comprehensive raw-style development panel with sliders for tone, color, details, and lens corrections.
3. **Local Adjustments**: Build a system for adding local adjustment layers with gradient masks, radial masks, and brush masks.
4. **Effects & Presets**: Pre-configure complex multi-layered presets that instantly apply a specific look (e.g., vintage, cinematic, black & white).
5. **Batch Export**: Allow users to select multiple edited photos and export them simultaneously with specific resizing rules, watermarks, and file naming conventions.

### Implementation Steps
1. **Foundation**: Scaffold the project using the required stack. Define the design system, color tokens, and layout components.
2. **State & Architecture**: Define robust TypeScript interfaces for your data model (e.g., nodes, edges, layers, text objects). Set up the local IndexedDB database.
3. **Core Engine**: Implement the main interactive area. Whether it's a Canvas API implementation, SVG manipulation, or DOM-based layout, ensure it is performant and responsive to user input.
4. **Tools & UI**: Build the toolbars, property panels, and link them bidirectionally to the central state.
5. **Refinement**: Add the undo/redo stack, ensure high-quality export functionality, and rigorously polish the design. Fix any visual bugs and ensure the UI feels magical and alive.

Provide the complete, working, and production-ready codebase. Prioritize visual excellence and a seamless user experience above all else.
In-List Ad$79/30 days
promote your product in the vibecoded list

What you lose

  • Hosted infrastructure and managed operations from ON1 Photo RAW
  • 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