Backend Dependencies

Relevant source files

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

• frontend/package.json
• frontend/README.md
• frontend/tailwind.config.js
• frontend/postcss.config.js
• frontend/components.json
• frontend/src/components/LandingPage.jsx
• frontend/src/index.css

This document provides a comprehensive overview of the frontend dependencies used in the landing-emrgent project. The project is a single-page application bootstrapped with Create React App and relies on a rich ecosystem of libraries for its user interface, styling, application logic, and development tooling. All dependencies and scripts are managed through npm and defined in package.json.

The dependency architecture is centered around React, with Tailwind CSS for styling and a component library based on shadcn/ui and Radix UI primitives. This combination allows for rapid development of a modern, responsive, and aesthetically pleasing user interface.

Sources: frontend/package.json, frontend/README.md:3-4

Dependency Architecture Overview

The frontend dependencies can be categorized into several key areas: Core Framework, Styling, UI Components, Application Logic, and Development Tooling. The following diagram illustrates these categories and their primary constituents.

This diagram shows the high-level grouping of frontend libraries.
Sources: frontend/package.json:6-81

Core Framework and Build Tools

The application is built on the React library. It was initialized using create-react-app, which provides a standard project structure and a set of scripts for development, testing, and production builds.

Sources: frontend/README.md:3-4

React & React Scripts

• react: The core library for building the user interface.
• react-dom: Provides DOM-specific methods, serving as the entry point to the DOM.
• react-scripts: Contains the scripts and configurations used by Create React App.

Build Configuration Override

The project uses craco (Create React App Configuration Override) to customize the build configuration without "ejecting". This is primarily used to integrate Tailwind CSS. The scripts in package.json have been modified to use craco instead of react-scripts.

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

Sources: frontend/package.json:83-87, frontend/devDependencies/craco.json:90-90

Styling and UI

The project employs a modern styling stack centered around Tailwind CSS and the shadcn/ui component library.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework used for rapid UI development. Its configuration is defined in tailwind.config.js and it's integrated into the build process via postcss.config.js.

• tailwindcss: The core Tailwind CSS framework.
• postcss: A tool for transforming CSS with JavaScript plugins.
• autoprefixer: A PostCSS plugin to parse CSS and add vendor prefixes.
• tailwindcss-animate: A plugin for adding enter/exit animations.

The tailwind.config.js file specifies content paths, theme extensions (colors, border-radius), and plugins.

// frontend/tailwind.config.js
module.exports = {
    darkMode: ["class"],
    content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/index.html"
  ],
  theme: {
  	extend: {
        // ... theme extensions
    }
  },
  plugins: [require("tailwindcss-animate")],
};

Sources: frontend/tailwind.config.js, frontend/postcss.config.js, frontend/package.json:100-101, 98-99

shadcn/ui Component Library

The project uses components from shadcn/ui, which are built upon Radix UI primitives and styled with Tailwind CSS. This is not a traditional dependency but a collection of reusable components. The configuration for the CLI is stored in components.json.

• @radix-ui/*: A suite of unstyled, accessible UI primitives like Dialog, DropdownMenu, Tabs, etc. The project uses a wide array of these packages.
• lucide-react: A library of simply beautiful and consistent icons, used extensively within components like Button and Card.
• class-variance-authority (cva): Used for creating variant-driven UI components.
• clsx & tailwind-merge: Utility libraries for conditionally joining class names and merging Tailwind CSS classes without style conflicts.

The LandingPage.jsx component demonstrates the usage of these UI components, such as Button, Card, Badge, and icons from lucide-react.

Sources: frontend/components.json, frontend/package.json:7-43, 45-46, 78-79, frontend/src/components/LandingPage.jsx:3-7

Animation

• framer-motion: A production-ready motion library for React, used to add animations to components, as seen in LandingPage.jsx with <motion.div>.

Sources: frontend/package.json:51, frontend/src/components/LandingPage.jsx:2, 50-54

Application Logic

These libraries handle core application functionalities like routing, data fetching, and form management.

Routing

• react-router-dom: Used for declarative routing in the application, enabling navigation between different views.

Sources: frontend/package.json:75

Form Management and Validation

• react-hook-form: A library for managing form state and validation efficiently.
• @hookform/resolvers: Provides a resolver to use external validation libraries with React Hook Form.
• zod: A TypeScript-first schema declaration and validation library, used with react-hook-form for robust validation.

Sources: frontend/package.json:6, 74, 81

Data Fetching

• axios: A promise-based HTTP client for making requests to a backend API.

Sources: frontend/package.json:44

Dependencies Summary

The following tables provide a complete list of runtime and development dependencies as defined in package.json.

Runtime Dependencies (dependencies)

Package	Version	Description
@hookform/resolvers	^5.0.1	Resolver for using validation libraries with React Hook Form.
@radix-ui/*	various	A suite of unstyled, accessible UI component primitives.
axios	^1.8.4	Promise-based HTTP client for the browser and node.js.
class-variance-authority	^0.7.1	Create variant-driven UI components.
clsx	^2.1.1	A tiny utility for constructing className strings conditionally.
date-fns	^4.1.0	Modern JavaScript date utility library.
framer-motion	^12.23.6	A production-ready motion library for React.
lucide-react	^0.507.0	A React icon library.
react	^19.0.0	The core React library.
react-dom	^19.0.0	Serves as the entry point to the DOM and server renderers for React.
react-hook-form	^7.56.2	Performant, flexible and extensible forms with easy-to-use validation.
react-router-dom	^7.5.1	DOM bindings for React Router.
react-scripts	5.0.1	Configuration and scripts for Create React App.
tailwind-merge	^3.2.0	Utility function to merge Tailwind CSS classes in JS without style conflicts.
tailwindcss-animate	^1.0.7	A Tailwind CSS plugin for creating animations.
zod	^3.24.4	TypeScript-first schema validation with static type inference.

Sources: frontend/package.json:6-81

Development Dependencies (devDependencies)

Package	Version	Description
@craco/craco	^7.1.0	Create React App Configuration Override.
autoprefixer	^10.4.20	PostCSS plugin to parse CSS and add vendor prefixes.
eslint	9.23.0	Pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.
postcss	^8.4.49	A tool for transforming styles with JS plugins.
tailwindcss	^3.4.17	A utility-first CSS framework for rapid UI development.

Sources: frontend/package.json:90-101