IdeaVote

面向独立开发者的创意验证工具。发布你的产品点子,让真实用户从 5 个维度帮你打分。

技术栈

• Nuxt 3 — Vue 全栈框架
• Supabase — 数据库 + 认证 + 文件存储
• Tailwind CSS — 样式
• Pinia — 状态管理
• Lucide Icons — 图标

快速开始

1. 创建 Supabase 项目

1. 去 supabase.com 注册,创建一个新项目
2. 记录下 Project URL 和 anon public key(在 Settings > API 中)

2. 初始化数据库

在 Supabase Dashboard 的 SQL Editor 中,粘贴运行 supabase/migrations/001_init.sql 的全部内容。

3. 创建 Storage Bucket

在 Supabase Dashboard > Storage 中:

1. 点 "New bucket",名称填 covers,勾选 Public bucket
2. 在该 bucket 的 Policies 中添加:
   • INSERT:Target roles = authenticated
   • SELECT:Target roles = 空(所有人可访问)

4. 配置 Supabase Auth

在 Supabase Dashboard > Authentication > Providers 中:

1. 确保 Email 已启用
2. 关闭 "Confirm email"(或保持开启,Magic Link 默认会走确认流程)
3. 在 URL Configuration 中将 Site URL 设为你的域名(本地开发设为 http://localhost:3000)
4. 将 http://localhost:3000/confirm 添加到 Redirect URLs

5. 本地运行

# 克隆项目
git clone <your-repo>
cd ideavote

# 安装依赖
npm install

# 配置环境变量
cp .env.example .env
# 编辑 .env,填入你的 Supabase URL 和 Key

# 启动开发服务器
npm run dev

访问 http://localhost:3000

6. 部署到 Vercel

# 安装 Vercel CLI
npm i -g vercel

# 部署
vercel

# 在 Vercel Dashboard 中配置环境变量:
# NUXT_PUBLIC_SUPABASE_URL
# NUXT_PUBLIC_SUPABASE_ANON_KEY
# NUXT_PUBLIC_SITE_URL (你的域名)

项目结构

ideavote/
├── app.vue                    # 根组件,初始化用户状态
├── nuxt.config.ts             # Nuxt 配置
├── tailwind.config.ts         # Tailwind 配置(Linear 风)
├── assets/css/main.css        # 全局样式 + CSS 变量
├── plugins/
│   └── supabase.ts            # Supabase 客户端(全局单例)
├── composables/
│   └── useSupabase.ts         # 简化 Supabase 访问
├── stores/
│   └── user.ts                # Pinia 用户状态(登录/登出/profile)
├── utils/
│   └── index.ts               # cn() + formatRelativeTime()
├── components/
│   ├── AppNav.vue             # 顶部导航
│   ├── IdeaCard.vue           # 创意卡片(首页列表用)
│   ├── StarRating.vue         # 5 星评分组件(核心)
│   ├── UiButton.vue           # 按钮
│   ├── UiInput.vue            # 输入框
│   └── UiTextarea.vue         # 多行文本
├── layouts/
│   └── default.vue            # 默认布局
├── pages/
│   ├── index.vue              # 首页 Feed
│   ├── login.vue              # 邮箱 Magic Link 登录
│   ├── confirm.vue            # Magic Link 回调
│   ├── new.vue                # 发布创意
│   ├── ideas/
│   │   └── [id].vue           # 创意详情 + 投票 + 评论
│   ├── me.vue                 # 我的(发布/投票)
│   └── about.vue              # 关于 + 免责声明
└── supabase/
    └── migrations/
        └── 001_init.sql       # 数据库 schema(4 张表)

数据库(4 张表)

• profiles — 用户档案(auth.users 的扩展,注册时自动创建)
• ideas — 创意(标题/简介/描述/封面)
• votes — 投票(5 维度评分 + 文字反馈,每人每创意一票)
• comments — 评论(一级评论)

投票/评论的 count 和 avg 通过 PostgreSQL 触发器自动维护,不需要手动更新。

开发注意事项

• 不能给自己投票:数据库层有触发器拦截
• 一人一票:votes 表有 unique (idea_id, user_id) 约束
• RLS 已启用:所有表都有行级安全策略,不怕客户端直连
• 图片上传:走 Supabase Storage 的 covers bucket,5MB 限制在前端校验

License

MIT