How to Build and Run the AiToEarn Front-End Application: Complete Setup Guide

The AiToEarn front-end is a Next.js TypeScript application located in project/aitoearn-web that requires Node.js 20.18.x and pnpm, and launches on localhost:3000 with a single pnpm run dev command after installing dependencies.

This guide walks you through the exact steps to build and run the AiToEarn front-end application from the yikart/AiToEarn repository. The UI is built with Next.js, Tailwind CSS, and TypeScript, and is designed to connect to backend services for full-stack functionality.

Prerequisites

Before cloning the repository, ensure your environment meets the following requirements:

• Node.js 20.18.x: The repository explicitly requires Node.js 20.18.x as noted in the project badges and documentation. You can verify your version with node -v.
• pnpm: The monorepo uses pnpm for package management. Install it globally if you haven't already:

  npm i -g pnpm

Step-by-Step Installation

Follow these steps to get the front-end running locally:

1. Clone the repository:

   git clone https://github.com/yikart/AiToEarn.git
   cd AiToEarn

2. Install front-end dependencies: Navigate to the web workspace and install dependencies using pnpm:

   cd project/aitoearn-web
   pnpm install

   This command resolves all packages listed in project/aitoearn-web/package.json and generates the pnpm-lock.yaml lockfile.

3. Configure environment variables (optional but recommended): Create a .env.local file in project/aitoearn-web by copying the provided example:

   cp .env.example .env.local

   Set the NEXT_PUBLIC_API_URL and other variables to match your backend endpoints. The default configuration expects API services at http://localhost:3000.

Running the Development Server

To start the front-end application in development mode with hot reloading:

pnpm run dev

This command, defined in project/aitoearn-web/package.json, launches the Next.js development server on http://localhost:3000 by default.

Optional: Running the Full Stack

If you want the UI to communicate with local backend services, start the two backend applications in separate terminals:

Terminal 1 (AI API service):

cd project/aitoearn-backend
pnpm install
pnpm nx serve aitoearn-ai

Terminal 2 (Publishing server):

pnpm nx serve aitoearn-server

Terminal 3 (Front-end):

cd project/aitoearn-web
pnpm run dev

The front-end will now proxy API requests to your locally running backend services.

Key Project Files and Architecture

Understanding the file structure helps when customizing the application:

• project/aitoearn-web/package.json: Defines the dependency tree and npm scripts including dev, build, and start.
• project/aitoearn-web/tsconfig.json: Configures TypeScript compiler options and path aliases for the Next.js application.
• project/aitoearn-web/tailwind.config.ts: Houses the Tailwind CSS configuration including custom themes and plugins.
• project/aitoearn-web/src/pages/_app.tsx: The global application wrapper that registers Tailwind styles and provides app-wide context providers.
• project/aitoearn-web/src/pages/index.tsx: The entry point for the dashboard home page.
• project/aitoearn-web/src/utils/request.ts: Contains the HTTP client helper used for all API communications from the UI layer.
• project/aitoearn-web/.env.example: Template file showing required environment variables such as NEXT_PUBLIC_API_URL.

Environment Configuration Details

The front-end relies on specific environment variables to connect to backend services:

• NEXT_PUBLIC_API_URL: The base URL for the AI service API (aitoearn-ai)
• NEXT_PUBLIC_PUBLISH_URL: The base URL for the publishing service (aitoearn-server)

These variables must be prefixed with NEXT_PUBLIC_ to be exposed to the browser-side code in Next.js. Without these configured in .env.local, the application may fail to fetch data from backend endpoints.

Summary

• Install prerequisites: Node.js 20.18.x and pnpm are required to build and run the AiToEarn front-end application.
• Navigate to the workspace: All front-end code lives in project/aitoearn-web.
• Install dependencies: Run pnpm install to resolve the Next.js, Tailwind, and TypeScript dependencies.
• Start development: Use pnpm run dev to launch the hot-reloading server on localhost:3000.
• Configure environment: Set NEXT_PUBLIC_API_URL in .env.local to point to your backend services.

Frequently Asked Questions

What Node.js version is required for AiToEarn?

The AiToEarn front-end application requires Node.js 20.18.x specifically. This version requirement is enforced throughout the repository documentation and ensures compatibility with the Next.js features and dependency tree used in project/aitoearn-web.

Can I run the front-end without the backend services?

Yes, the front-end will start and run without the backend services running. However, functionality that requires API calls—such as AI generation features and publishing workflows—will fail or show errors. The UI will still render and allow navigation, but data-dependent features require the aitoearn-ai and aitoearn-server services to be accessible.

How do I change the API endpoint URL that the front-end uses?

Create a .env.local file in the project/aitoearn-web directory and define NEXT_PUBLIC_API_URL with your desired endpoint. For example: NEXT_PUBLIC_API_URL=http://localhost:3001. The variable must use the NEXT_PUBLIC_ prefix to be available in browser-side code, as handled by the request utility in src/utils/request.ts.

Why does the project use pnpm instead of npm or yarn?

The yikart/AiToEarn repository is structured as a monorepo using Nx workspaces, and pnpm provides better disk space efficiency and stricter dependency resolution through its content-addressable store. All workspace commands and lock files (pnpm-lock.yaml) are specifically configured for pnpm, making it the required package manager for consistent builds.

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