AI导哈

备忘录应用

一个基于Next.js的备忘录应用，支持完整的CRUD功能、分类管理、标签系统和实时搜索，适用于个人和团队使用。

  • by kkangmj
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 kkangmj/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=<Supabase 프로젝트 URL>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<Supabase anon 키>
SUPABASE_SERVICE_ROLE_KEY=<Supabase service role 키>
GEMINI_API_KEY=<Google Gemini API 키>

.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。

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

相关 MCP