Advanced Sales Funnel App with React Flow
Full-stack prompt to build a production-ready sales funnel app with React Flow, lead capture, and analytics.
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 (
);
}
```
Кураторская подборка fizoni.com · структура, примеры использования и рабочие сценарии
Similar prompts
Comprehensive Repository Analysis and Bug Fixing Framework
Framework for systematic repository analysis, bug prioritization, fixing, and documentatio…
💻 PROGRAMMINGCode Review Agent
Code Review Agent evaluating readability, performance, security, and style guideline adher…
💻 PROGRAMMINGAnalyze PDF and Create MATLAB Code
Assistant that analyzes PDF sections, explains the theory simply, writes clear MATLAB code…
💻 PROGRAMMINGVacuum Arc Modeling under Transverse Magnetic Fields
Expert prompt for modeling vacuum arcs under transverse magnetic fields using Fluent UDFs …
💻 PROGRAMMINGMeeting Room Booking Web App Development
Step-by-step prompt to build a PHP and MySQL meeting room booking app with roles and Tailw…
💻 PROGRAMMINGXiaomi Company Self-Service Management System Frontend Development
Frontend developer role to design and build a user-friendly interface for Xiaomi's self-se…
📦 Prompts for Programmers — 411 промптов
Вместо одного промпта — целый набор по теме. Готовые процессы, структура, быстрый старт. Код, рефакторинг, дебаг, архитектура, ревью, SQL и API.…
Забрать набор — $2.99 🎁 6 free prompts
🎁 Get the 6 best prompts for free
Liked this prompt? We've put together 6 more hand-picked ones — for business, code, and productivity. Plus access to the full library of 2000+ prompts.