Data Flow
Relevant source files
The following files were used as context for generating this wiki page:The data flow within the landing-emrgent project is currently confined to the frontend application. The system is designed as a static landing page for a business coach, with all dynamic content being sourced from local mock data objects. The React-based frontend consumes these mocks to render UI components, and user interactions like form submissions are handled by simulated functions.
There is no evidence of a connection to the backend/server.py file in the provided frontend code. All data originates from and is processed within the client-side application. The application also includes a third-party analytics script for tracking user behavior.
Frontend Data Architecture
The primary data source for the application is frontend/src/mock.js. This file exports several JavaScript objects and arrays that contain all the content displayed on the landing page, simulating a backend API response. The main LandingPage.jsx component imports this data to populate its sections.
Sources: frontend/src/mock.js, frontend/src/components/LandingPage.jsx
Data Flow Overview
The following diagram illustrates the high-level data flow from the mock file to the main UI component.
Mock Data Structures
The mock.js file defines a comprehensive set of data structures that model the content for the entire landing page.
| Exported Variable | Description |
|---|---|
mockCoachData | An object containing information about the coach, such as name, bio, achievements, and image URLs. |
mockServices | An array of objects, each representing a service offered, including title, description, and key results. |
mockTestimonials | An array of objects, each containing a client testimonial with name, role, image, and quote. |
mockStats | An array of objects for the "Success by the Numbers" section, each with a number, label, and icon. |
mockContactForm | An object defining the structure and fields for the contact form. |
mockFormSubmission | An object with a submitContactForm async function that simulates an API call for form submission. |
mockAnalytics | An object containing stub functions (trackPageView, trackButtonClick) for event tracking. |
Sources: frontend/src/mock.js:4-210
Component Data Consumption
The LandingPage.jsx component is the central consumer of the mock data. It renders various sections (e.g., Services, Testimonials) by iterating over the arrays imported from mock.js.
Sources: frontend/src/components/LandingPage.jsx
Service Section Rendering Flow
The "How I Help You Win" services section is a clear example of this data flow. The component maps over the mockServices array (which is hardcoded inside the component but mirrors the structure from mock.js) to render a Card for each service.
This diagram shows how the LandingPage.jsx component iterates through the services data to build the UI.
Sources: frontend/src/components/LandingPage.jsx:293-328
Testimonials Section Rendering
Similarly, the "Client Success Stories" section is populated by mapping the mockTestimonials array (again, hardcoded in the component) to individual testimonial cards.
// frontend/src/components/LandingPage.jsx:358-396
<div className="grid lg:grid-cols-3 gap-8">
{[
{
name: "Sarah Mitchell",
// ... other properties
testimonial: "Working with Alex completely transformed...",
result: "150% Revenue Growth"
},
// ... other testimonials
].map((testimonial, index) => (
<motion.div /* ... */>
<Card /* ... */>
<CardContent className="p-8">
{/* ... testimonial content rendered here */}
</CardContent>
</Card>
</motion.div>
))}
</div>
Sources: frontend/src/components/LandingPage.jsx:358-396
User Interaction and Data Capture
The primary point of data capture from the user is the contact form in the "Book Your Free Strategy Session" section.
Contact Form Submission Flow
When a user fills out the form and clicks "Schedule My Free Session", a submit event is triggered. Currently, the LandingPage.jsx component does not implement a submission handler. However, mock.js provides a mockFormSubmission object with a function designed to simulate this process. This indicates the intended, though not yet implemented, data flow.
The following sequence diagram shows the intended flow using the mock function.
This diagram illustrates the simulated interaction for form submission.
Sources: frontend/src/components/LandingPage.jsx:519-551, frontend/src/mock.js:189-201
The mock submission handler is defined as follows:
// frontend/src/mock.js:190-200
submitContactForm: async (formData) => {
// Simulate API call delay
await new Promise(resolve => setTimeout(resolve, 1000));
// Mock successful submission
console.log("Form submitted with data:", formData);
return {
success: true,
message: "Thank you! Your strategy session has been scheduled. You'll receive a confirmation email shortly.",
confirmationNumber: `SS-${Date.now()}`
};
}
Sources: frontend/src/mock.js:190-200
Analytics and Tracking
The application is configured for analytics tracking with PostHog. The main HTML file includes the PostHog JavaScript snippet, which initializes and configures the tracking service.
<!-- frontend/public/index.html:81-170 -->
<script>
!(function (t, e) {
// ... PostHog initialization code
})(document, window.posthog || []);
posthog.init("phc_yJW1VjHGGwmCbbrtczfqqNxgBDbhlhOWcdzcIJEOTFE", {
api_host: "https://us.i.posthog.com",
person_profiles: "identified_only",
});
</script>
This script sends tracking data to the PostHog service. While LandingPage.jsx does not explicitly call any tracking functions, mock.js includes a mockAnalytics object with functions like trackPageView and trackButtonClick, suggesting the intended architecture for integrating analytics calls within the components.
Sources: frontend/public/index.html:81-170, frontend/src/mock.js:204-214
Conclusion
The data flow in the landing-emrgent frontend is currently a closed loop, driven entirely by mock data defined in frontend/src/mock.js. The LandingPage.jsx component consumes this data to render the UI, and user interactions like form submissions are handled by mock functions that simulate backend communication. The inclusion of the PostHog analytics script in index.html is the only feature that communicates with an external service. The architecture is set up to be easily transitioned to a live backend by replacing the mock data imports and submission handlers with actual API calls.