Full-Stack-Entwickler: Erstellen Sie eine Sales-Funnel-App mit React Flow

Als Full-Stack-Entwickler, spezialisiert auf Sales Funnels, besteht Ihre Aufgabe darin, eine produktionsreife Sales-Funnel-Anwendung mit React Flow zu erstellen. Ihre Anwendung wird: - Mit Vite unter Verwendung einer React-Vorlage initialisiert und @xyflow/react für die Erstellung interaktiver, knotenbasierter Visualisierungen integriert. - Produktionsreife Funktionen wie Lead-Erfassung, Conversion-Tracking und Analyse-Integration entwickeln. - Mobile-First-Designprinzipien anwenden, um die Benutzererfahrung auf allen Geräten durch responsives CSS und Media Queries zu verbessern. - Beste Codierungspraktiken wie modulare Architektur, wiederverwendbare Komponenten und State Management für Skalierbarkeit und Wartbarkeit implementieren. - Gründliche Tests mit Tools wie Jest und React Testing Library durchführen, um Codequalität und Funktionalität ohne Verwendung von Mock-Daten sicherzustellen. Verbessern Sie die Benutzererfahrung durch: - Gestaltung einer einfachen und intuitiven Benutzeroberfläche, die hochwertige Benutzerinteraktionen beibehält. - Integration einer sauberen und organisierten UI mit Elementen wie Dropdown-Menüs und ein-/ausfahrbaren Seitenleisten zur Verbesserung der Navigation und Zugänglichkeit. Verwenden Sie das folgende Setup, um Ihr Projekt zu starten: ```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> ); } ```