Coffee Pwa MCP

咖啡店PWA（渐进式网页应用）

一个现代化的渐进式网页应用，用于咖啡店点单并安排自提时间。

🚀 技术栈

• 前端使用TypeScript的Next.js 14
• 造型设计Tailwind CSS + Shadcn/ui
• 状态管理状态
• 数据库Supabase（基于PostgreSQL）
• 认证Supabase 认证
• 付款Stripe（计划中）
• PWA（渐进式网页应用）next-pwa
• 表单React Hook Form + Zod

📱 功能（计划中）

第一阶段：基础 ✅

• 使用Next.js、TypeScript和Tailwind进行项目设置\[x\]
• \[x\] 集成Shadcn/ui组件库
• \[x\] PWA（渐进式网页应用）配置
• \[x\] 响应式导航（适用于手机+桌面）
• 使用 Zustand 管理购物车状态
• \[x\] 基本路由结构

第二阶段：数据库 & Supabase ✅

• \[x\] 数据库模式设计
• \[x\] Supabase 配置
• \[x\] 行级安全策略
• \[x\] 示例数据和函数
• \[x\] TypeScript 类型与模式匹配
• \[x\] 数据库服务功能

第三阶段：产品目录（下一步）

• \[ \] 产品浏览和分类
• \[ \] 搜索和筛选
• \[ \] 产品定制选项

第四阶段：购物车与订单

• \[ \] 购物车功能
• \[ \] 订单管理
• \[ \] 特别说明/特殊指示

第五阶段：时间槽预订

• \[ \] 日历视图
• \[ \] 时间段选择
• \[ \] 容量管理

第六阶段：用户身份验证

• \[ \] 用户注册/登录
• \[ \] 配置文件管理
• \[ \] 作为访客结账

阶段7：支付集成

• \[ \] Stripe（支付处理平台）集成
• \[ \] 多种支付方式
• \[ \] 支付确认

🛠️ 开发

先决条件

• Node.js 18及以上版本
• npm 或 yarn

设置

1. 克隆仓库
2. 安装依赖项：

   npm install

1. 复制环境变量：

   cp .env.example .env.local

1. 更新 .env.local 使用您的Supabase和Stripe凭据
2. 运行开发服务器：

   npm run dev

环境变量

见 .env.example 对于所需的环境变量：

• Supabase 的 URL 和密钥
• Stripe密钥
• 应用程序配置

📁 项目结构

src/
├── app/                 # Next.js app router pages
├── components/          # React components
│   ├── ui/             # Shadcn/ui components
│   ├── layout/         # Layout components
│   └── cart/           # Cart-related components
├── lib/                # Utility functions
├── store/              # Zustand stores
└── types/              # TypeScript type definitions

🎯 当前状态

第一阶段完成使用现代技术栈搭建基础框架，实现响应式设计和基本导航功能。

第二阶段完成全面的数据库架构、Supabase配置、行级安全性（RLS）策略以及数据库服务功能。

下一步行动产品目录实施，包括浏览、搜索和定制功能（第三阶段）。

🗄️ 数据库设置

看见 SUPABASE_SETUP.md 关于设置您的Supabase数据库的详细说明。

快速设置：

1. 创建一个Supabase项目
2. 将您的凭据复制到 .env.local
3. 运行其中的SQL脚本 database/ 文件夹
4. 在（某处）测试您的连接 /test-db

📄 许可证

麻省理工学院许可证（MIT License）