Overview

QuikMemo is an elegant note-taking and writing companion that allows users to jot down their ideas and thoughts while benefiting from AI-assisted proofreading. The application supports rich-text markdown and functions as a Progressive Web App (PWA), providing a seamless user experience across devices.

Technologies

• Frameworks/Libraries: Next.js,
• Language: TypeScript/JavaScript
• Styling: Tailwind CSS
• Web Animation: Motion
• Databases: MongoDB, Prisma
• Authentication & Validation: Auth.js, Zod, React hook form
• Testing: Vitest, React Testing Library

Features

• WYSIWYG Editor: A user-friendly editor that enhances text formatting and rich-text markdown support.
• Comprehensive Note Management:
  • Create, read, update, and delete notes.
  • Archive notes for later reference.
  • View all notes and archived notes.
  • Filter notes by specific tags.
  • Search notes by title, tag, and content.
• Customization Options:
  • Select color themes for a personalized interface.
  • Choose font themes to enhance readability.
• User Authentication:
  • Create an account, log in, change passwords, and reset passwords.
• Database Integration: Save notes and user details securely in a database.

Development Process

This project was inspired by a UI challenge on Frontendmentor.io, where I aimed to create a full-stack CRUD application. Utilizing Next.js enabled me to leverage server-side rendering effectively.

Key Steps:

1. Design and Layout: I focused on creating an intuitive dashboard through continuous iteration to achieve the perfect responsive layout.
2. User Authentication: Integrating user authentication for the signup page presented challenges that deepened my understanding of secure login processes.

Challenges

During the development of QuikMemo, I faced several challenges:

• User Authentication Integration: Implementing secure user authentication was complex but essential for protecting user data and ensuring a smooth onboarding experience.
• Responsive Design: Designing a dashboard that works well on various devices required careful attention to detail and testing across different screen sizes.

Key Takeaways

Developing QuikMemo provided valuable insights into full-stack development and user experience design. Key takeaways include:

• The importance of creating a user-friendly interface that enhances productivity.
• Gaining hands-on experience with server-side rendering using Next.js.
• Understanding the complexities of implementing secure user authentication in web applications.