AI导哈

笔记应用

基于Supabase数据库的Next.js备忘录应用，具备完整的CRUD功能、分类标签系统和AI摘要功能，适用于个人和团队的知识管理。

  • by itsong110
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 itsong110/MCP

使用说明

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

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

具有基于Supabase数据库的完整CRUD功能的备忘录应用程序，是MCP集成和GitHub PR生成实践的基础项目。

🚀 主要功能

  • 创建、读取、修改和删除注释（CRUD）
  • 📂 按类别分类注释（个人、工作、学习、想法、其他）
  • 🏷️ 使用标记系统标记注释
  • 🔍 基于标题、内容和标记的实时搜索
  • 📱 响应式设计（移动、平板电脑、台式机）
  • 💾 基于Supabase数据库的数据存储
  • 🤖 基于AI的笔记摘要功能（Google Gemini）
  • 🎨 现代UI/UX with Tailwind CSS

🛠 技术堆栈

  • 框架：Next.js 15.4.4（应用路由器）
  • 语言：TypeScript
  • 样式：顺风CSS v4
  • 数据库：Supabase（PostgreSQL）
  • 状态管理：React钩子（useState、useEffect、useMemo、useTransition、useOptimistic）
  • 服务器操作：Next.js服务器操作
  • 人工智能：Google Gemini API
  • 包管理器：npm

📦 安装和运行

1.安装依赖性

npm install

2.设置环境变量

.env.local 创建文件并设置以下环境变量：

# Google Gemini API Key
GEMINI_API_KEY=your_gemini_api_key

# Supabase Configuration (Server)
SUPABASE_URL=your_supabase_project_url
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
SUPABASE_ANON_KEY=your_supabase_anon_key

# Supabase Configuration (Client exposure)
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Supabase项目设置：

  1. Supabase在中创建新项目
  2. 从项目设置>API复制URL、Anon Key、Service Role Key
  3. 使用Supabase CLI连接项目： supabase link

3.数据库迁移

通过Supabase MCP自动应用迁移。要手动应用，请：

# Supabase CLI 사용 시
supabase db push

或者，可以在Supabase Dashboard上使用SQL Editor执行迁移。

4.运行开发服务器

npm run dev

5.浏览器连接

http://localhost:3000

📁 项目结构

memo-app/
├── src/
│   ├── app/
│   │   ├── actions/
│   │   │   └── memoActions.ts   # 서버 액션 (CRUD)
│   │   ├── api/
│   │   │   └── memos/
│   │   │       └── summary/
│   │   │           └── route.ts  # 요약 API 라우트
│   │   ├── globals.css          # 글로벌 스타일
│   │   ├── layout.tsx           # 루트 레이아웃
│   │   └── page.tsx             # 메인 페이지 (서버 컴포넌트)
│   ├── components/
│   │   ├── MemoAppClient.tsx    # 클라이언트 앱 컴포넌트
│   │   ├── MemoForm.tsx         # 메모 생성/편집 폼
│   │   ├── MemoItem.tsx         # 개별 메모 카드
│   │   ├── MemoList.tsx         # 메모 목록 및 필터
│   │   └── MemoViewerModal.tsx  # 메모 상세 뷰어
│   ├── hooks/
│   │   └── useMemos.ts          # 메모 관리 커스텀 훅
│   ├── lib/
│   │   └── supabase/
│   │       ├── client.ts        # 클라이언트 Supabase 클라이언트
│   │       └── server.ts         # 서버 Supabase 클라이언트
│   ├── types/
│   │   └── memo.ts              # 메모 타입 정의
│   └── utils/
│       ├── localStorage.ts      # LocalStorage 유틸리티 (레거시)
│       └── seedData.ts          # 샘플 데이터 시딩
└── README.md                    # 프로젝트 문서

💡 主要元件

MemoItem

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

备忘录表格

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

备忘录列表

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

📊 数据结构

TypeScript接口

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

数据库模式

CREATE TABLE memos (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  title TEXT NOT NULL,
  content TEXT NOT NULL,
  category TEXT NOT NULL CHECK (category IN ('personal', 'work', 'study', 'idea', 'other')),
  tags TEXT[] DEFAULT '{}',
  summary TEXT,
  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
  updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);

索引：

  • idx_memos_category：筛选类别
  • idx_memos_created_at：对齐创建

🎯 迁移完成

此项目已成功从LocalStorage迁移到Supabase数据库：

已完成的任务

  • 创建Supabase数据库模式
  • 实现基于服务器动作的CRUD
  • 集成Next.js服务器组件
  • 实现Optimistic Updates
  • AI摘要功能DB集成
  • 创建牧业数据

主要更改

  1. 数据存储：本地存储→ Supabase PostgreSQL
  2. 数据关闭：客户端→服务器端（Server Actions）
  3. 状态管理：使用状态→ use过渡+use乐观
  4. 保存摘要：内存→数据库永久存储

🎯 其他实践方案

练习1：功能扩展+GitHub PR（60分钟）

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

练习2：测试Playwright MCP（45分钟）

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

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

🎨 示例数据

首次运行应用程序时，将自动生成6个示例注释：

  • 准备项目会议（工作）
  • React 18学习新功能（学习）
  • 新的应用程序创意：习惯交易者（创意）
  • 周末旅行计划（个人）
  • 阅读列表（个人）
  • 性能优化创意（创意）

🔧 开发指南

使用服务器动作

import {
  getMemos,
  getMemoById,
  createMemo,
  updateMemo,
  deleteMemo,
  updateMemoSummary,
} from '@/app/actions/memoActions'

// 서버 컴포넌트에서
const memos = await getMemos()

// 서버 액션에서
const newMemo = await createMemo({
  title: '새 메모',
  content: '내용',
  category: 'personal',
  tags: ['태그1'],
})

使用客户端挂钩

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

使用摘要功能

在注释详细查看器中自动生成摘要，生成的摘要存储在数据库中。

// API 라우트에서 요약 생성 및 저장
POST /api/memos/summary
{
  "content": "메모 내용",
  "memoId": "메모 ID"
}

🚀 部署

Vercel分发

npm run build
npx vercel --prod

Netlify部署

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

📄 许可证

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

🤝 贡献

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

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

相关 MCP