AI Note App

Project Description

This project is a proof of concept that integrates OpenAI’s API with a user’s personal notes to narrow the context of any query to the information stored within said notes. The goal is to create a focused, context-aware assistant that can help users by answering questions based solely on their stored data.

The project has a variety of potential use cases, such as helping students study, providing an internal chatbot for company documentation, or supporting memory-impaired individuals with life events and important details. Its broad target audience is anyone who needs context-specific information from their own notes, with the AI being limited to only the content the user has saved.

The inspiration behind the project came from observing multiple clients struggle with onboarding new employees and maintaining up-to-date internal documentation. This solution addresses both issues by offering a streamlined way to access and interact with critical information.

Challenges & Solutions

One of the initial challenges I faced was related to using Next.js’s server actions in conjunction with client-side hooks like useActionState and trying to invalidate routes after a successful mutation. The default behavior of route invalidation would trigger a full route refresh, which didn’t give me the fine-grained control I needed. To solve this, I switched to React Query for better caching and more flexible invalidation controls, which greatly improved the experience.

Another challenge came when working with Supabase. Their documentation had conflicting instructions about separating the server and browser clients, which led to some confusion. Fortunately, Supabase’s latest connection utility, available in the table management UI, helped clarify this and provided the solution.

A final challenge was rendering and styling a markdown preview of a user’s notes. I initially struggled to find a clean, efficient solution, but using the ReactMarkdown package along with Tailwind CSS allowed me to easily style the markdown and ensure a smooth user experience. The render props provided by ReactMarkdown made customizing the display straightforward.

Tech Stack and Rationale

• Next.js: I chose Next.js for its full-stack capabilities and ease of integration with Supabase. Its server-side rendering and API routes were a natural fit for building a performant, dynamic application with both front-end and back-end functionality in one framework.
• Supabase: For the backend, Supabase was an excellent choice as it offers a comprehensive suite of tools, including authentication, row-level security, and a robust database solution. It simplified the entire backend setup and allowed me to focus on building features rather than managing infrastructure.
• React Query: I used React Query for managing data fetching, mutation, caching, and cache invalidation. It’s an incredibly powerful tool for handling asynchronous data and provided much-needed flexibility in terms of caching and re-fetching data when necessary.
• Shadcn & Tailwind: For UI styling, I turned to Shadcn for accessibility features and Tailwind CSS for its utility-first approach to styling. Together, they allowed for rapid, responsive design with easy-to-control theming and customization options.
• Fuse.js: To add fuzzy search functionality to a user’s notes, I used Fuse.js. Its lightweight and efficient search algorithm made it easy to integrate a flexible search experience, allowing users to quickly find relevant notes even with minor typos or variations in their queries.
• OpenAI API: The heart of the project is OpenAI’s API, which I used to contextualize and answer questions based on the user’s notes. This allowed for intelligent, context-aware responses that were directly tied to the user’s stored data.

Performance & Scalability

The simplicity of the project structure plays a key role in its scalability. The application is organized in a way that easily accommodates future growth:

• /actions: Contains server-side logic for handling authentication and database-related operations.
• /hooks: Custom hooks for React Query, managing data fetching, mutations, and caching.
• /providers: Houses the providers for React Query and Shadcn theme management.
• /supabase: Separated logic for handling both server and client database connections tailored to their respective environments.

While I initially experimented with Prisma ORM to abstract away platform-specific details and make the app more agnostic, I ran into issues with Prisma’s migrations. The migrations would occasionally wipe unspecified tables and produce errors, likely due to some misconfiguration on my part. Ultimately, the added complexity wasn’t worth the benefits, so I decided to stick with Supabase’s native tools.

Regarding performance, the primary bottleneck arises from Supabase’s authentication and database speeds, which can sometimes result in noticeable lag. However, overall, the architecture is designed to handle growth without significant performance concerns, given the project’s simplicity and modularity.

Lessons Learned

• Database Abstraction: One key lesson I learned was that the abstraction of keeping the front-end and back-end agnostic to the database provider wasn’t as valuable in this case. Given the simplicity of the database schema for this proof of concept, using a more complex tool like Prisma (or even Drizzle) didn’t offer enough benefit to justify the added complexity, especially with migration issues.
• Memory Management in AI Chatbots: Another lesson, which is still a work in progress, revolves around memory management in AI-based chatbots. As users create more notes, the context provided to OpenAI becomes larger, leading to higher token usage for each query. Managing this effectively is crucial, as it directly impacts both performance and costs.
• Server Actions Limitations: Finally, I found that Next.js’s server actions, while useful, still lack the fine-grained cache busting controls that other platforms offer. This was a limitation when trying to achieve more precise control over caching behavior, and it prompted me to explore alternatives like React Query for better flexibility.

Next Steps

There’s a lot of room for optimization and fine-tuning moving forward. One potential improvement is running the AI model locally, which could help mitigate the cost of providing large contexts for each query. This would give users more flexibility without being constrained by token limitations. Alternatively, instead of providing raw notes, it might make sense to fine-tune a model with the user’s notes for better performance and more accurate responses.

Next steps include introducing an organizational structure, allowing users to separate their personal notes from shared organization-related notes. This will also involve adding a user management system to support multiple users within an organization, along with role-based access controls. These controls would ensure that users with lower roles can’t edit or delete critical resources, maintaining data integrity.