QueryNotes: My First Full-Stack AI-Powered Note-Taking App

Hey there! Welcome to QueryNotes, a fun little project I put together using Next.js 15. This isn't some super serious enterprise-level app, but rather my first dive into building a complete full-stack application from scratch. My main goal was to learn the ropes of modern web development, especially how to handle user authentication and sprinkle in some cool AI features to make note-taking a bit smarter.

👉 Check out QueryNotes Live at querynotes.top

Phase 1: Laying the Foundation with AI at its Core

I've successfully completed the first major phase of QueryNotes development, focusing on establishing a robust foundation and integrating cutting-edge AI capabilities. Users can now enjoy a seamless experience from the moment they sign up, thanks to a secure and unified authentication flow that includes email/password registration, login, and robust session management. All sensitive routes are protected, ensuring data privacy.

The core note management functionalities are now fully operational, offering a clean and efficient interface for creating, viewing, editing, and deleting notes. My basic text editor provides the essentials for capturing thoughts, complemented by secure deletion confirmations for peace of mind.

The true highlight of Phase 1 is the deep integration of artificial intelligence. QueryNotes leverages a dual-provider architecture (SiliconFlow + DeepSeek) for its AI services, guaranteeing high availability and intelligent failover. This robust backend powers two pivotal features: Smart Summary and Smart Q&A. With Smart Summary, users can generate concise summaries of lengthy notes with a single click, distilling key information instantly. The Smart Q&A feature revolutionizes how users interact with their notes; by asking questions directly to their content, the AI swiftly finds relevant answers, transforming static notes into an interactive knowledge hub.

Figure 1: Smart Summary in action, providing instant insights from your notes.

Furthermore, my search and navigation system has been meticulously designed for efficiency. A global search feature provides real-time results for note titles with debouncing for a smooth user experience. Inspired by Apple's design language, a sleek search bar offers elegant interactions, clear indicators, and intelligently handles empty states. I've also implemented a responsive pagination system that adapts gracefully to both desktop and mobile views, ensuring optimal browsing regardless of device.

Figure 2: The interactive chat interface, allowing users to query their notes directly.

Tech Stack

QueryNotes is built on a bunch of cool, modern technologies to keep it fast, scalable, and easy to maintain:

• Framework: Next.js 15 (App Router, Server Components, Server Actions)
• Language: TypeScript
• UI: Tailwind CSS
• Database: Supabase (Postgres)
• Authentication: Supabase Auth
• AI: SiliconFlow + DeepSeek API (with intelligent failover)
• AI SDK: Vercel AI SDK v3
• Deployment: Vercel

Design Principles

I really focused on making QueryNotes not just functional but also pleasant to use and look at. Here's what I aimed for:

• Design Inspiration: Apple Design Language. I'm a big fan of Apple's Human Interface Guidelines (HIG) – simple, intuitive, and efficient user experiences are what I tried to achieve.
• Core Style: Elegant & Minimalist. For me, content is king. The interface should blend into the background, letting your notes shine. I achieved this with plenty of whitespace, clear visual layouts, and attention to small details.
• Color Strategy: I stuck to neutral colors (blacks, whites, and various grays) as the main palette, with just a single shade of blue for interactive elements like buttons and links. This keeps things harmonious and focused.
• Typography: I went with a clean, easy-to-read sans-serif font (currently Geist) to make sure reading notes is a first-class experience on any device.

Looking Ahead: Phase 2 and Beyond – More Cool Stuff Coming!

While Phase 1 got a solid, AI-powered note-taking experience out the door, my journey with QueryNotes is far from over. Phase 2 is all about adding even more features to make it super user-friendly and boost productivity. This includes expanding authentication with third-party logins (like GitHub and Google) and more comprehensive user profile management.

The note-editing experience is getting a big upgrade too, with a modern rich-text editor that will support full Markdown with live preview, image uploads, code block syntax highlighting, and rich formatting like tables and lists. Organizing your notes will also get a lot more flexible with a folder/notebook system, tag management, and advanced full-text search filters. And in the future, I'm thinking about collaboration features, note sharing, and export options. The AI capabilities will also continue to evolve with a Smart Q&A History, so you can easily revisit past conversations.