---
description: Development workflow cho frontend apps (web-client, web-admin, etc.) - chạy dev server, lint, typecheck, build
---

# Frontend Development Workflow

Workflow phát triển cho frontend React/Next.js apps trong GoodGo platform.

## Prerequisites / Yêu Cầu

- Node.js 20+
- pnpm (workspace manager)

## Steps

### 1. Navigate to Frontend App

```bash
cd apps/web-client  # hoặc web-admin, web-merchant
```

### 2. Install Dependencies

// turbo
```bash
pnpm install
```

### 3. Run Development Server

// turbo
```bash
pnpm dev
```

Server sẽ chạy tại `http://localhost:3000`

### 4. Type Checking

// turbo
```bash
pnpm typecheck
```

### 5. Linting

// turbo
```bash
pnpm lint
```

### 6. Build Production

```bash
pnpm build
```

### 7. Run Unit Tests

// turbo
```bash
pnpm vitest run
```

### 8. Run E2E Tests

```bash
pnpm playwright test
```

## Quick Commands / Lệnh Nhanh

| Command | Description |
|---------|-------------|
| `pnpm dev` | Start dev server |
| `pnpm build` | Production build |
| `pnpm lint` | ESLint check |
| `pnpm typecheck` | TypeScript check |
| `pnpm vitest` | Run unit tests (watch) |
| `pnpm vitest run` | Run unit tests (once) |
| `pnpm playwright test` | Run E2E tests |

## Related Skills

- [React Enterprise Architect](/.agent/skills/react-enterprise-architect/SKILL.md)
- [React Testing Patterns](/.agent/skills/react-testing-patterns/SKILL.md)