AI Memo App

📝 备忘录应用程序（Memo App）

用于手机实习的Next.js笔记应用程序

这是一款具有完整CRUD功能的备忘录应用程序，包括Supabase集成和LocalStorage迁移方案，是MCP实践和GitHub PR创建练习的基础。

🚀 主要功能

• 创建、读取、修改和删除注释（CRUD）
• 📂 按类别分类注释（个人、工作、学习、想法、其他）
• 🏷️ 使用标记系统标记注释
• 🔍 基于标题、内容和标记的实时搜索
• 📱 响应式设计（移动、平板电脑、台式机）
• 💾 基于Supabase Postgres的数据持久化
• 🔄 首次访问时自动将LocalStorage数据迁移到Supabase
• 🎨 现代UI/UX with Tailwind CSS

🛠 技术堆栈

• 框架：Next.js 15.4.4（应用路由器）
• 语言：TypeScript
• 样式：顺风CSS v4
• 存储：Supabase Postgres（MCP迁移）
• 状态管理：反应挂钩（useState、useEffect、useMemo）
• 包管理器：npm

📦 安装和运行

1.安装依赖性

npm install

2.设置环境变量

.env.local 创建文件并填充以下值： (SUPABASE_SERVICE_ROLE_KEY是服务器专用的，绝对不能暴露给客户机。)

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
GEMINI_API_KEY=

.env.example 请参考文件。

3.运行开发服务器

npm run dev

4.浏览器连接

http://localhost:3000

📁 项目结构

memo-app/
├── src/
│   ├── app/
│   │   ├── globals.css          # 글로벌 스타일
│   │   ├── layout.tsx           # 루트 레이아웃
│   │   └── page.tsx             # 메인 페이지
│   ├── components/
│   │   ├── MemoForm.tsx         # 메모 생성/편집 폼
│   │   ├── MemoItem.tsx         # 개별 메모 카드
│   │   └── MemoList.tsx         # 메모 목록 및 필터
│   ├── hooks/
│   │   └── useMemos.ts          # 메모 관리 커스텀 훅
│   ├── types/
│   │   └── memo.ts              # 메모 타입 정의
│   └── utils/
│       ├── localStorage.ts      # 레거시 → Supabase 마이그레이션 유틸
│       └── seedData.ts          # Supabase 시드와 동일한 샘플 데이터
├── lib/
│   ├── supabaseClient.ts        # 브라우저 Supabase 클라이언트
│   └── supabaseServer.ts        # 서버(Service role) Supabase 클라이언트
└── README.md                    # 프로젝트 문서

💡 主要元件

MemoItem

• 以卡片形式显示单个注释
• 编辑/删除动作按钮
• 显示类别徽章和标记
• 日期格式化和文本修剪

备忘录表格

• 用于创建/编辑注释的模式表单
• 输入标题、内容、类别和标签
• 添加/删除标签功能
• 表单验证和错误处理

备忘录列表

• 显示注释列表网格
• 实时搜索和类别过滤
• 统计信息和空状态处理
• 反应式网格布局

📊 数据结构

interface Memo {
  id: string // 고유 식별자
  title: string // 메모 제목
  content: string // 메모 내용
  category: string // 카테고리 (personal, work, study, idea, other)
  tags: string[] // 태그 배열
  createdAt: string // 생성 날짜 (ISO string)
  updatedAt: string // 수정 날짜 (ISO string)
}

🎯 实验方案

该项目用于以下三个实践的基础：

实践1：Supabase MCP迁移（45分钟）

• LocalStorage→Supabase数据库转换
• 通过MCP实现方案/种子自动化（memos, memo_summaries)
• 现有数据/AI摘要无损迁移

实践2：功能扩展+GitHub PR（60分钟）

• 添加注释收藏夹功能
• 使用Cursor Custom Modes创建PR
• 代码审查和协作实践

练习3:Playwright MCP测试（45分钟）

• 创建E2E测试
• 浏览器自动化和可视化测试
• 性能测量和报告

详细的实习指南请参考课程资料。

🎨 示例数据和迁移

• Supabase memos 表中有6个样本数据。

• 如果浏览器LocalStorage保留了现有注释，则首次连接时将自动上载到Supabase，并清理LocalStorage。

• 准备项目会议（工作）

• React 18学习新功能（学习）

• 新的应用程序创意：习惯交易者（创意）

• 周末旅行计划（个人）

• 阅读列表（个人）

• 性能优化创意（创意）

🔧 开发指南

注释CRUD操作

// useMemos 훅 사용 예시
const {
  memos, // 필터링된 메모 목록
  loading, // 로딩 상태
  createMemo, // 메모 생성
  updateMemo, // 메모 수정
  deleteMemo, // 메모 삭제
  searchMemos, // 검색
  filterByCategory, // 카테고리 필터링
  stats, // 통계 정보
} = useMemos()

AI摘要存储流

• MemoViewer在中，单击生成摘要按钮 /api/summarize调用Google Gemini生成摘要。
• 生成的摘要 memo_summaries 在表格中 memo_id与一起保存，并自动载入最新摘要。

🚀 部署

Vercel分发

npm run build
npx vercel --prod

Netlify部署

npm run build
# dist 폴더를 Netlify에 드래그 앤 드롭

📄 许可证

MIT许可证-用于学习和实践。

🤝 贡献

这个项目是为了培训而制作的。请将改善事项或错误报告提交到热点或PR。

______________________________________________________________________

由以下材料制成❤️ 用于实践工作坊