طوّر تطبيق قمع مبيعات متكاملًا باستخدام 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>
);
}
```
