# trade_app

**Repository Path**: junlang-7/trade_app

## Basic Information

- **Project Name**: trade_app
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-14
- **Last Updated**: 2025-10-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 二手交易平台

基于Next.js + Firebase构建的简单高效二手交易网站

## 功能特性

- 🔐 Google账号一键登录
- 📸 商品图片上传
- 💬 实时私聊功能
- 📱 响应式设计
- ⚡ 快速部署

## 技术栈

- **前端**: Next.js 14 + React
- **UI库**: DaisyUI + TailwindCSS  
- **后端**: Firebase (Firestore + Realtime Database + Storage + Auth)
- **部署**: Vercel

## 环境要求

- Node.js 18.17.0 或更高版本
- npm 或 yarn 包管理器

## 快速开始

1. 检查Node.js版本
```bash
node --version
# 确保版本 >= 18.17.0，如果版本过低请升级Node.js
```

2. 安装依赖
```bash
npm install
```

3. 配置Firebase
   - 在Firebase控制台创建新项目
   - 启用Authentication、Firestore、Realtime Database、Storage
   - 复制配置信息到 `firebase/config.js` 中替换默认配置
   - 查看 `FIREBASE_SETUP.md` 获取详细配置指南
   - 确保已在Firebase控制台中启用邮箱/密码认证方式

4. 配置路径映射
   - `jsconfig.json` 已配置 `@/` 别名指向项目根目录

5. 启动开发服务器
```bash
npm run dev
```

6. 访问 http://localhost:3000

## 部署

推荐使用Vercel进行部署:
```bash
npm run build
```

## 项目结构

- `/app` - Next.js App Router页面和组件
- `/firebase` - Firebase配置
- `/components` - 可复用组件
 - `/public/figure` - 首页背景图放置目录（background.jpg）

## 常见问题

### undici模块解析错误
如果遇到 `undici/lib/web/fetch/util.js` 错误：

**解决方案1 - 升级Node.js (推荐)**
```bash
# 下载并安装 Node.js 18.17.0 或更高版本
# https://nodejs.org/
```

**解决方案2 - 使用兼容版本**
```bash
# 清理依赖并重新安装
rm -rf node_modules package-lock.json
npm install
```

**解决方案3 - 强制解析 (临时方案)**
在 `package.json` 中添加：
```json
{
  "overrides": {
    "undici": "5.26.5"
  }
}
```

### 构建错误
如果遇到模块解析错误，确保：
1. `jsconfig.json` 文件存在且配置正确
2. Firebase配置文件路径正确
3. 所有依赖已正确安装

### Firebase配置
确保在Firebase控制台中：
1. 启用了所需的服务（Auth、Firestore等）
2. 配置了正确的安全规则
3. 添加了域名到授权域名列表

### 开发环境建议
- 使用Node.js 18.17.0或更高版本
- 清理浏览器缓存如果遇到奇怪的问题
- 确保防火墙允许本地开发服务器端口

## 公网访问

您可以通过以下几种方式使网站可以从公网访问：

### 方法一：部署到Vercel（推荐）

1. 注册并登录[Vercel](https://vercel.com)
2. 将项目连接到GitHub仓库
3. 按照Vercel部署向导完成部署
4. 部署完成后，Vercel会提供一个公网可访问的URL

### 方法二：使用开发服务器的公网监听模式

项目已配置为可以监听所有网络接口，启动服务后可在局域网内访问：

```bash
npm run dev
# 或
npm run start
```

然后在同一网络中的其他设备可以通过您电脑的IP地址访问：http://您电脑的IP:3000

### 方法三：使用临时公网隧道

如果需要临时从公网访问开发环境：

1. 首先在一个终端启动开发服务器：
```bash
npm run dev
```

2. 在另一个终端创建公网隧道（选择以下任一方式）：

方式1 - 使用ngrok (推荐):
```bash
# 安装ngrok
npm install -g ngrok

# 创建隧道
ngrok http 3000
```

方式2 - 使用localtunnel:
```bash
# 安装localtunnel
npm install -g localtunnel

# 创建隧道 (使用自定义子域名以避免密码提示)
lt --port 3000 --subdomain tradeapp2025
```

3. 命令将输出一个公网可访问的URL，可以分享给任何人访问您的本地开发环境

注意：
- 临时公网隧道仅建议用于开发和测试目的，不适合生产环境
- 如果使用ngrok，首次使用可能需要注册一个免费帐户并进行身份验证
- 免费版本的ngrok和localtunnel的URL可能会有限制，并且每次重启后可能会改变
- 如果使用localtunnel时遇到密码提示，请尝试使用 `--subdomain` 参数指定一个自定义子域名