UI Prototype

Un prototipo de aplicación web moderna construido con React, TypeScript y Material-UI, que incluye autenticación, internacionalización e integración con Figma.

GitHub
1
Prueba este MCPPatrocinado

Documentación

UI Prototype

📖 Resumen

Este proyecto es una aplicación web que utiliza React + TypeScript + Material-UI (MUI) con un enfoque moderno. Incluye funciones como autenticación, soporte multilingüe, entorno de pruebas, API simulada con MSW (Mock Service Worker), e integración con el servidor MCP de Figma.

✨ Características principales

  • 🔐 Sistema de autenticación: Autenticación y gestión de sesiones
  • 🌍 Soporte multilingüe: Compatible con japonés e inglés (react-i18next)
  • 🧪 Pruebas integrales: Vitest + React Testing Library + Playwright E2E
  • 🎭 API simulada: Simulación de API en desarrollo con MSW
  • 🎨 Integración con Figma: Obtención de recursos de diseño mediante servidor MCP
  • 📱 Diseño responsivo: Compatible con móvil y escritorio (no tan completo)

🛠 Stack tecnológico

  • Frontend: React 19, TypeScript
  • Framework de UI: Material-UI (MUI)
  • Herramienta de compilación: Vite
  • Gestión de estado: TanStack Query (React Query)
  • Enrutamiento: React Router
  • Pruebas: Vitest, React Testing Library, Playwright
  • Simulación: MSW (Mock Service Worker)
  • Internacionalización: react-i18next
  • Generación de código: Orval (OpenAPI)
  • Gestor de paquetes: pnpm

🚀 Inicio rápido

Requisitos previos

  • Node.js (v22) ※Gestionado automáticamente por el proyecto
  • pnpm (v10.12.4) ※Gestionado automáticamente por el proyecto

Gestión de versiones:

  • Node.js: .npmrc descarga y usa automáticamente v22.17.0
  • pnpm: El campo packageManager recomienda v10.12.4

No es necesario que los desarrolladores gestionen las versiones manualmente.

Instalación y ejecución

# 依存関係のインストール
pnpm install

# E2Eテスト用ブラウザのインストール（初回のみ）
pnpm test:e2e:install

# 環境変数の設定（オプション）
cp .env.sample .env
# .envファイルを編集してAPI URLなどを設定

# OpenAPIスキーマからコードとモックを生成（初回またはスキーマ更新時）
pnpm gen:api

# 開発サーバーの起動
pnpm dev

La aplicación se inicia en http://localhost:5173.

📁 Estructura del proyecto

src/
├── adapters/          # 外部サービスとの接続層
│   ├── axios.ts       # HTTP クライアント設定
│   ├── generated/     # OpenAPI から生成されたコード
│   ├── mocks/         # MSW モック定義
│   └── repositories/  # データアクセス層
├── app/               # アプリケーション設定
│   ├── providers/     # Context Providers
│   ├── router/        # ルーティング設定
│   └── types/         # アプリケーション型定義
├── domain/            # ビジネスロジック層
│   ├── constants/     # 定数定義
│   ├── errors/        # エラー型定義
│   ├── models/        # ドメインモデル
│   └── utils/         # ユーティリティ関数
├── i18n/              # 国際化設定
│   ├── config.ts      # i18n 設定
│   ├── hooks/         # 翻訳フック
│   └── locales/       # 言語ファイル
└── presentations/     # プレゼンテーション層
    ├── components/    # 共通コンポーネント
    ├── hooks/         # カスタムフック
    ├── layouts/       # レイアウトコンポーネント
    └── pages/         # ページコンポーネント

Características de la arquitectura

  • Clean Architecture: Separación en capas basada en principios de diseño dirigido por dominio
  • Patrón Repository: Abstracción del acceso a datos
  • Patrón Provider: Inyección de dependencias y gestión de contexto
  • Custom Hooks: Reutilización de la lógica de negocio

🔧 Funciones principales

Sistema de autenticación

  • Autenticación basada en JWT
  • Gestión de sesiones y renovación automática
  • Funciones de inicio/cierre de sesión
  • Enrutamiento según el estado de autenticación

Soporte multilingüe

  • Compatible con japonés e inglés
  • Cambio dinámico de idioma con react-i18next
  • Claves de traducción con seguridad de tipos

Comunicación con API

  • Cliente HTTP basado en Axios
  • Generación automática a partir del esquema OpenAPI
  • Manejo de errores y funciones de reintento

🧪 Pruebas

Ejecución de pruebas

# 単体テスト（Vitest）
pnpm test                # 全テスト実行
pnpm test:watch          # ウォッチモード
pnpm test:coverage       # カバレッジ付き実行
pnpm test:related src/path/to/changed-file.tsx  # 関連テストのみ実行

# E2Eテスト（Playwright）
pnpm test:e2e:install    # ブラウザインストール（初回のみ）
pnpm test:e2e            # 全E2Eテスト実行
pnpm test:e2e:ui         # インタラクティブモード
pnpm test:e2e:debug      # デバッグモード

Detalles de pruebas E2E: Consulte playwright/README.md.

Primera ejecución: Instale los navegadores de Playwright (Chromium, Firefox, WebKit) con pnpm test:e2e:install.

Estrategia de pruebas

  • Pruebas unitarias: Pruebas de componentes, hooks y funciones de utilidad
  • Pruebas de integración: Pruebas de interacción de usuario a nivel de página
  • Pruebas E2E: Pruebas de extremo a extremo en navegadores reales con Playwright
  • Ejecución de pruebas relacionadas: Ejecución eficiente de pruebas con el comando test:related
    • Detecta y ejecuta automáticamente solo los archivos de prueba relacionados con los archivos modificados
    • Logra un ciclo de retroalimentación rápido en entornos CI/CD
    • Reduce el tiempo de prueba mediante ejecución paralela (shard)
  • Estrategia de simulación:
    • Simulación de respuestas de API con MSW
    • Simulación parcial a nivel de Repository
    • Estandarización mediante utilidades de prueba

Estructura de pruebas

  • src/__fixtures__/: Helpers y datos simulados para pruebas
  • src/__tests__/: Pruebas a nivel de aplicación
  • __tests__/ en cada directorio: Pruebas unitarias de componentes y hooks

🔌 Integración MCP (Model Context Protocol)

Este proyecto puede integrarse con herramientas de IA mediante servidores MCP para optimizar el desarrollo.

Archivos de configuración

El proyecto utiliza dos tipos de archivos de configuración MCP:

  • .mcp.json: Configuración MCP a nivel de proyecto para Claude Code
  • .vscode/mcp.json: Configuración MCP para VSCode / GitHub Copilot

Ambos archivos configuran el mismo servidor MCP, pero se usan en diferentes herramientas.

Servidores MCP disponibles

1. Servidor MCP de Figma

Permite obtener recursos directamente de archivos de diseño de Figma.

Configuración:

Agregue su Personal Access Token de Figma a la configuración:

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Método de uso:

Implemente componentes a partir de diseños de Figma con herramientas de IA:

Figma URL: https://www.figma.com/file/YOUR_FILE_KEY/...

このFigmaデザインを参考に、LoginButtonコンポーネントを実装してください。
- styled.tsx にスタイル定義をまとめる
- Material-UIベースで実装
- レスポンシブ対応
- Figmaの色・サイズ・余白を反映

Funciones disponibles:

  • Obtención de información de diseño de archivos de Figma
  • Descarga de imágenes e iconos desde Figma

2. Servidor MCP de Playwright

Asiste en la generación automática de pruebas E2E y operaciones de navegador.

Configuración:

Ya está configurado. Puede personalizar la configuración con .vscode/playwright-config.json.

{
  "servers": {
    "playwright": {
      "type": "stdio",
      "command": "pnpm",
      "args": [
        "dlx",
        "@playwright/mcp@latest",
        "--config",
        ".vscode/playwright-config.json"
      ]
    }
  }
}

Método de uso:

Genere y ejecute pruebas de Playwright con herramientas de IA:

ログインページのE2Eテストを作成してください。
- メールとパスワードを入力
- ログインボタンをクリック
- ダッシュボードにリダイレクトされることを確認

Funciones disponibles:

  • Generación automática de código de prueba de Playwright
  • Asistencia en la creación de scripts de operación de navegador
  • Asistencia en la implementación del patrón Page Object Model

🔧 Detalles de herramientas de desarrollo

Configuración de MSW (Mock Service Worker)

Configuración para usar la simulación de API en desarrollo:

# MSWの初期化（公開ディレクトリにService Workerファイルを生成）
pnpm msw:init

Este comando genera public/mockServiceWorker.js y habilita la simulación de API en el navegador.

Scripts disponibles

pnpm dev           # 開発サーバー起動
pnpm build         # プロダクションビルド
pnpm type-check    # 型チェック
pnpm lint          # ESLint実行
pnpm format:check  # Prettierによるフォーマットチェック（チェックのみ）
pnpm format:fix    # Prettierによるコードフォーマット（コードを自動整形）
pnpm preview       # ビルド結果をプレビュー
pnpm test          # テスト実行
pnpm test:run      # watch モードなしで実行
pnpm test:coverage # カバレッジ付きテスト
pnpm test:related  # 関連テストのみ実行（指定ファイルに関連するテストを検出）
pnpm gen:api       # OpenAPIからコードとモックを生成
pnpm msw:init      # MSW Service Worker初期化

Generación de código (Orval)

Generación automática de clientes de API y simulaciones de MSW a partir del esquema OpenAPI:

# OpenAPI スキーマから型とAPIクライアント、MSWモックを生成
pnpm gen:api

Orval genera automáticamente lo siguiente:

  • Cliente de API: Cliente de API con seguridad de tipos en src/adapters/generated/
  • Definiciones de tipos TypeScript: Definiciones de tipos basadas en el esquema OpenAPI
  • Simulaciones de MSW: Manejadores de simulación en src/adapters/mocks/handlers/

Archivo de configuración: schema/orval.config.ts

Configuración de variables de entorno

El proyecto permite configurar la URL de la API, entre otros, mediante variables de entorno:

# .env.sampleをコピーして.envファイルを作成
cp .env.sample .env

Variables de entorno disponibles:

  • VITE_API_BASE_URL: URL base de la API (predeterminado: http://localhost:3000/api)

Ejemplos de configuración por entorno:

# 開発環境
VITE_API_BASE_URL=http://localhost:3000/api

# 本番環境
VITE_API_BASE_URL=https://api.your-domain.com/api

# ステージング環境
VITE_API_BASE_URL=https://staging-api.your-domain.com/api

Las variables de entorno se aplican automáticamente tanto al baseURL de Axios como a los manejadores de simulación de MSW.

Configuración del entorno de desarrollo

  • ESLint: Mantenimiento de la calidad del código
  • TypeScript: Garantía de seguridad de tipos
  • Vite: Experiencia de desarrollo rápida
  • pnpm: Gestión eficiente de paquetes