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.
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:
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:
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.
