Frontend Setup
Relevant source files
The following files were used as context for generating this wiki page:The frontend is a single-page application built with React, bootstrapped using Create React App. It serves as a landing page for a "Success Coach" business. The architecture emphasizes a modern development stack, leveraging Tailwind CSS for utility-first styling, Shadcn/UI for component structure, and Framer Motion for animations.
The application is structured for development with craco (Create React App Configuration Override) to allow for customizations over the default Webpack configuration, primarily for integrating Tailwind CSS. Currently, all dynamic content is rendered using static mock data, with the intention of replacing it with live API calls in the future.
Sources: frontend/README.md, frontend/package.json, frontend/src/components/LandingPage.jsx
Core Technologies & Dependencies
The project is built upon a foundation of React and Create React App. The key dependencies define its capabilities, from UI rendering to form handling and styling.
This diagram illustrates the main technology categories and their relationships within the frontend application.
Key Dependencies
The following table summarizes the primary npm packages used in the project, categorized by their function.
| Category | Package | Version | Description |
|---|---|---|---|
| Core | react | 19.0.0 | The core library for building the user interface. |
react-dom | 19.0.0 | Provides DOM-specific methods for React. | |
react-scripts | 5.0.1 | Contains scripts and configurations used by Create React App. | |
| Build Tool | @craco/craco | 7.1.0 | Overrides Create React App configuration to add Tailwind CSS support. |
| Styling | tailwindcss | 3.4.17 | A utility-first CSS framework for rapid UI development. |
tailwindcss-animate | 1.0.7 | A Tailwind CSS plugin for adding enter/exit animations. | |
shadcn/ui | N/A | A collection of reusable components built with Radix UI and Tailwind CSS. | |
| UI Primitives | @radix-ui/* | ~1.x | A suite of low-level, unstyled, accessible UI components. |
| Animation | framer-motion | 12.23.6 | A production-ready motion library for React. |
| Forms | react-hook-form | 7.56.2 | Performant, flexible, and extensible forms with easy-to-use validation. |
zod | 3.24.4 | A TypeScript-first schema declaration and validation library. | |
| Icons | lucide-react | 0.507.0 | A library of simply beautiful and consistent open-source icons. |
Sources: frontend/package.json:5-61
Development and Build Process
The project uses standard npm scripts for development, testing, and production builds, as defined in package.json and documented in README.md.
Available Scripts
| Script | Description |
|---|---|
npm start | Runs the app in development mode at http://localhost:3000. The page reloads on changes. |
npm test | Launches the test runner in interactive watch mode. |
npm run build | Builds the app for production into the build folder, optimizing for performance and minifying assets. |
npm run eject | A one-way operation to expose the underlying build configurations (Webpack, Babel, etc.). |
Sources: frontend/package.json:63-66, frontend/README.md:5-43
Development Workflow
The npm start command initiates the development server using craco.
Styling and Theming
The project's styling is managed through a combination of Tailwind CSS, custom CSS variables, and Shadcn/UI configuration.
Configuration Files
tailwind.config.js: Configures Tailwind CSS, including theme extensions for colors, border-radius, and keyframe animations. It specifies which files to scan for Tailwind classes.postcss.config.js: Configures PostCSS to process CSS, includingtailwindcssandautoprefixerplugins.src/index.css: Defines the base CSS layers for Tailwind (@tailwind base,@tailwind components,@tailwind utilities) and sets up CSS variables for theming (e.g.,--background,--primary), including light and dark mode variants.src/App.css: Imports custom fonts (Satoshi,Instrument Serif) and defines custom component classes and styles based on the "ScaleFast Design System".components.json: Configures Shadcn/UI, defining the styling (new-york), component paths (@/components), and Tailwind CSS integration details.
Sources: frontend/tailwind.config.js, frontend/postcss.config.js, frontend/src/index.css, frontend/src/App.css, frontend/components.json
Theming Architecture
The theming system is built on CSS variables defined in src/index.css and consumed by Tailwind's configuration.
This diagram shows how CSS variables and Tailwind configuration files provide styles to the React components.
Sources: frontend/src/index.css:15-81, frontend/tailwind.config.js:3-76, frontend/components.json
CSS Variables for Theming
The application uses CSS variables for a consistent color palette, supporting both light and dark modes.
/* frontend/src/index.css:16-39 */
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
/* ... more variables */
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
/* ... more variables for dark mode */
}
}
Sources: frontend/src/index.css:16-81
Component Architecture
The primary view of the application is the LandingPage component, which is a single, large component composed of several logical sections.
LandingPage.jsx Structure
The LandingPage component is a functional React component that renders the entire page. It is divided into the following sections:
- Header: A fixed navigation bar with links.
- Hero Section: The main introductory content with a call-to-action.
- About Section: Information about the coach.
- Services Section: A grid displaying the services offered.
- Testimonials Section: A grid of client testimonials.
- Stats Section: Key metrics and achievements.
- Contact Section: A form for booking a session.
- Footer: Site links and copyright information.
- Sticky Mobile CTA: A call-to-action button visible on mobile devices.
The component makes extensive use of framer-motion for animations and imports reusable UI components like Button, Card, and Input from ./ui/.
Sources: frontend/src/components/LandingPage.jsx:1-686
Component Hierarchy
This diagram shows the high-level structure of the LandingPage component and its relation to the reusable UI components.
Data Handling
The application currently relies on mock data hardcoded in src/mock.js. This file exports several objects containing the content for the landing page, which would typically be fetched from a backend API.
Mock Data Structure
The mock.js file provides the following data structures:
| Exported Object | Description |
|---|---|
mockCoachData | Contains information about the coach (name, bio, etc.). |
mockServices | An array of service objects with titles and descriptions. |
mockTestimonials | An array of testimonial objects from clients. |
mockStats | An array of key statistics for the stats section. |
mockContactForm | Configuration for the contact form fields. |
mockNavigation | Data for navigation links and the logo. |
mockFooter | Data for footer links. |
mockFormSubmission | A mock async function to simulate form submission. |
Although LandingPage.jsx contains hardcoded text and image URLs, the structure of mock.js suggests it is intended to be the single source of truth for the page's content.
Sources: frontend/src/mock.js:1-209, frontend/src/components/LandingPage.jsx
Application Entry Point & Analytics
The public/index.html file serves as the HTML template for the React application.
Key elements in index.html:
<div id="root"></div>: The root DOM node where the React application is mounted.- Meta Tags: Includes
viewport,theme-color, anddescriptionfor SEO and mobile display. - PostHog Analytics: A script is embedded to initialize PostHog for product analytics, capturing user interactions. The script is configured with a public API key.
Sources: frontend/public/index.html:1-171
This diagram shows the initialization flow from the HTML file to the React app and analytics service.