📝 Full Stack Todo List App

这是一个基于 React、Express 和 Supabase 构建的全栈待办事项应用。支持用户注册、登录，以及完整的数据增删改查（CRUD）功能。

✨ 功能特性

• 🔐 用户认证：
  • 支持邮箱/密码注册与登录
  • 自动识别注册后的邮箱验证流程（支持自动登录尝试）
  • 密码强度检查（至少6位）
• ✅ 待办事项管理：
  • 创建、读取、更新（完成状态）、删除任务
  • 数据隔离：基于 Supabase RLS（行级安全策略），确保每个用户只能访问自己的数据
• 🎨 现代化 UI：
  • 响应式设计，基于 Tailwind CSS
  • 简洁美观的交互体验
  • 清晰的错误提示与状态反馈

🛠️ 技术栈

前端 (Frontend)

• React 18: 用于构建用户界面
• Vite: 极速的开发构建工具
• TypeScript: 提供类型安全
• Tailwind CSS: 实用优先的 CSS 框架
• Zustand: 轻量级状态管理
• React Router: 路由管理
• Lucide React: 图标库

后端 (Backend)

• Express: Node.js Web 框架
• Supabase Client: 与数据库交互
• TypeScript: 强类型支持

数据库 & 服务 (Database & Services)

• Supabase: 开源 Firebase 替代品，提供 Auth 和 PostgreSQL 数据库
• PostgreSQL: 关系型数据库
• RLS (Row Level Security): 数据库级别的安全策略

🚀 快速开始

1. 克隆项目

git clone https://github.com/Spleap/todo-app.git
cd todo-app

2. 安装依赖

npm install

3. 配置环境变量

复制 .env.example 为 .env 并填入您的 Supabase 配置：

cp .env.example .env

在 .env 中填入：

VITE_SUPABASE_URL=您的Supabase项目URL
VITE_SUPABASE_ANON_KEY=您的Supabase匿名Key

4. 数据库初始化

在 Supabase 的 SQL Editor 中运行以下 SQL 以创建表和安全策略：

create table if not exists todos (
  id uuid default gen_random_uuid() primary key,
  user_id uuid references auth.users(id) not null,
  title text not null,
  is_completed boolean default false,
  created_at timestamptz default now()
);

-- 启用行级安全
alter table todos enable row level security;

-- 策略：用户只能管理自己的数据
create policy "Users can manage their own todos"
on todos for all
using ( auth.uid() = user_id )
with check ( auth.uid() = user_id );

-- 授权
grant all privileges on table todos to authenticated;
grant select on table todos to anon;

5. 启动开发服务器

同时启动前端和后端：

npm run dev

访问 http://localhost:5173 即可使用。

📂 项目结构

TodoApp/
├── api/                # Express 后端代码
│   ├── routes/         # API 路由
│   └── middlewares/    # 中间件 (Auth)
├── src/                # React 前端代码
│   ├── components/     # 组件
│   ├── pages/          # 页面 (Login, Home)
│   ├── store/          # Zustand 状态管理
│   └── lib/            # 工具库 (Supabase 客户端)
├── supabase/           # 数据库迁移文件
└── ...配置文件

☁️ 部署

本项目支持一键部署到 Vercel。请确保在 Vercel 项目设置中添加环境变量 VITE_SUPABASE_URL 和 VITE_SUPABASE_ANON_KEY。

---

Created by Spleap with Trae AI.