How to vibe codePolarr

Prerequisites

• Node.jsfree

  Required for running the web frontend build tools and bundling assets.

• GitHubfree

  Source code repository and deployment trigger.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding tool for scaffolding the web app architecture and React UI shell.

• Cursor

  Ideal for inspecting image manipulation components and editing WebGL/Canvas shader code inline.

Build guide

1. 01Scaffold Web Application Shell

   Set up the Next.js framework with Tailwind CSS, TypeScript, and configure the project directory structure for a desktop-class web photo editor layout.

   Scaffold a new Next.js 16 app with TypeScript, Tailwind CSS v4, and App Router. Create a professional dark-mode photo editor layout with a collapsible left sidebar for adjustment categories (HSL, Curves, Masks), a top toolbar for export and zoom controls, a central canvas workspace area, and a bottom filmstrip tray for thumbnail preloads. Configure better-auth for user session management with a Turso SQLite database backend. Ensure the layout uses CSS flexbox and grid to fill the viewport without native window scrollbars, mimicking a professional desktop creative application.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Implement HTML5 Canvas Image Rendering Pipeline

   Build the core client-side image loading and basic adjustment pipeline using HTML5 Canvas 2D and image data manipulation buffers.

   Implement a client-side image loading and rendering pipeline using HTML5 Canvas and WebGL2 contexts inside a React component. Create an image manager state hook that loads imported JPEG or PNG files into an offscreen canvas buffer. Write shader-based or canvas pixel manipulation utility functions for basic global adjustments: Exposure, Contrast, Saturation, Highlights, Shadows, and Temperature. Implement zoom, pan, and fit-to-screen viewport matrix calculations so users can inspect high-resolution images smoothly without UI stutter.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Build Advanced Adjustment Panels & Curve Controls

   Construct interactive UI control widgets for tone curves, color wheels, HSL tuning sliders, and local mask definitions.

   Build interactive React UI components for advanced photo editing adjustments. Create a Tone Curve widget with draggable control points rendering cubic spline interpolations on an SVG canvas. Create an HSL color picker panel with interactive hue ring selectors and luminance sliders for 8 distinct color channels. Implement a local mask management sidebar allowing users to add, subtract, and modify radial, gradient, and brush masks stored as alpha maps combined over the base canvas rendering layer.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Construct Filter Preset and Marketplace System

   Implement a preset saving mechanism and a community filter sharing store backed by Turso database tables.

   Create a filter preset serialization system that exports all image adjustment values, curves, and mask parameters into a structured JSON schema. Build a community filter marketplace interface within the app where users can browse, preview, publish, and import custom community-made filters. Set up Turso database tables via Drizzle ORM to store filter metadata, creator profiles, download counts, and user favorites. Implement search filtering and tag categorization for the community feed.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Build High-Resolution Export and Polish

   Implement high-resolution image rendering, watermarking, custom batch export options, and final UI polish.

   Implement a high-resolution export module that applies the active adjustment pipeline and filter stack to full-resolution original images using an offscreen WebGL canvas rendering pass. Add customizable export options including JPEG quality scaling, file size targets, and custom text or image watermarking overlays positioned via drag-and-drop coordinates. Polish all user interactions with keyboard shortcuts (undo/redo, zoom toggles), loading skeletons, and error handling for unsupported file formats.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Polarr