Architecture Overview

Relevant source files

The following files were used as context for generating this wiki page:

• frontend/public/index.html
• frontend/package.json
• frontend/src/components/LandingPage.jsx
• frontend/src/mock.js
• frontend/tailwind.config.js
• frontend/src/index.css
• frontend/components.json
• frontend/README.md
• frontend/src/App.css

This document provides a technical overview of the frontend architecture for the landing-emrgent project. The project is a single-page application (SPA) built with React, designed as a landing page for a "Success Coach". It showcases a modern frontend stack, emphasizing a component-based structure, utility-first styling, and animations. Currently, the application is populated with static mock data, with the intention of later integration with a backend API.

The architecture is based on Create React App, extended with craco for custom configuration. It leverages the shadcn/ui component library, which is built upon Radix UI primitives and styled with Tailwind CSS. This provides a robust and maintainable foundation for building the user interface.

Frontend Architecture

The frontend is a standard React application bootstrapped with Create React App. The configuration is customized using @craco/craco to allow modifications to the build process, such as integrating Tailwind CSS.

Sources: frontend/package.json:67, frontend/README.md:3

Application Entry Point

The application's entry point is the index.html file, which contains a single div element with the ID root. The React application is mounted into this element. The HTML also includes a script for PostHog analytics tracking.

Sources: frontend/public/index.html:25, frontend/public/index.html:143-146

This diagram illustrates the initial loading flow of the application.

Component Structure

The application is built around a main component, LandingPage.jsx, which composes the entire page. This component is divided into several semantic sections, each representing a part of the landing page.

Sources: frontend/src/components/LandingPage.jsx

The LandingPage.jsx component is structured as follows:

UI Components

The project uses shadcn/ui for its component library, which is configured in components.json. These components are built on Radix UI primitives for accessibility and functionality, and styled with Tailwind CSS. Examples include Button, Card, Input, and Textarea, which are used extensively throughout LandingPage.jsx.

Sources: frontend/components.json, frontend/src/components/LandingPage.jsx:4-8, frontend/src/components/ui/sheet.jsx

Data Management

Currently, the application's content is driven by mock data defined in frontend/src/mock.js. A comment in the file indicates this is a placeholder for future backend API integration. The data is structured into several exported objects that correspond to different sections of the landing page.

Sources: frontend/src/mock.js:3-4

Mock Data Schema

The primary data structures are defined as follows:

The LandingPage.jsx component hardcodes this data directly, rather than importing it from the mock file. This suggests the mock file serves as a reference for the data structure that will eventually be fetched from an API.

Sources: frontend/src/components/LandingPage.jsx:280-293, frontend/src/components/LandingPage.jsx:362-381

Styling and Theming

The project uses a utility-first approach to styling with Tailwind CSS.

Configuration

The core Tailwind configuration is in tailwind.config.js. It extends the default theme with custom colors, border-radius, and keyframe animations for components like accordions. The content array is configured to scan JSX and HTML files for utility classes.

Sources: frontend/tailwind.config.js:4-7, frontend/tailwind.config.js:9-64

Theming

A theming system is implemented using CSS custom properties, defined in src/index.css. This file sets up --background, --foreground, --primary, etc., for both light (default) and dark (.dark) themes. This is a standard pattern for shadcn/ui.

Sources: frontend/src/index.css:20-47, frontend/src/index.css:48-75

Additional custom styles and font imports (Satoshi, Instrument Serif) are defined in src/App.css, which also contains a custom design system with variables like --bg-page and --text-primary.

Sources: frontend/src/App.css:2-3, frontend/src/App.css:6-39

Dependencies and Build Process

The project's dependencies and build scripts are managed through npm and defined in package.json.

Key Dependencies

The following table outlines the major libraries and their roles in the architecture:

Library	Role
react	Core library for building the user interface.
tailwindcss	A utility-first CSS framework for styling.
framer-motion	Animation library for rich user interactions.
@radix-ui/*	A collection of unstyled, accessible UI primitives.
lucide-react	A library of simply designed icons.
axios	Promise-based HTTP client (likely for future API calls).
@craco/craco	Overrides Create React App configuration without ejecting.

Sources: frontend/package.json:6, frontend/package.json:41, frontend/package.json:42, frontend/package.json:7, frontend/package.json:44, frontend/package.json:40, frontend/package.json:67

Build Scripts

The package.json and README.md define the standard scripts for development, testing, and production builds.

Script	Description
npm start	Runs the app in development mode at http://localhost:3000.
npm run build	Builds the app for production into the build folder.
npm test	Launches the test runner in interactive watch mode.

Sources: frontend/package.json:63-65, frontend/README.md:7-24

Conclusion

The landing-emrgent frontend architecture is a well-structured, modern React application. It effectively leverages a component-based design, a powerful UI library (shadcn/ui), and a utility-first styling methodology (Tailwind CSS). The use of craco allows for necessary customizations while retaining the benefits of the Create React App ecosystem. While currently operating with mock data, the structure is prepared for future integration with a backend service, as suggested by the inclusion of axios and comments in the source code.