Getting Started
Relevant source files
The following files were used as context for generating this wiki page:This document provides a guide to setting up and running the frontend of the landing-emrgent project. The project is a React-based single-page application for a "Success Coach" business, bootstrapped with Create React App. It features a modern, responsive design with animations and a component-based architecture.
The application is currently designed to run with mock data, simulating content for the coach's profile, services, and client testimonials. The styling is managed through a combination of Tailwind CSS and custom stylesheets, providing a consistent design system.
Frontend Setup
The frontend is a standard Create React App project. To get started, you will need Node.js and npm installed.
Installation
Clone the repository and navigate to the frontend directory. Install the required dependencies using npm.
npm install
This command installs all dependencies listed in frontend/package.json.
Available Scripts
The project includes standard React scripts, managed via @craco/craco to allow for Tailwind CSS configuration.
| Script | Description |
|---|---|
npm start | Runs the app in development mode at http://localhost:3000. The page reloads on changes. |
npm run build | Builds the app for production into the build folder. It optimizes the build for performance. |
npm test | Launches the test runner in interactive watch mode. |
Sources: frontend/package.json:49-53, frontend/README.md:5-30
Development Workflow
The following diagram illustrates the typical development workflow for the frontend application.
This diagram is derived from the scripts and instructions in frontend/package.json and frontend/README.md.
Frontend Architecture
The frontend application is built with React and utilizes several libraries for UI, state management, and styling.
Core Dependencies
The project relies on a modern stack for building the user interface.
| Library | Purpose |
|---|---|
react | Core library for building the user interface. |
react-dom | Serves as the entry point to the DOM and for rendering React components. |
react-router-dom | Handles client-side routing. |
tailwindcss | A utility-first CSS framework for styling. |
@radix-ui/react-* | A collection of unstyled, accessible UI components. |
framer-motion | A library for creating animations. |
lucide-react | A library of simply beautiful icons. |
axios | Used for making HTTP requests (though currently used with mock data). |
Sources: frontend/package.json:5-48
Component Structure
The main view of the application is constructed within the LandingPage.jsx component. This component is composed of several semantic sections, each representing a part of the landing page.
The diagram below shows the high-level structure of the LandingPage component.
The UI is built using a combination of custom components and components from a ui directory, such as Button, Card, and Input. These UI components are built upon Radix UI primitives, providing a foundation of accessibility and functionality.
Sources: frontend/src/components/LandingPage.jsx:4-8, frontend/src/components/ui/sheet.jsx
Styling
The project uses a multi-layered approach to styling:
- Tailwind CSS: The primary method for styling is the utility-first framework Tailwind CSS. The configuration in
tailwind.config.jsspecifies content paths and extends the default theme with custom colors, radii, and keyframe animations.
Sources: frontend/tailwind.config.js - CSS Variables: A base set of CSS variables for colors, spacing, and typography is defined in
frontend/src/index.cssandfrontend/src/App.css. These variables are used by both Tailwind's theme and custom CSS classes.
Sources: frontend/src/index.css:13-64, frontend/src/App.css:5-41 - Custom CSS Classes: Global styles and component-specific styles that are difficult to achieve with utility classes are defined in
frontend/src/App.css. This includes styles for buttons (.btn-primary), cards (.service-card), and typography (.heading-1).
Sources: frontend/src/App.css:70-333 - Fonts: The application uses the 'Satoshi' and 'Instrument Serif' fonts, imported from Google Fonts and Fontshare.
Sources: frontend/src/App.css:2-3
Data Handling
Currently, the application does not connect to a live backend. All dynamic content is sourced from a mock data file.
Sources: frontend/src/mock.js:3
Mock Data Structure
The file frontend/src/mock.js exports several objects containing the data for the landing page. This approach allows for rapid UI development and testing without a backend dependency.
The main data entities are:
mockCoachData: Contains information about the coach.mockServices: An array of services offered.mockTestimonials: An array of client testimonials.mockStats: An array of key statistics.
This diagram represents the structure of the exported objects in frontend/src/mock.js.
Mock Form Submission
The contact form submission is handled by a mock function submitContactForm which simulates an API call with a 1-second delay. This demonstrates the intended client-side behavior before a real API endpoint is integrated.
The sequence diagram below illustrates this mock submission flow.
Sources: frontend/src/mock.js:216-228
Entry Point and Analytics
The application's entry point is frontend/public/index.html. This file contains the root div element where the React application is mounted.
<div id="root"></div>
Sources: frontend/public/index.html:28
The HTML file also includes a script for PostHog, a product analytics platform. This script is configured to capture user interactions and is initialized with a project-specific API key.
Sources: frontend/public/index.html:81-180