Web Team Challenge - Anime Information App

一个基于 Next.js 15 和 React 19 构建的现代化动漫信息查看应用，使用 AniList GraphQL API 提供丰富的动漫数据。

🚀 技术栈

• 前端框架: Next.js 15 (App Router + Turbopack)
• UI 框架: React 19
• 组件库: Chakra UI v3
• 数据获取: Apollo Client + GraphQL
• 状态管理: React Context API
• 主题系统: next-themes
• 类型检查: TypeScript
• 代码规范: ESLint + Prettier
• Git 钩子: Husky + lint-staged

✨ 功能特性

🔐 用户认证

• 基于 Context 的用户认证系统
• 受保护的路由机制
• 用户信息管理（用户名、职位）
• 数据持久化存储

📺 动漫信息展示

• 数据源: AniList GraphQL API 集成
• 表格视图: 分页显示动漫列表
• 卡片视图: 美观的动漫卡片展示
• 详情弹窗: 完整的动漫详细信息
• 响应式设计: 移动端和桌面端自适应

🔍 搜索与筛选

• 实时搜索: 根据动漫标题搜索
• 高级筛选: 多维度筛选条件
  • 类型（TV、电影、OVA等）
  • 状态（播放中、已完结等）
  • 季度和年份
  • 播放日期范围
• 智能排序: 多种排序方式
• URL 分页: 支持直接链接到指定页面

🎨 用户体验

• 深色/浅色主题: 主题切换功能
• 分页导航: 高效的数据分页
• 加载状态: 优雅的加载指示器
• 错误处理: 友好的错误提示

📁 项目结构

src/
├── app/                    # Next.js App Router 页面
│   ├── layout.tsx         # 根布局组件
│   ├── page.tsx           # 首页（路由重定向）
│   ├── globals.css        # 全局样式
│   ├── login/             # 登录页面
│   │   └── page.tsx
│   └── information/       # 动漫信息主页
│       └── page.tsx
├── components/            # React 组件
│   ├── common/           # 通用组件
│   │   ├── AnimeCard.tsx       # 动漫卡片组件
│   │   ├── AnimeTable.tsx      # 动漫表格组件
│   │   ├── AnimeDetailsModal.tsx # 详情弹窗组件
│   │   ├── FilterModal.tsx     # 筛选弹窗组件
│   │   ├── SearchAndSort.tsx   # 搜索排序组件
│   │   ├── ApolloWrapper.tsx   # Apollo 客户端包装
│   │   └── ProtectedRoute.tsx  # 路由保护组件
│   ├── layout/           # 布局组件
│   │   ├── Header.tsx         # 页头导航组件
│   │   ├── Footer.tsx         # 页脚组件
│   │   └── UserMenu.tsx       # 用户菜单组件
│   └── ui/              # UI 基础组件
│       ├── provider.tsx       # Chakra UI Provider
│       ├── color-mode.tsx     # 主题切换组件
│       ├── tooltip.tsx        # 工具提示组件
│       └── toaster.tsx        # 通知组件
├── contexts/            # React Context
│   └── AuthContext.tsx  # 用户认证上下文
├── lib/                 # 工具库
│   └── apollo-client.ts # Apollo 客户端配置
├── queries/             # GraphQL 查询
│   └── anilist.ts      # AniList API 查询定义
└── types/               # TypeScript 类型定义
    └── anilist.ts      # AniList 数据类型

🛠️ 开发环境设置

环境要求

• Node.js >= 18
• pnpm (推荐) 或 npm

安装依赖

# 使用 pnpm (推荐)
pnpm install

# 或使用 npm
npm install

启动开发服务器

# 使用 Turbopack 加速开发
pnpm dev

# 或
npm run dev

访问 http://localhost:3000 查看应用。

📜 可用脚本

# 开发服务器 (with Turbopack)
pnpm dev

# 生产构建 (with Turbopack)
pnpm build

# 启动生产服务器
pnpm start

# 代码检查
pnpm lint

# 自动修复代码问题
pnpm lint:fix

# 代码格式化
pnpm format

# 检查代码格式
pnpm format:check

# TypeScript 类型检查
pnpm typecheck

🔧 配置文件

ESLint 配置 (eslint.config.js)

• Next.js 官方规则集成
• TypeScript 支持
• Prettier 集成避免冲突

Prettier 配置 (.prettierrc)

• 统一的代码格式化规则
• 自动格式化多种文件类型

Git 钩子 (Husky + lint-staged)

• 提交前自动运行代码检查和格式化
• 确保代码质量一致性

🌐 API 集成

AniList GraphQL API

• 端点: https://graphql.anilist.co
• 功能: 获取热门动漫数据
• 特性:
  • 分页查询支持
  • 全文搜索功能
  • 多维度筛选条件
  • 自定义排序选项
  • 丰富的数据字段

主要查询

// 获取热门动漫列表
const GET_POPULAR_ANIME = gql`
  query GetPopularAnime(
    $page: Int
    $perPage: Int
    $search: String
    $sort: [MediaSort]
    $genre_in: [String]
    $status_in: [MediaStatus]
    $format_in: [MediaFormat]
    $season: MediaSeason
    $seasonYear: Int
  ) {
    Page(page: $page, perPage: $perPage) {
      pageInfo {
        total
        currentPage
        lastPage
        hasNextPage
        perPage
      }
      media(
        search: $search
        type: ANIME
        sort: $sort
        genre_in: $genre_in
        status_in: $status_in
        format_in: $format_in
        season: $season
        seasonYear: $seasonYear
      ) {
        id
        title {
          romaji
          english
          native
        }
        coverImage {
          large
          medium
        }
        description
        episodes
        status
        genres
        averageScore
        popularity
        startDate {
          year
          month
          day
        }
        endDate {
          year
          month
          day
        }
        format
        season
        seasonYear
        studios {
          nodes {
            name
          }
        }
      }
    }
  }
`;

🎯 核心功能实现

用户认证流程

1. 用户访问应用 → 检查本地存储的认证状态
2. 未认证 → 重定向到登录页面
3. 登录页面收集用户名和职位信息
4. 信息保存到 localStorage 实现持久化
5. 已认证 → 重定向到动漫信息页面

数据获取策略

• Apollo Client 管理 GraphQL 请求和缓存
• 实现错误处理和重试机制
• 优化查询性能和用户体验

响应式设计

• 使用 Chakra UI 响应式组件系统
• 移动端优化的布局和交互
• 触摸友好的用户界面

状态管理

• React Context API 管理全局状态
• 本地存储实现数据持久化
• 组件间状态同步和更新

🚀 部署

Vercel 部署

1. 连接 GitHub 仓库到 Vercel
2. 自动检测 Next.js 项目配置
3. 一键部署到生产环境

构建优化

# 本地构建测试
pnpm build

# 启动生产服务器
pnpm start

🧪 代码质量

类型安全

• 完整的 TypeScript 类型定义
• 严格的类型检查配置
• GraphQL 查询类型生成

代码规范

• ESLint 规则集成
• Prettier 自动格式化
• Git hooks 确保提交质量

可访问性

• 语义化 HTML 结构
• 键盘导航支持
• 屏幕阅读器友好
• ARIA 属性完善

开发规范

• 遵循现有代码风格
• 添加适当的类型定义
• 编写清晰的注释
• 确保响应式设计兼容性

🔗 相关链接

• Next.js 文档
• Chakra UI v3 文档
• Apollo Client 文档
• AniList API 文档
• TypeScript 文档