model coding user risk: low

React Flow Sales Funnel Application Builder

Act as a full-stack developer specialized in sales funnels to build a production-ready sales funnel application using React Flow, initialized with Vite and @xyflow/react, featuring…

PROMPT

Act as a Full-Stack Developer specialized in sales funnels. Your task is to build a production-ready sales funnel application using React Flow. Your application will:

- Initialize using Vite with a React template and integrate @xyflow/react for creating interactive, node-based visualizations.
- Develop production-ready features including lead capture, conversion tracking, and analytics integration.
- Ensure mobile-first design principles are applied to enhance user experience on all devices using responsive CSS and media queries.
- Implement best coding practices such as modular architecture, reusable components, and state management for scalability and maintainability.
- Conduct thorough testing using tools like Jest and React Testing Library to ensure code quality and functionality without relying on mock data.

Enhance user experience by:
- Designing a simple and intuitive user interface that maintains high-quality user interactions.
- Incorporating clean and organized UI utilizing elements such as dropdown menus and slide-in/out sidebars to improve navigation and accessibility.

Use the following setup to begin your project:

```javascript
pnpm create vite my-react-flow-app --template react
pnpm add @xyflow/react

import { useState, useCallback } from 'react';
import { ReactFlow, applyNodeChanges, applyEdgeChanges, addEdge } from '@xyflow/react';
import '@xyflow/react/dist/style.css';

const initialNodes = [
  { id: 'n1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
  { id: 'n2', position: { x: 0, y: 100 }, data: { label: 'Node 2' } },
];
const initialEdges = [{ id: 'n1-n2', source: 'n1', target: 'n2' }];

export default function App() {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);

  const onNodesChange = useCallback(
    (changes) => setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot)),
    [],
  );
  const onEdgesChange = useCallback(
    (changes) => setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)),
    [],
  );
  const onConnect = useCallback(
    (params) => setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)),
    [],
  );

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
      />
    </div>
  );
}
```

REQUIRED CONTEXT

Vite setup with React template and @xyflow/react
initial React Flow App component code

OPTIONAL CONTEXT

sales funnel specific features like lead capture and analytics

ROLES & RULES

Role assignments

Act as a Full-Stack Developer specialized in sales funnels.

EXPECTED OUTPUT

Format

code

Constraints

production-ready
modular architecture
reusable components
state management
mobile-first responsive design
Jest and React Testing Library tests
intuitive UI with dropdowns and sidebars
no mock data in tests

SUCCESS CRITERIA

Initialize using Vite with a React template and integrate @xyflow/react.
Develop production-ready features including lead capture, conversion tracking, and analytics integration.
Ensure mobile-first design principles are applied.
Implement best coding practices such as modular architecture, reusable components, and state management.
Conduct thorough testing using Jest and React Testing Library without relying on mock data.
Design a simple and intuitive user interface with dropdown menus and slide-in/out sidebars.

FAILURE MODES

May not integrate all specified production-ready features like analytics.
Could neglect mobile-first responsive design.
Might skip thorough testing without mocks leading to untested code.
May not enhance UX with specified UI elements like sidebars.

EXAMPLES

Includes pnpm setup commands and an initial ReactFlow App component.

CAVEATS

Missing context

Backend stack for full-stack (e.g., Node.js, database).
Exact sales funnel stages or node types.
Output format (e.g., full codebase, key files, zip).
Styling framework (e.g., Tailwind CSS).
Deployment or hosting details for production-ready.

Ambiguities

Unclear what specific nodes and edges represent in a sales funnel context (e.g., stages like landing page, checkout).
Lead capture and conversion tracking implementation details (e.g., forms, API endpoints).
Analytics integration unspecified (e.g., Google Analytics, custom events).
Testing scope not detailed (e.g., unit, integration tests for which components).

QUALITY

OVERALL: 0.65
CLARITY: 0.85
SPECIFICITY: 0.75
REUSABILITY: 0.20
COMPLETENESS: 0.70

IMPROVEMENT SUGGESTIONS

Explicitly define sales funnel stages and corresponding node/edge types (e.g., 'Awareness Node: Landing Page').
Specify backend requirements or clarify frontend-only with mock APIs.
Detail required tests (e.g., 'Test node dragging, form submissions, responsive breakpoints').
Structure output as a complete project folder tree with key files highlighted.
Add placeholders for customization like [FUNNEL_STAGES] to improve reusability.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.