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

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 repository. All dependencies are declared in 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.

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).

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 manages theme preferences and application-wide settings.

// 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
• 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
• 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, 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. 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}