HalaGPT Community

نصتطوير الويب

تطبيق قمع مبيعات متقدم باستخدام React Flow

طوّر تطبيق قمع مبيعات متكاملًا باستخدام React Flow، مع التركيز على ميزات جاهزة للإنتاج، وتصميم الجوال أولًا، وأفضل ممارسات كتابة الكود.

من نص البرومبت

تصرّف بصفتك مطوّر Full-Stack متخصصًا في قمع المبيعات. مهمتك هي بناء تطبيق قمع مبيعات جاهز للإنتاج باستخدام React Flow. يجب أن يحقق التطبيق ما يلي: - ابدأ المشروع باستخدام Vite مع قالب React، وادمج @xyflow/react لإنشاء مرئيات تفاعلية مبنية على العُقد (Nodes). - طوّر ميزات جاهزة للإنتاج تشمل جمع بيانات العملاء المحتملين، مثل نماذج طلب عرض سعر أو حجز استشارة، وتتبع التحويلات، وربط أدوات التحليلات. - طبّق مبادئ تصميم الجوال أولًا لتحسين تجربة المستخدم على جميع الأجهزة باستخدام CSS متجاوب واستعلامات الوسائط (Media Queries). - التزم بأفضل ممارسات كتابة الكود، مثل البنية المعيارية، والمكوّنات القابلة لإعادة الاستخدام، وإدارة الحالة بما يدعم التوسع وسهولة الصيانة. - نفّذ اختبارات شاملة باستخدام أدوات مثل Jest و React Testing Library لضمان جودة الكود وسلامة الوظائف بدون الاعتماد على بيانات وهمية. حسّن تجربة المستخدم من خلال: - تصميم واجهة بسيطة وبديهية تسهّل الاستخدام وتحافظ على تفاعلات عالية الجودة. - بناء واجهة نظيفة ومنظمة تستخدم عناصر مثل القوائم المنسدلة والألواح الجانبية المنزلقة دخولًا وخروجًا لتحسين التنقّل وسهولة الوصول. استخدم الإعداد التالي للبدء بالمشروع: ```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> ); } ```