# AiToEarn Front-End Dependencies: Complete Guide to the Next.js 14 React Stack

> Discover AiToEarn front-end dependencies including Next.js 14 React stack, Ant Design, Radix UI, Tailwind CSS, and Zustand for efficient development.

- Repository: [yikart/AiToEarn](https://github.com/yikart/AiToEarn)
- Tags: getting-started
- Published: 2026-05-12

---

**AiToEarn's front-end relies on Next.js 14, React 18, and TypeScript, complemented by Ant Design 5, Radix UI, Tailwind CSS, and Zustand for state management.**

The AiToEarn front-end is a modern single-page application located in the `project/aitoearn-web` directory of the [yikart/AiToEarn](https://github.com/yikart/AiToEarn) repository. All dependencies are declared in [`project/aitoearn-web/package.json`](https://github.com/yikart/AiToEarn/blob/main/project/aitoearn-web/package.json), which defines the runtime requirements and development toolchain for this content creation platform.

## Core Framework and Runtime Stack

### Next.js 14 and React 18 Foundation

The application builds upon **Next.js 14** (`next`) with **React 18** (`react`, `react-dom`) as the core rendering engine. This combination provides server-side rendering (SSR) capabilities, static site generation (SSG), and the latest React features including concurrent rendering. The `next-themes` package handles dark and light mode switching, configured in the global styles.

### UI Component Architecture

**Ant Design 5** (`antd`, `@ant-design/*`) serves as the primary component library, providing standardized UI elements like buttons, forms, and tables. For headless, customizable primitives, the project integrates **Radix UI** (`@radix-ui/*`), which offers unstyled, accessible components for dialogs, dropdowns, and switches. These Radix primitives are styled using **Tailwind CSS**, configured in [`project/aitoearn-web/tailwind.config.ts`](https://github.com/yikart/AiToEarn/blob/main/project/aitoearn-web/tailwind.config.ts).

### Styling and Animation

**Tailwind CSS** handles all custom styling, with `tailwind-merge` and `clsx` managing dynamic class name composition. For animations, **Framer Motion** (`framer-motion`) enables declarative animations, while **Sonner** (`sonner`) provides lightweight toast notifications (implemented in [`project/aitoearn-web/src/lib/toast.ts`](https://github.com/yikart/AiToEarn/blob/main/project/aitoearn-web/src/lib/toast.ts)).

## State Management and Data Handling

### Zustand for Global State

The application uses **Zustand** (`zustand`) for global state management, leveraging its middleware for persistence. The system store in [`project/aitoearn-web/src/store/system.ts`](https://github.com/yikart/AiToEarn/blob/main/project/aitoearn-web/src/store/system.ts) manages theme preferences and application-wide settings.

```typescript
// src/store/system.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export interface SystemState {
  darkMode: boolean;
  toggleDark: () => void;
}

export const useSystemStore = create<SystemState>()(
  persist(
    (set) => ({
      darkMode: false,
      toggleDark: () => set((s) => ({ darkMode: !s.darkMode })),
    }),
    { name: 'system-storage' }
  )
);

```

### HTTP Requests and Validation

**Axios** (`axios`) handles HTTP requests with **qs** for query string serialization. Data validation uses **Zod** (`zod`), while **React-Hook-Form** manages form state. Date manipulation relies on **Day.js** (`dayjs`), and utility functions use **Lodash** (`lodash`).

## Specialized Feature Dependencies

### Rich Text Editing with Lexical

Content creation features utilize **Lexical** (`@lexical/*`) for rich text editing, including `lexical-beautiful-mentions` for @-mention functionality. This powers the content composition interfaces found in `project/aitoearn-web/src/components/PublishDialog/`.

### Drag and Drop Interfaces

For drag-and-drop interactions, the project combines **@hello-pangea/dnd** with **React-DnD** (`react-dnd`, `react-dnd-html5-backend`). These libraries enable material management and task reordering throughout the application.

### Data Visualization and Media Processing

**ECharts** (`echarts`) renders advanced data visualization charts. Image processing uses **Sharp** (`sharp`) for server-side optimization, **Cropper.js** (`cropperjs`) for client-side cropping, and **html2canvas-pro** for generating screenshots. File operations utilize **JSZip** (`jszip`) and **FileSaver** (`file-saver`), while **qrcode** and **react-qrcode-logo** generate QR codes.

### Virtualization and Internationalization

**@tanstack/react-virtual** implements high-performance virtual scrolling for long lists like channel management and history records. **i18next** with `react-i18next` and `i18next-browser-languagedetector` provides multi-language support, synchronized using `locize-cli`.

## Development and Build Tools

### TypeScript and Code Quality

**TypeScript** (`typescript`) provides type safety throughout the codebase. **ESLint** with `@antfu/eslint-config` and `@next/eslint-plugin-next` enforces code quality, while **Prettier** handles formatting. **Husky** and **lint-staged** run pre-commit hooks to ensure code standards.

### Testing with Playwright

End-to-end testing uses **Playwright** (`@playwright/test`), enabling automated browser testing of critical user flows like content publishing and authentication.

### Build and Asset Processing

**PostCSS** with `@tailwindcss/postcss` and **Autoprefixer** process styles. **@svgr/webpack** converts SVG files into React components, and **Sass** supports additional CSS preprocessing. Environment variables load via **dotenv** during local development.

## Summary

- **Framework**: Next.js 14 with React 18 and TypeScript forms the foundation in [`project/aitoearn-web/package.json`](https://github.com/yikart/AiToEarn/blob/main/project/aitoearn-web/package.json)
- **UI Stack**: Ant Design 5 provides base components, Radix UI offers headless primitives, and Tailwind CSS handles custom styling
- **State**: Zustand manages global state with persistence middleware, as seen in [`project/aitoearn-web/src/store/system.ts`](https://github.com/yikart/AiToEarn/blob/main/project/aitoearn-web/src/store/system.ts)
- **Content**: Lexical powers rich text editing, while React-DnD enables drag-and-drop functionality
- **Quality**: Playwright tests UI flows, ESLint and Prettier maintain code standards, and Husky enforces pre-commit checks

## Frequently Asked Questions

### What framework does AiToEarn use for its front-end?

AiToEarn uses **Next.js 14** with **React 18** and **TypeScript** as its core framework. This stack is defined in the `dependencies` section of [`project/aitoearn-web/package.json`](https://github.com/yikart/AiToEarn/blob/main/project/aitoearn-web/package.json), providing server-side rendering capabilities and modern React features for the content creation platform.

### How does AiToEarn handle global state management?

The application uses **Zustand** for global state management, implemented in files like [`project/aitoearn-web/src/store/system.ts`](https://github.com/yikart/AiToEarn/blob/main/project/aitoearn-web/src/store/system.ts). Zustand's persist middleware saves state to local storage, enabling features like dark mode preferences to persist across sessions without the boilerplate of Redux or Context API.

### What testing tools are included in the AiToEarn front-end?

**Playwright** (`@playwright/test`) serves as the end-to-end testing framework, allowing automated testing of browser interactions. For code quality, the project uses **ESLint** with Antfu's configuration, **Prettier** for formatting, and **Husky** with **lint-staged** for pre-commit validation.

### How is internationalization implemented in AiToEarn?

Internationalization relies on **i18next** with `react-i18next` and `i18next-browser-languagedetector` for automatic language detection. The `locize-cli` tool synchronizes translation resources, while `i18next-resources-to-backend` loads language files dynamically, enabling seamless multi-language support throughout the application.