Quikmemo is a sleek, user-friendly web application designed to help users capture ideas, organize tasks, and manage notes effortlessly. Crafted with simplicity and productivity in mind, it offers a modern writing environment powered by the robust Tiptap rich-text editor. As a Progressive Web App (PWA), Quikmemo delivers a native-like experience, enabling installation on desktops and mobile devices with offline access, making it a reliable companion for writers, students, professionals, and anyone who values streamlined note-taking.

TECHNOLOGIES

• Framework: Next.js (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Authentication: Auth.js (NextAuth), bcrypt.js, OAuth (Google, GitHub)
• Validation: Zod, React Hook Form
• Database & ORM: MongoDB, Prisma
• State Management: Context API
• Rich Text Editor: Tiptap
• Animation: Motion (Framer Motion)
• PWA Support: next-pwa
• Email Service: Resend, React Email
• Analytics: Umami Analytics
• Testing: Vitest, React Testing Library
• Icons: Lucide Icons
• Deployment: Vercel

KEY FEATURES

• Advanced Rich Text Editing
  Enables visually rich, formatted notes with support for HTML content storage in MongoDB, ensuring flexibility and easy searchability.
• Comprehensive Note Management
  Create, edit, delete, archive, favorite, and restore notes effortlessly. Powerful search and filtering by title, tags, or content enable quick access to important information.
• Secure User Authentication
  Supports credential-based and OAuth authentication processes (Google, GitHub), with secure password encryption (bcrypt.js), email confirmation, and robust session handling powered by Auth.js (NextAuth).
• Customizable User Experience
  Theme toggling and UI personalization options offer users a tailored, comfortable workspace.
• Progressive Web App
  Installable on various devices with offline capabilities, ensuring accessibility anytime and anywhere.
• Responsive Feedback
  Real-time notifications during note operations (saving, updating, deleting, archiving, etc) keep users informed and engaged.
• Thorough Testing
  Reliability and stability ensured through exhaustive unit and integration tests using Vitest and React Testing Library.

DEVELOPMENT PROCESS

Quikmemo originated from a UI challenge on Frontendmentor.io and evolved into a full-stack CRUD application focusing on real-world usability. Key development stages included:

• Iterative UI Design: Crafted an intuitive, responsive dashboard optimized for desktop and mobile devices.
• Secure Authentication Integration: Implemented both credential-based and OAuth login flows, progressing from client-side to server-side authentication to bolster security and reliability.
• Flexible Database Architecture: Leveraged MongoDB’s schema-less capabilities combined with Prisma ORM for responsive schema evolution and efficient data handling.
• Thorough Testing: Reliability and stability ensured through exhaustive unit and integration tests using Vitest and React Testing Library.

CHALLENGES & SOLUTION

• User Data Isolation
  Ensuring notes were exclusively accessible to their creators was challenging. Leveraging community knowledge from Stack Overflow, I designed a robust data schema and access control logic to isolate user data securely.
• Complex Authentication Flows
  Combining credential and OAuth flows with email verification posed difficulties, especially with logout and session management. Switching to server-side authentication with NextAuth resolved these issues and streamlined the user experience.
• Email Verification Migration
  Legacy user accounts without email verification caused login errors. I resolved this by bulk-updating the database to mark old users as verified, unlocking access while preserving security.

During the integration of email verification, I encountered a critical issue with existing accounts. When trying to sign up with an email that was already registered, I received a message stating "email already exists," which was accurate. However, upon attempting to log in with the correct credentials, I faced an "invalid credentials" error. This was due to the fact that these accounts were created before implementing email verification. The server error message I received was:

[auth][error] CredentialsSignin: Please verify your email before logging in. 
Read more at https://errors.authjs.dev#credentialssignin

The diagnosis revealed that old users in the database had emailVerified set to null, while the new login logic required this field to be populated for access; since these users never received a verification email, they were effectively locked out. To resolve this, I migrated the old users to a verified status by performing a bulk update in the MongoDB shell, setting emailVerified to the current date for all users where it was null using the following command:

await db.user.updateMany({
  where: { emailVerified: null },
  data: { emailVerified: new Date() },
});

• Schema Maintenance
  MongoDB’s flexibility demanded careful planning to maintain data integrity while adapting to evolving requirements.

LESSONS LEARNED

• Server-side authentication significantly enhances security and reliability in production applications.
• Implementing email verification strengthens data quality and prevents fraudulent account creation.
• Building extensive test suites and debugging real-world edge cases are vital for delivering a polished product.
• Careful database schema design is crucial when working with flexible NoSQL systems to balance agility and data integrity.

TAKEAWAYS

Quikmemo seamlessly combines a minimalist yet powerful note-taking interface with advanced features like rich text editing, strong authentication, and PWA convenience. It delivers a smooth, secure, and engaging user experience, empowering diverse users to stay organized and productive across devices. This project deepened my expertise in full-stack development, authentication workflows, and progressive web application best practices.