Designing and Developing a modern progressive web application for Writing, organizing, and managing notes

Duration: 7 weeks Role: Full-Stack Engineer & Visual Designer Technologies: Next.js (App Router), TypeScript, Tailwind CSS, Auth.js, Prisma, MongoDB, Zod, React Hook Form, Tiptap, Framer Motion, Resend, React Email, Vitest, React Testing Library, Umami Analytics

Quikmemo is a modern note-taking application built for people who capture ideas throughout the day and need a fast, reliable workspace that works everywhere. Whether writing meeting notes, organizing research, planning projects, or drafting articles, users can create, organize, and retrieve information from their device.

Originally inspired by a UI challenge, the project quickly evolved into a production-grade full-stack Progressive Web Application with secure authentication, rich-text editing, comprehensive note management, email verification, offline capabilities.

The goal wasn't simply to build another note-taking application; it was to create a writing experience that feels lightweight and distraction-free while providing the reliability and security expected from a modern productivity platform.

Most lightweight note-taking applications sacrifice advanced functionality for simplicity, while feature-rich productivity tools often become cluttered and overwhelming.

Users need an application that allows them to write naturally, organize information efficiently, and access their notes from anywhere without worrying about connectivity, authentication, or losing important work. The application also needed to solve several technical challenges:

Rich text editing without compromising performance

Secure authentication supporting both credentials and OAuth providers

Reliable offline functionality through Progressive Web App capabilities

Flexible data modeling for evolving note structures

Secure user data isolation

Comprehensive testing to ensure long-term stability

The challenge was to combine all of these capabilities into an interface that remained fast, intuitive, and enjoyable to use every day.

I independently designed, architected, and developed the entire application from concept to deployment.

My responsibilities included:

Product planning and UX design

Frontend architecture

Backend API development

Authentication system implementation

Database design

Rich-text editor integration

Progressive Web App implementation

Email verification workflows

Testing, deployment and performance optimization

Instead of treating note-taking as simple CRUD operations, I designed Quikmemo around the complete writing workflow ensuring a distraction-free writing environment powered by the Tiptap editor. This provides users powerful organizational features such as favorites, archives, tagging, filtering, and full-text search.

Every aspect of the platform was designed around responsiveness and reliability. Whether users are online or offline, writing on desktop or mobile, signing in with credentials (email and password) or OAuth providers (Google or GitHub), the experience remains consistent and seamless.

The result is a Progressive Web Application that behaves much like a native productivity app while remaining accessible directly through the browser.

Rich Text Writing Experience: Rather than limiting users to plain text, the editor supports rich formatting while storing content efficiently as structured HTML inside a MongoDB database. This approach provides users with a flexible writing experience while preserving searchability and future extensibility.

Comprehensive Note Management: Managing information goes beyond simply creating notes.

Users can:

Create notes

Edit existing notes

Archive notes

Restore archived notes

Mark notes as favorites

Delete notes

Filter and search notes using titles, tags, or the content

Secure Authentication & Account Management: Credential-based authentication includes secure password hashing with bcrypt, email verification, protected sessions, and server-side authentication powered by Auth.js.

Users can authenticate using:

Email and password

Google

GitHub

Email Verification: To improve account security and prevent fraudulent/fake registrations, I implemented a complete email verification workflow using Resend and React Email.

Verification emails are generated dynamically and delivered through a fully customized email system that integrates seamlessly into the authentication process. This ensures only verified users gain access while maintaining a great onboarding experience.

Progressive Web App Experience: Quikmemo was built as a Progressive Web Application rather than a traditional website.

Users can install the application directly onto desktops, tablets, or mobile devices and continue accessing their notes even when internet connectivity is unavailable.

Personalized User Experience: Includes customizable themes, dark mode support, and interface personalization, allowing users to create a workspace that feels comfortable during long writing sessions.

Real-Time User Feedback: Whether saving, updating, archiving, restoring, or deleting notes, users receive a toast notification that clearly communicate application status and reduce uncertainty during interactions.

The application was built using Next.js App Router to unify frontend and backend development within a single architecture. Server Components, Server Actions, API Routes, and modern React features were used to improve performance while simplifying data flow throughout the application.

Quikmemo uses MongoDB with Prisma ORM to balance development flexibility with maintainable data structures. MongoDB's schema flexibility made it easy to evolve the application as new features were introduced, while Prisma provided type-safe database access and improved developer productivity.

Authentication was implemented using Auth.js with support for:

Credentials

Google OAuth

GitHub OAuth

Session management

Protected routes

Email verification

Password encryption

Instead of storing plain text, note content is persisted as structured HTML generated by Tiptap. This enables richer editing capabilities while preserving compatibility with future rendering, exporting, and search features.

The application behaves consistently across desktop and mobile devices without requiring separate native applications. Using next-pwa, Quikmemo provides:

Installable application support

Offline availability

Cached assets

Native-like user experience

Every user input interaction is validated using Zod schemas integrated with React Hook Form. This ensures both client-side and server-side validation remain synchronized, improving security while reducing duplicated logic.

Anonymous usage analytics are collected through Umami Analytics, providing insight into application usage while respecting user privacy.

User Data Isolation: One of the most important requirements wasmaking ensure every user's notes remained completely private. As the application grew, maintaining strict ownership rules across all CRUD operations became increasingly important.

The Solution: I designed a robust database relationship model combined with server-side authorization logic that ensures every query is scoped to the authenticated user. Each request validates ownership before any note can be viewed, edited, archived, restored, or deleted.

Result: Every user's workspace remains fully isolated, preventing unauthorized access while maintaining clean and scalable authorization logic.

Managing Complex Authentication Flows: Supporting both traditional email authentication and OAuth providers introduced several edge cases involving sessions, redirects, login state, and logout behavior. Client-side authentication also created inconsistencies between protected routes and authenticated sessions.

The Solution: I migrated the authentication system to Auth.js with server-side session management, allowing authentication logic to be centralized and significantly simplifying protected routes throughout the application.

Result: The authentication experience became faster, more secure, easier to maintain, and considerably more reliable across different login methods.

Migrating Existing Users to Email Verification: Introducing email verification after users had already registered created an unexpected production issue. Older accounts had never completed email verification because the feature did not exist before they were created.

As a result, users attempting to log in received conflicting messages. When signing up again, the application correctly reported that the email address exists already. However, an attempt to log in displays an Invalid Credentials error because the authentication logic required the emailVerified field, which remained null for legacy users.

The Solution: Rather than asking every existing user to recreate their accounts, I designed a migration strategy. Using Prisma, I performed a bulk database update, assigning a verification timestamp to legacy accounts whose emailVerified field was still null.

Result: Existing users immediately regained access to their accounts without data loss, while all newly created accounts continued to follow the secure email verification process. This experience reinforced the importance of planning for edge cases and backward-compatible authentication migrations in a production application.

Native-Like Productivity Experience: Users can install Quikmemo directly from the browser and access their notes across desktop and mobile devices with an experience comparable to native applications.

Streamlined Writing Workflow: Rich-text editing combined with intuitive organization features creates a distraction-free environment for capturing ideas, managing projects, and organizing information.

Secure Account Management: Multiple authentication providers, encrypted credentials, email verification, and server-side session management provide a secure foundation for user data.

Reliable Performance: Modern Next.js architecture, optimized rendering, and Progressive Web App capabilities contribute to a fast and dependable user experience.

Production-Ready Stability: Extensive unit and integration testing ensures new features can be developed confidently while maintaining application reliability.