AI导哈

咖啡店PWA订购系统

一个现代化的渐进式Web应用程序，用于咖啡店订购和取货时间安排。

  • by CliveStruv56
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 CliveStruv56/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
  3. 复制环境变量：
    cp .env.example .env.local
  4. 更新 .env.local 使用您的Supabase和Stripe凭据
  5. 运行开发服务器：
    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）

相关 MCP