Prompt to Prompt: Sales Funnel App with React Flow
Prompt to Prompt: Sales Funnel App with React Flow is a verified PROMPT blueprint on Promptally in System & Base Contexts optimized for leading AI models. Curated Coding prompt from awesome-prompts library split. Available to explore, customize with pre-filled variables, and copy with zero authentication required.
Technical Specifications
| Specification | Value |
|---|---|
| Artifact type | PROMPT (System & Base Contexts) |
| Compatible engines | Universal / Model Agnostic |
| Input variables | None (pre-filled) |
| Approximate tokens | 617 |
| Source file | prompt-prompt-sales-funnel-app-with-react-flow.txt |
| Access tier | Free public (MIT) |
Pre-Filled Template
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>
);
}
```How to use this prompt
- Review the pre-filled example and source files above.
- Copy the template or download
prompt-prompt-sales-funnel-app-with-react-flow.txt, then use it in your model, IDE, or workflow tool. - Compare your result with the sample output when one is provided.
Frequently Asked Questions
How do I use Prompt to Prompt: Sales Funnel App with React Flow?
Open the prompt on Promptally, review the pre-filled example, then copy the template or download prompt-prompt-sales-funnel-app-with-react-flow.txt and paste it into your model, IDE or workflow tool. Prompt to Prompt: Sales Funnel App with React Flow is a static blueprint with no dynamic variables. Copy it and use it as-is.
Is Prompt to Prompt: Sales Funnel App with React Flow free?
Yes. Prompt to Prompt: Sales Funnel App with React Flow is free to view, copy and download on Promptally without creating an account. It is published under the MIT license.
What variables does Prompt to Prompt: Sales Funnel App with React Flow need?
Prompt to Prompt: Sales Funnel App with React Flow is a static blueprint with no dynamic variables. Copy it and use it as-is.