TEXT

Advanced Sales Funnel App with React Flow

Contributed by amvicioushecs

Improved by Laravel Company · 2026-09-07

Improved prompt:

Act as an experienced Full-Stack Developer specializing in the creation of high-performance, production-ready sales funnel applications using modern React frameworks and libraries. Your primary objective is to architect and implement a robust, scalable, and visually appealing sales funnel application utilizing the @xyflow/react library for interactive, node-based visualizations.

Your application must satisfy the following strict requirements:

  1. Initialization and Setup:

    • Begin by initializing a new React project using Vite with the default template.
    • Integrate the @xyflow/react library into your project to enable node-based visualizations and data flow management.
    • Ensure the project is setup with a clean modular architecture, separating concerns into distinct components for better maintainability.
  2. Core Functional Requirements:

    • Develop a lead capture system that securely collects and processes user data, ensuring compliance with data protection regulations.
    • Implement a conversion tracking mechanism to monitor user progress through the funnel, enabling real-time analytics.
    • Integrate comprehensive analytics using tools like Google Analytics or Mixpanel to provide insights into funnel performance.
    • Apply mobile-first design principles using responsive CSS and media queries to ensure optimal user experience across all devices.
  3. Coding Standards and Quality Assurance:

    • Adhere to best coding practices, such as modular architecture, functional composition, and reusable components, to ensure the codebase remains scalable and maintainable.
    • Implement a robust state management system, such as Redux or the Context API, to centralize and manage application state effectively.
    • Conduct rigorous unit testing using Jest and React Testing Library to ensure code quality and functionality without relying on mock data. Aim for a test coverage of at least 80%.
  4. User Experience Enhancements:

    • Design a clean, intuitive, and visually appealing user interface that maintains high-quality interactions on all devices.
    • Incorporate user-friendly UI elements such as dropdown menus, tooltip pop-ups, and slide-in/out sidebars to improve navigation and accessibility.
    • Optimize page load times by minimizing bundle sizes and utilizing lazy loading techniques to enhance user experience.
  5. Performance and Security:

    • Optimize the application's performance by implementing code splitting, lazy loading, and using efficient data structures to minimize memory usage.
    • Ensure the application is secure by implementing input validation, handling errors gracefully, and protecting sensitive data using encryption and secure storage.
    • Conduct regular security audits and vulnerability assessments to identify and address potential weaknesses in the application.

Your prompt begins with the following code setup:

javascript
// ... (your code setup remains the same as in the original prompt)

Please provide a detailed, production-ready implementation of the sales funnel application based on the outlined requirements. Ensure your solution adheres to the specified coding standards, performance optimizations, and security best practices.

Your response should include the complete implementation of the sales funnel application, including the necessary components, state management, data flow, user interface, and any relevant configuration files. Make sure to provide clear comments and documentation to explain the purpose and functionality of each section of your code.

Additionally, include a brief explanation of how you would deploy the application to a production environment, considering factors such as serverless architecture, deployment strategies, and infrastructure requirements.

Please format your response as code snippets with proper indentation and comments for better readability. Avoid including any unnecessary or irrelevant code to keep the solution concise and focused on the specified requirements.

Your prompt provides a solid foundation for the project, but it requires a more detailed and specific approach to ensure the application meets the required standards for a production-ready sales funnel.

Original prompt (before our improvements)

Act as a Full-Stack Developer specialized in sales funnels. Your task is to build a production-ready sales funnel application using React Flow. Your application will: - Initialize using Vite with a React template and integrate @xyflow/react for creating interactive, node-based visualizations. - Develop production-ready features including lead capture, conversion tracking, and analytics integration. - Ensure mobile-first design principles are applied to enhance user experience on all devices using responsive CSS and media queries. - Implement best coding practices such as modular architecture, reusable components, and state management for scalability and maintainability. - Conduct thorough testing using tools like Jest and React Testing Library to ensure code quality and functionality without relying on mock data. Enhance user experience by: - Designing a simple and intuitive user interface that maintains high-quality user interactions. - Incorporating clean and organized UI utilizing elements such as dropdown menus and slide-in/out sidebars to improve navigation and accessibility. Use the following setup to begin your project: ```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> ); } ```