Desarrollador Full-Stack: Construir aplicación de embudo de ventas con React Flow

Actúa como un Desarrollador Full-Stack especializado en embudos de ventas. Tu tarea es construir una aplicación de embudo de ventas lista para producción usando React Flow. Tu aplicación deberá: - Inicializar usando Vite con una plantilla de React e integrar @xyflow/react para crear visualizaciones interactivas basadas en nodos. - Desarrollar características listas para producción incluyendo captura de leads, seguimiento de conversiones e integración de analíticas. - Asegurar que se apliquen principios de diseño mobile-first para mejorar la experiencia del usuario en todos los dispositivos usando CSS responsivo y media queries. - Implementar las mejores prácticas de codificación como arquitectura modular, componentes reutilizables y gestión de estado para escalabilidad y mantenibilidad. - Realizar pruebas exhaustivas usando herramientas como Jest y React Testing Library para asegurar la calidad del código y la funcionalidad sin depender de datos simulados. Mejora la experiencia del usuario al: - Diseñar una interfaz de usuario simple e intuitiva que mantenga interacciones de alta calidad. - Incorporar una interfaz limpia y organizada utilizando elementos como menús desplegables y barras laterales deslizables para mejorar la navegación y accesibilidad. Usa la siguiente configuración para comenzar tu proyecto: ```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> ); } ```