Project Structure
Relevant source files
The following files were used as context for generating this wiki page:This document outlines the project structure of the landing-emrgent repository, which is a single-page frontend application for a "Success Coach" business. The project is bootstrapped with Create React App and heavily utilizes modern frontend technologies like React, Tailwind CSS, and various UI libraries for a component-driven architecture.
The application is currently designed as a static landing page, with all content sourced from mock data files. There is no evidence of a connected backend in the provided files; the backend/ directory is empty. The structure emphasizes a clear separation between component logic, styling, and data.
Frontend Application
The frontend/ directory contains a complete React application. It is configured to use craco (Create React App Configuration Override) to allow for customizations to the build process, such as adding Tailwind CSS support.
Sources: frontend/package.json, frontend/README.md
Core Setup & Dependencies
The project's foundation is defined in package.json. It uses React 19 and is managed by npm scripts.
Key Dependencies:
| Library | Version | Description |
|---|---|---|
react | ^19.0.0 | Core library for building the user interface. |
react-dom | ^19.0.0 | Serves as the entry point to the DOM and server renderers for React. |
react-router-dom | ^7.5.1 | Used for client-side routing, although the current implementation is a single page. |
tailwindcss | ^3.4.17 | A utility-first CSS framework for styling. |
@craco/craco | ^7.1.0 | Configuration override tool for Create React App. |
framer-motion | ^12.23.6 | A production-ready motion library for animations. |
@radix-ui/* | various | A collection of unstyled, accessible UI components (e.g., Dialog, Popover). |
lucide-react | ^0.507.0 | A library of simply designed icons. |
Sources: frontend/package.json:5-52
NPM Scripts:
| Script | Description |
|---|---|
npm start | Runs the app in development mode using craco. |
npm build | Builds the app for production to the build folder using craco. |
npm test | Launches the test runner in interactive watch mode using craco. |
Sources: frontend/package.json:54-57, frontend/README.md:5-39
Application Entry Point
The application's entry point is the index.html file, which serves as a template. The React application is mounted into the <div id="root"></div> element. This file also includes third-party scripts, such as PostHog for analytics.
The following diagram illustrates the initial page load sequence.
Sources: frontend/public/index.html:1-155
Component Architecture
The application follows a component-based architecture. The main view is encapsulated within a single, large component, LandingPage.jsx, which is composed of several semantic sections. Reusable UI primitives are sourced from the shadcn/ui library, located in frontend/src/components/ui/.
Sources: frontend/src/components/LandingPage.jsx, frontend/components.json
The diagram below shows the high-level component structure.
Styling and Theming
Styling is managed through a combination of Tailwind CSS, custom CSS files, and shadcn/ui conventions.
- Tailwind CSS: The primary styling mechanism. The configuration in
tailwind.config.jsextends the default theme with custom colors, border-radius, and keyframe animations, all using CSS variables. - CSS Variables: A design system is defined using CSS variables in
frontend/src/index.css(forshadcn/ui) andfrontend/src/App.css(for a custom "ScaleFast" design system). This allows for consistent theming (e.g.,--bg-page,--text-primary,--brand-primary). shadcn/ui: Thecomponents.jsonfile configuresshadcn/ui, specifying Tailwind as the CSS framework, defining path aliases (@/components,@/lib), and using the "new-york" style with CSS variables.
Sources: frontend/tailwind.config.js, frontend/src/index.css:12-85, frontend/src/App.css:5-50, frontend/components.json
Data Management
Currently, all dynamic content on the landing page is hardcoded in frontend/src/mock.js. This file exports several objects and arrays containing data for the coach's bio, services, testimonials, and more. This approach decouples the UI components from the data, allowing for easy replacement with a live API in the future.
The structure of the mock data is as follows:
This diagram shows the different data entities defined in the mock data file.
Sources: frontend/src/mock.js:1-248
Testing
The project includes a test_result.md file that defines a specific testing protocol. This protocol is not for standard unit or integration tests but appears to be for communication between a main_agent and a testing_agent in an automated development workflow.
The file specifies a YAML-based structure to track:
- User problem statements.
- Frontend and backend tasks with their implementation and working status.
- Status history for each task.
- A test plan to guide the testing agent's focus.
This system is designed to manage testing state, track recurring issues (stuck_count), and formalize communication between development agents.
Sources: test_result.md:1-93
Conclusion
The landing-emrgent project is a well-structured, modern frontend application built with React and Tailwind CSS. Its architecture is component-driven, with a clear separation of concerns between UI logic (LandingPage.jsx), reusable UI primitives (shadcn/ui), styling (.css, tailwind.config.js), and data (mock.js). The project is currently a static site but is architected in a way that would facilitate future integration with a backend API to replace the mock data source. The unique test_result.md file suggests an advanced, agent-based development and testing process.