7BrandHub

好服务，一搜即得。7BrandHub 是一个品牌服务商检索平台，帮助用户快速找到品牌策略、设计、营销等领域的专业服务商。

技术栈

• 前端: React 19 + TailwindCSS + Radix UI + Framer Motion
• 后端: Express + tRPC
• 数据库: MySQL + Drizzle ORM
• 构建工具: Vite

功能特性

• 🔍 服务商智能搜索和筛选
• 📂 多维度分类浏览（服务类型、城市）
• ⭐ 用户收藏功能
• 📝 服务商入驻申请
• 👤 用户认证系统
• 🛠 管理员后台

快速开始

1. 安装依赖

pnpm install

2. 配置环境变量

复制环境变量模板：

cp .env.example .env

编辑 .env 文件，填入以下配置：

# 数据库连接（MySQL）
DATABASE_URL=mysql://user:password@localhost:3306/7brandhub

# JWT密钥（用于会话加密，至少32个字符的随机字符串）
JWT_SECRET=your-random-secret-key-at-least-32-characters

# 管理员邮箱（此邮箱注册的用户自动成为管理员）
ADMIN_EMAIL=admin@example.com

3. 初始化数据库

确保 MySQL 服务正在运行，然后创建数据库：

CREATE DATABASE 7brandhub CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

运行数据库迁移：

pnpm db:push

4. 启动开发服务器

pnpm dev

访问 http://localhost:3000 即可查看网站。

项目结构

7brandhub/
├── client/                 # 前端代码
│   ├── src/
│   │   ├── components/     # UI组件
│   │   ├── pages/          # 页面组件
│   │   ├── lib/            # 工具函数
│   │   └── hooks/          # React Hooks
│   └── public/             # 静态资源
├── server/                 # 后端代码
│   ├── _core/              # 核心功能
│   ├── db.ts               # 数据库操作
│   └── routers.ts          # API路由
├── drizzle/                # 数据库Schema
└── shared/                 # 前后端共享代码

常用命令

命令	说明
pnpm dev	启动开发服务器
pnpm build	构建生产版本
pnpm start	运行生产版本
pnpm test	运行测试
pnpm db:push	同步数据库Schema
pnpm check	TypeScript类型检查
pnpm format	格式化代码

部署

生产构建

pnpm build
pnpm start

环境要求

• Node.js 18+
• MySQL 8.0+
• pnpm 10+

许可证

MIT