Frontend Architecture
Relevant source files
The following files were used as context for generating this wiki page:The frontend for the landing-emrgent project is a single-page application (SPA) built using the Create React App boilerplate. It is designed as a modern, responsive landing page for a business coach. The architecture leverages a component-based approach with React, utilizes Tailwind CSS for styling, and incorporates a suite of modern libraries for UI elements, animations, and form handling.
Currently, the application is self-contained and uses mock data for dynamic content, with clear structures in place for future integration with a backend API. The build process is customized using craco to allow for modifications to the underlying Webpack configuration without ejecting from Create React App.
Technology Stack and Tooling
The foundation of the frontend is built upon Create React App, providing a robust development and build environment. The configuration is extended by craco (Create React App Configuration Override).
Sources: frontend/package.json, frontend/README.md, frontend/craco.config.js
Core Dependencies
The following table outlines the key libraries and their roles in the application.
| Library | Version | Description |
|---|---|---|
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 | Scripts and configurations from Create React App. |
@craco/craco | 7.1.0 | Allows overriding the Create React App configuration. |
tailwindcss | 3.4.17 | A utility-first CSS framework for styling. |
axios | 1.8.4 | Promise-based HTTP client for making API requests. |
react-router-dom | 7.5.1 | Client-side routing library. |
framer-motion | 12.23.6 | A production-ready motion library for animations. |
lucide-react | 0.507.0 | A library of simply designed icons. |
@radix-ui/* | various | A collection of unstyled, accessible UI components. |
shadcn/ui | N/A | A set of reusable components built on Radix UI and Tailwind CSS. |
Sources: frontend/package.json:6-52, frontend/components.json
Build Process
The standard react-scripts commands (start, build, test) are wrapped by craco. This indicates that custom configurations, likely for Tailwind CSS and PostCSS, are being applied during the build lifecycle.
The diagram below shows the high-level build process.
Styling and UI
The project employs a sophisticated styling architecture centered around Tailwind CSS, PostCSS, and a custom design system defined via CSS variables. UI components are sourced from shadcn/ui, which are built upon Radix UI primitives.
Sources: frontend/tailwind.config.js, frontend/src/index.css, frontend/src/App.css, frontend/postcss.config.js, frontend/components.json
Tailwind CSS Configuration
Tailwind is configured to process all js, jsx, ts, tsx, and html files. The configuration extends the base theme with custom colors, border-radius, and keyframe animations for components like accordions.
Sources: frontend/tailwind.config.js:4-7
The components.json file specifies the configuration for the shadcn/ui CLI, including the location of the Tailwind config, base CSS file, and path aliases.
| Configuration | Value | Purpose |
|---|---|---|
config | tailwind.config.js | Path to Tailwind configuration. |
css | src/index.css | Path to the main CSS file with Tailwind directives. |
baseColor | neutral | The base color palette for UI components. |
cssVariables | true | Enables the use of CSS variables for theming. |
aliases | { "components": "@/components", ... } | Defines import path aliases. |
Sources: frontend/components.json:5-16
CSS Variables and Theming
The application defines a comprehensive set of CSS variables for colors, theming (including a dark mode), and layout properties within src/index.css. This allows for consistent styling and easy theme switching.
/* frontend/src/index.css:21-42 */
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
/* ... more variables */
--radius: 0.5rem;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
/* ... more dark theme variables */
}
}
Sources: frontend/src/index.css:21-61
An additional CSS file, src/App.css, imports custom fonts (Satoshi, Instrument Serif) and defines a "ScaleFast Design System" with more specific CSS variables and utility classes for typography and buttons, which appear to be a separate or complementary system to the shadcn/ui setup.
Sources: frontend/src/App.css:2-5, frontend/src/App.css:8-158
Application Entry and Component Structure
The application follows the standard React SPA entry point pattern.
Sources: frontend/public/index.html, frontend/src/index.js, frontend/src/App.js, frontend/src/components/LandingPage.jsx
Bootstrap Flow
public/index.html: The browser loads this file, which contains the root DOM node<div id="root"></div>and includes the PostHog analytics script.src/index.js: This is the main JavaScript entry point. It usesReactDOM.createRootto take control of therootdiv.src/App.js: TheAppcomponent is rendered. It sets up routing (though currently only renders theLandingPagecomponent) and imports the main CSS files.src/components/LandingPage.jsx: This is the primary component that renders the entire page content.
The diagram below illustrates this bootstrap process.
LandingPage.jsx Component Structure
The LandingPage.jsx component is a large, single-file component that defines the entire page layout. It is broken down into semantic <section> elements, each corresponding to a part of the page. It heavily uses framer-motion for animations and imports UI components like Button, Card, and Input from ./ui/.
The component is structured as follows:
This diagram shows the main sections within the LandingPage component.
Sources: frontend/src/components/LandingPage.jsx:13-718
Data Handling
The application currently relies entirely on mock data defined in src/mock.js. This approach decouples the UI development from backend dependencies and provides a clear data contract for future API integration.
Sources: frontend/src/mock.js
Mock Data Structure
The mock.js file exports several objects and arrays that contain all the text, images, and structured content for the landing page.
The diagram below shows the main entities and their relationships in the mock data.
Sources: frontend/src/mock.js:5-217
Mock Form Submission
The contact form submission is handled by a mock function submitContactForm which simulates an asynchronous API call with a 1-second delay. This allows for testing the form's loading and success states without a live backend.
The sequence diagram below illustrates the flow.
Conclusion
The frontend architecture of landing-emrgent is a well-structured and modern React application. It effectively uses Create React App with craco for a flexible build setup. The styling is robust, combining Tailwind CSS with a custom CSS variable system for theming and a shadcn/ui component library. The component-based architecture is centered around a single, comprehensive LandingPage component, which is animated with framer-motion. Data is currently mocked, but the clear separation of data in src/mock.js paves the way for straightforward integration with a live backend in the future.