创建项目

在开始开发之前，我们需要基于aimaker-template 创建一个新的项目。本章节将指导你如何从零开始创建和设置项目。

🚀 快速开始

1. 克隆项目

git clone https://github.com/aimaker-dev/aimaker-template.git
cd aimaker-template

2. 安装依赖

pnpm install

3. 配置环境变量

复制 .env.example 文件到 .env 并填写必要的环境变量：

cp .env.example .env

环境变量说明：

应用配置:

• NEXT_PUBLIC_APP_URL - 前端应用 URL (例如: http://localhost:3000 )
• NEXT_SERVER_APP_URL - 后端服务 URL (例如: http://localhost:3000 )

数据库配置:

• DATABASE_URL - PostgreSQL 数据库连接 URL

身份验证配置:

• AUTH_SECRET - 用于加密的密钥,至少32个字符，可以参考 https://auth-secret-gen.vercel.app/ 
• AUTH_GITHUB_ID - GitHub OAuth 应用的 Client ID
• AUTH_GITHUB_SECRET - GitHub OAuth 应用的 Client Secret
• AUTH_GOOGLE_ID - Google OAuth 应用的 Client ID
• AUTH_GOOGLE_SECRET - Google OAuth 应用的 Client Secret

Stripe 支付配置:

• STRIPE_SECRET_KEY - Stripe API 密钥
• STRIPE_WEBHOOK_SECRET - Stripe Webhook 密钥

4. 初始化数据库

pnpm db:generate
pnpm db:push

5. 启动开发服务器

pnpm dev

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

🎨 项目示例：天气图标产品

让我们以一个实际的产品案例来说明如何使用这个模板。我们将创建一个名为”Creamy Weather Icons”的天气图标产品网站。

产品概述

• 名称：Creamy Weather Icons
• 类型：设计资源产品
• 特点：奶油色调3D立体风格天气图标

基本功能

1. 产品展示

   • 35个精美天气图标
   • 包含晴天、雨天、雪天等多种天气类型
   • 支持深色/浅色主题

2. 版本选择

   • 基础版（免费）：128x128px PNG格式
   • 专业版（付费）：多尺寸 + Figma源文件

3. 用户系统

   • 支持邮箱注册
   • GitHub/Google OAuth登录
   • 个人资料管理

4. 支付系统

   • Stripe支付集成
   • 专业版购买
   • 交易记录