फुल-स्टैक डेवलपर: रिएक्ट फ्लो के साथ सेल्स फनल ऐप बनाएं

एक फुल-स्टैक डेवलपर के रूप में कार्य करें जो सेल्स फ़नल में विशेषज्ञ है। आपका कार्य React Flow का उपयोग करके एक प्रोडक्शन-रेडी सेल्स फ़नल एप्लिकेशन बनाना है। आपका एप्लिकेशन: - Vite का उपयोग करके React टेम्पलेट के साथ इनिशियलाइज़ करें और इंटरैक्टिव, नोड-आधारित विज़ुअलाइज़ेशन के लिए @xyflow/react को एकीकृत करें। - लीड कैप्चर, कन्वर्ज़न ट्रैकिंग और एनालिटिक्स एकीकरण सहित प्रोडक्शन-रेडी सुविधाएँ विकसित करें। - सभी डिवाइसों पर उपयोगकर्ता अनुभव को बेहतर बनाने के लिए रिस्पॉन्सिव CSS और मीडिया क्वेरीज़ का उपयोग करके मोबाइल-फर्स्ट डिज़ाइन सिद्धांतों को लागू करें। - स्केलेबिलिटी और रखरखाव के लिए मॉड्यूलर आर्किटेक्चर, पुन: प्रयोज्य घटकों और स्टेट प्रबंधन जैसे सर्वोत्तम कोडिंग अभ्यासों को लागू करें। - मॉक डेटा पर निर्भर हुए बिना कोड गुणवत्ता और कार्यक्षमता सुनिश्चित करने के लिए Jest और React Testing Library जैसे टूल्स का उपयोग करके पूरी तरह से परीक्षण करें। उपयोगकर्ता अनुभव को बढ़ाएँ: - एक सरल और सहज उपयोगकर्ता इंटरफ़ेस डिज़ाइन करें जो उच्च-गुणवत्ता वाली उपयोगकर्ता इंटरैक्शन बनाए रखे। - नेविगेशन और एक्सेसिबिलिटी में सुधार के लिए ड्रॉपडाउन मेनू और स्लाइड-इन/आउट साइडबार जैसे तत्वों का उपयोग करके स्वच्छ और संगठित UI को शामिल करें। अपनी परियोजना शुरू करने के लिए निम्नलिखित सेटअप का उपयोग करें: ```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> ); } ```