Add user profile detail page (新增用户详情页)

[Copilot]

Checklist（清单）:

• Labels
• Assignees
• Reviewers

Closes #56

Changes

Implements user profile page for freeCodeCamp users as referenced in the issue:

• Data API: https://api.freecodecamp.org/users/get-public-profile?username=tech_query
• Reference: https://www.freecodecamp.org/tech_query

Implementation

New Route:

• /user/[username] - Dynamic user profile (e.g., /user/tech_query)

New Files:

• pages/api/user.ts - API client with proper TypeScript types (FCCUserProfile) that fetches user data directly from freeCodeCamp API using koajax
• pages/user/[username].tsx - Server-side rendered profile page with proper type safety

Profile Features:

• User info: picture, name (with usernameDisplay fallback), location, about
• Statistics: points and completed challenges count
• Social links: GitHub, LinkedIn, Website
• Chinese localization
• Comment box integration
• Graceful 404 handling for API failures or non-existent users

API Integration

The implementation calls https://api.freecodecamp.org/users/get-public-profile?username={username} using koajax HTTP client. The API is not accessible outside the freeCodeCamp ecosystem (as noted in the issue), so the page returns 404 until deployed within the freeCodeCamp infrastructure.

Type Safety: The UI correctly uses the FCCUserProfile type with proper field mappings:

• Uses picture field for avatar
• Uses about field for bio text
• Uses linkedIn (correct camelCase) for LinkedIn link
• Uses usernameDisplay for display name
• Treats completedChallenges as an array and uses .length for count

Project Configuration

• Switched to pnpm for package management

• Added package-lock.json to .gitignore

• Fixes 新增用户详情页 #56

Original prompt

---

This section details on the original issue you should resolve

<issue_title>新增用户详情页</issue_title>
<issue_description>## 数据接口

https://api.freecodecamp.org/users/get-public-profile?username=tech_query

参考页面

https://www.freecodecamp.org/tech_query</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes 新增用户详情页 #56

Human changes

1. [add] User model & session form
2. [add] Lark notification for Vercel preview deployment
3. [add] GitHub OAuth middleware & API proxy
4. [migrate] replace Next.js API handler with Koa router
5. [fix] types & logic of fCC User Profile

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[TechQuery]

@copilot

[TechQuery]

@copilot 根据我修正后的类型和接口逻辑去修正界面

[Copilot]

@copilot 根据我修正后的类型和接口逻辑去修正界面

Updated in commit abaaa35. The UI now correctly uses the FCCUserProfile type properties:

Property changes:

• bio → about
• avatar → picture
• linkedin → linkedIn
• Added usernameDisplay for display name
• completedChallenges now uses .length (it's an array)

Removed fields not in the type:

• twitter (not in FCCUserProfile)
• currentStreak, longestStreak (not available)
• certifications section (not in current type)

Error handling: Added try-catch to return 404 when API fails (since freeCodeCamp API is not accessible outside their ecosystem).

The page now displays: user picture, name/username, location, about text, social links (GitHub, LinkedIn, Website), points, and completed challenges count.