QueryNotes: 我的第一个全栈 AI 驱动笔记应用

QueryNotes 是一个使用 Next.js 15 构建的完整全栈网页应用。它具有智能笔记管理功能，包含 AI 驱动的摘要和问答、精致的用户体验以及强大的技术栈。

已上线
Live
QueryNotes: 我的第一个全栈 AI 驱动笔记应用

大家好！欢迎来到 QueryNotes，这是我使用 Next.js 15 构建的一个有趣小项目。这开始是我第一次尝试构建完整的全栈应用程序，现在已经发展成为一个非常完整和精致的Web应用。我的主要目标是学习现代Web开发的技巧，特别是如何处理用户认证并加入一些酷炫的 AI 功能，让笔记变得更智能。

👉 在 querynotes.top 查看 QueryNotes 在线版本

第一阶段：以 AI 为核心奠定基础

我成功完成了 QueryNotes 开发的第一个主要阶段，专注于建立强大的基础并集成前沿的 AI 功能。用户从注册开始就能享受无缝体验，这得益于安全统一的认证流程，包括邮箱/密码注册、登录和强大的会话管理。所有敏感路由都受到保护，确保数据隐私。

核心笔记管理功能完全可用，提供了创建、查看、编辑和删除笔记的简洁高效界面。基础文本编辑器提供了捕捉想法的必需功能，配合安全删除确认功能让用户安心。

第一阶段的真正亮点是人工智能的深度集成。QueryNotes 利用双提供商架构（SiliconFlow + DeepSeek）提供 AI 服务，保证高可用性和智能故障转移。这个强大的后端支持两个关键功能：智能摘要 和 智能问答。通过智能摘要，用户只需点击一下就能生成冗长笔记的简洁摘要，瞬间提炼关键信息。智能问答功能彻底改变了用户与笔记的交互方式；通过直接向内容提问，AI 能快速找到相关答案，将静态笔记转变为交互式知识中心。

AI 摘要功能 图 1：智能摘要功能，从您的笔记中提供即时洞察。

此外，搜索和导航系统经过精心设计以提高效率。全局搜索功能为笔记标题提供实时结果，并具有防抖功能以获得流畅的用户体验。受 Apple 设计语言启发，优雅的搜索栏提供精美的交互、清晰的指示器，并智能处理空状态。我还实现了响应式分页系统，能够优雅地适应桌面和移动视图，确保无论在什么设备上都能获得最佳浏览体验。

聊天功能 图 2：交互式聊天界面，允许用户直接查询他们的笔记。

第二阶段：用户体验优化与核心增强

在第一阶段坚实基础之上，第二阶段专注于完善用户体验并添加让 QueryNotes 感觉像真正完整应用的关键功能。

  • 优化认证流程：整个注册和登录用户体验经过重新设计，更加清晰简单，使入门过程比以往更加顺畅。
  • 精致的 UI 和样式：我对用户界面进行了全面审查，对布局、间距和视觉一致性进行了有针对性的改进，获得更加精致和专业的美感。
  • 域名邮箱集成：应用现在从自己的域名发送交易邮件（如验证链接），由 Resend 和 Cloudflare 集成提供支持。这增强了信任度和可送达性。
  • AI 问答历史：智能问答功能现在更加强大。与您笔记的所有对话都会自动保存，让您可以随时重新访问过去的问题和答案。

技术栈

QueryNotes 基于一系列酷炫的现代技术构建，保持快速、可扩展且易于维护：

设计原则

我真正专注于让 QueryNotes 不仅功能强大，而且使用起来愉快、看起来美观。以下是我的目标：

  • 设计灵感： Apple 设计语言。我是 Apple 人机界面指南（HIG）的忠实粉丝——简单、直观、高效的用户体验是我努力实现的目标。
  • 核心风格： 优雅与极简。对我来说，内容为王。界面应该融入背景，让您的笔记闪闪发光。我通过大量留白、清晰的视觉布局和对小细节的关注来实现这一点。
  • 色彩策略： 我坚持使用 中性色彩（黑色、白色和各种灰色）作为主要调色板，只用 单一蓝色调 用于按钮和链接等交互元素。这保持了和谐和专注。
  • 字体排版： 我选择了干净、易读的无衬线字体（目前是 Geist），确保在任何设备上阅读笔记都是一流的体验。

展望未来：第三阶段 - 高级生产力功能

虽然 QueryNotes 现在已经是一个非常强大的应用，但旅程还没有结束。第三阶段的主要焦点是对核心写作体验的重大升级。

下一个重大功能将是 现代富文本编辑器。这将用功能齐全的编辑器替换基本的文本区域，支持：

  • 完整的 Markdown 和实时预览。
  • 直接在笔记中上传图片。
  • 代码块的语法高亮。
  • 丰富的格式选项，如表格、列表和引用块。

除此之外，我还在考虑文件夹/笔记本系统以更好地组织、高级全文搜索过滤器和协作工具等功能。目标是持续发展 QueryNotes，使其成为更强大和不可或缺的思考工具。