Backend Setup
Relevant source files
The following files were used as context for generating this wiki page:1. Introduction
The frontend of this project is a single-page application built using Create React App. It serves as the user-facing interface, presenting a professional landing page for a business coach. The application is styled using Tailwind CSS and a component library based on shadcn/ui, providing a modern and responsive design. Key features include dynamic content sections, animations via Framer Motion, and a structure designed for future integration with a backend API, currently using mock data for development.
The setup uses craco (Create React App Configuration Override) to customize the build configuration, notably for integrating Tailwind CSS. The project is well-structured with clear separation of components, styles, and data sources.
Sources: frontend/README.md, frontend/package.json, frontend/src/components/LandingPage.jsx
2. Project Scripts and Tooling
The project's core operations are managed through npm scripts defined in package.json. The README.md file provides instructions for using these scripts. The project uses craco to manage the React scripts, allowing for custom configurations on top of the standard Create React App setup.
Sources: frontend/package.json:48-52, frontend/README.md:5-30
2.1. Available Scripts
| 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, optimizing for performance. |
npm test | Launches the test runner in interactive watch mode. |
Sources: frontend/package.json:49-51, frontend/README.md:7-21
2.2. Build & Configuration Tooling
The following diagram illustrates the build process flow.
This diagram shows how npm scripts use craco for both development and production builds, which in turn use configuration files for Tailwind CSS and PostCSS.
Sources: frontend/package.json:49-51, frontend/tailwind.config.js, frontend/postcss.config.js
3. Core Dependencies
The frontend relies on a modern stack of libraries and frameworks for UI, styling, and functionality.
Sources: frontend/package.json:5-47
3.1. Frameworks and UI Libraries
| Library | Version | Description |
|---|---|---|
react | ^19.0.0 | The core JavaScript library for building the user interface. |
react-dom | ^19.0.0 | Serves as the entry point to the DOM and server renderers for React. |
@radix-ui/* | various | A collection of unstyled, accessible UI primitives used by shadcn/ui. |
lucide-react | ^0.507.0 | Provides a set of simply beautiful icons. |
framer-motion | ^12.23.6 | A production-ready motion library for React to create animations. |
class-variance-authority | ^0.7.1 | A library for creating variants of UI components. |
clsx | ^2.1.1 | A tiny utility for constructing className strings conditionally. |
tailwind-merge | ^3.2.0 | A utility to merge Tailwind CSS classes without style conflicts. |
Sources: frontend/package.json:5-47
3.2. Styling Dependencies
| Library | Version | Description |
|---|---|---|
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. |
autoprefixer | ^10.4.20 | A PostCSS plugin to parse CSS and add vendor prefixes. |
postcss | ^8.4.49 | A tool for transforming CSS with JavaScript plugins. |
Sources: frontend/package.json:62-66
The following diagram shows the relationship between the main frontend libraries.
This diagram illustrates how the LandingPage component is built with React and utilizes the shadcn/ui ecosystem, which is powered by Radix UI, Lucide icons, and CVA for variants. All of this is styled using the Tailwind CSS engine.
Sources: frontend/package.json, frontend/src/components/LandingPage.jsx, frontend/components.json
4. Component Architecture
The primary component is LandingPage.jsx, which constitutes the entire visible interface. It is a functional component that uses framer-motion for animations and imports various UI elements like Button, Card, and Input.
Sources: frontend/src/components/LandingPage.jsx
4.1. LandingPage.jsx Structure
The LandingPage component is organized into several semantic <section> elements, each corresponding to a different part of the page.
This diagram shows the high-level structure of the LandingPage.jsx component and its main sections, along with some of the reusable UI components it employs.
Sources: frontend/src/components/LandingPage.jsx:12-652
4.2. Reusable UI Components
The project uses a set of reusable UI components, likely generated by shadcn/ui, located in src/components/ui/. An example is the Sheet component, which is built on top of Radix UI's Dialog primitive.
Sources: frontend/src/components/ui/sheet.jsx, frontend/components.json:10
A typical UI component like sheet.jsx exports several parts:
Sheet(Root)SheetTriggerSheetContentSheetHeaderSheetFooterSheetTitleSheetDescription
Sources: frontend/src/components/ui/sheet.jsx:92-101
5. Styling and Theming
Styling is primarily handled by Tailwind CSS, with custom configurations and a design system defined in CSS files.
5.1. Tailwind CSS Configuration
The tailwind.config.js file extends the default theme with custom colors, border radiuses, and keyframe animations. The configuration is set up to use CSS variables for theming (e.g., hsl(var(--background))).
Sources: frontend/tailwind.config.js:2-55, frontend/components.json:6
5.2. CSS Variables and Custom Styles
The project defines two main sets of CSS variables for theming:
- ScaleFast Design System: In
App.css, variables like--bg-page,--text-primary, and--brand-primaryare defined, along with a comprehensive typography system (.heading-1,.body-large, etc.) and custom button styles (.btn-primary). - shadcn/ui Theme: In
index.css, CSS variables for a light and dark theme are defined within a@layer baseblock. These variables, such as--background,--foreground,--primary, and--card, are used by Tailwind's color utilities.
Sources: frontend/src/App.css:2-299, frontend/src/index.css:16-77
The following table shows a sample of the "ScaleFast" theme colors.
| Variable | Value | Description |
|---|---|---|
--bg-page | #FFFFFF | Page background color. |
--text-primary | rgb(24, 24, 24) | Primary text color. |
--text-secondary | rgb(112, 112, 112) | Secondary text color. |
--border-light | rgba(24, 24, 24, 0.1) | Light border color. |
--brand-primary | rgb(0, 128, 255) | Primary brand color. |
Sources: frontend/src/App.css:6-21
6. Data Handling
Currently, the application does not connect to a live backend. All dynamic content, such as testimonials, services, and coach information, is sourced from a local mock data file.
6.1. Mock Data Source
The file frontend/src/mock.js exports several objects containing placeholder data for the landing page. A comment at the top of the file explicitly states: "It will be replaced with actual backend API calls later".
Sources: frontend/src/mock.js:1-5
The mock data is structured into several exports:
mockCoachData: Information about the coach.mockServices: A list of services offered.mockTestimonials: Client testimonials.mockStats: Key performance indicators.mockContactForm: Configuration for the contact form fields.mockNavigation: Data for navigation links.mockFooter: Data for footer links.mockFormSubmission: A mock async function to simulate form submission.
Sources: frontend/src/mock.js:7-220
6.2. Data Flow
The LandingPage.jsx component hardcodes the data that is defined in mock.js. For example, the services and testimonials are rendered by mapping over hardcoded arrays within the component itself.
The diagram below shows the current data flow.
This flow illustrates that data originates from mock objects, is defined directly as arrays within the LandingPage.jsx file, and then mapped to render the final UI elements.
Sources: frontend/src/components/LandingPage.jsx:281-315, 344-394, frontend/src/mock.js
7. Public Assets and Entry Point
The public/index.html file serves as the application's HTML shell.
- Root Element: The React application is mounted into the
<div id="root"></div>element. - Analytics: A script for PostHog analytics is included to track user interactions. The script is initialized with a project-specific API key.
- Metadata: The file contains standard meta tags for viewport, theme color, and description.
Sources: frontend/public/index.html:5-13, 29, frontend/public/index.html:92-181